Skip to content

Commit

Permalink
chore(charts): Add tooltip example
Browse files Browse the repository at this point in the history
  • Loading branch information
dlabrecq committed May 3, 2024
1 parent 0ba7e5c commit a5bca2d
Showing 1 changed file with 26 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -607,9 +607,34 @@ import { Chart, ChartAxis, ChartBar, ChartStack, ChartThemeColor, ChartTooltip }
</div>
```

### Fixed tooltip
This demonstrates how to adjust the tooltip position and label radius
```js
import React from 'react';
import { ChartDonut, ChartTooltip } from '@patternfly/react-charts';

<div style={{ height: '150px', width: '150px' }}>
<ChartDonut
ariaDesc="Average number of pets"
ariaTitle="Donut chart example"
constrainToVisibleArea
data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
height={150}
labelComponent={<ChartTooltip center={{ x: 75, y: 0 }} />}
labelRadius={46}
labels={({ datum }) => `${datum.x}: ${datum.y}%`}
name="chart5"
subTitle="Pets"
title="100"
themeColor={ChartThemeColor.cyan}
width={150}
/>
</div>
```

### Legend

This demonstrates an approach for applying tooltips to a legend using a custom label component.
This demonstrates an approach for applying tooltips to a legend using a custom legend label component.

```js
import React from 'react';
Expand Down

0 comments on commit a5bca2d

Please sign in to comment.