Skip to content

Commit a5bca2d

Browse files
committed
chore(charts): Add tooltip example
#10337
1 parent 0ba7e5c commit a5bca2d

File tree

1 file changed

+26
-1
lines changed

1 file changed

+26
-1
lines changed

packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md

+26-1
Original file line numberDiff line numberDiff line change
@@ -607,9 +607,34 @@ import { Chart, ChartAxis, ChartBar, ChartStack, ChartThemeColor, ChartTooltip }
607607
</div>
608608
```
609609

610+
### Fixed tooltip
611+
This demonstrates how to adjust the tooltip position and label radius
612+
```js
613+
import React from 'react';
614+
import { ChartDonut, ChartTooltip } from '@patternfly/react-charts';
615+
616+
<div style={{ height: '150px', width: '150px' }}>
617+
<ChartDonut
618+
ariaDesc="Average number of pets"
619+
ariaTitle="Donut chart example"
620+
constrainToVisibleArea
621+
data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
622+
height={150}
623+
labelComponent={<ChartTooltip center={{ x: 75, y: 0 }} />}
624+
labelRadius={46}
625+
labels={({ datum }) => `${datum.x}: ${datum.y}%`}
626+
name="chart5"
627+
subTitle="Pets"
628+
title="100"
629+
themeColor={ChartThemeColor.cyan}
630+
width={150}
631+
/>
632+
</div>
633+
```
634+
610635
### Legend
611636

612-
This demonstrates an approach for applying tooltips to a legend using a custom label component.
637+
This demonstrates an approach for applying tooltips to a legend using a custom legend label component.
613638

614639
```js
615640
import React from 'react';

0 commit comments

Comments
 (0)