Skip to content

chore(chart tooltip): convert to typescript part two #11897

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

chore(chart tooltip): convert to typescript part two #11897

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f9b5ce0
chore(chart tooltip): convert to typescript part two
Mash707 Jun 28, 2025
5a76c01
minor changes
Mash707 Jun 28, 2025
c2e2d6b
minor changes
Mash707 Jun 28, 2025
700eebe
minor changes
Mash707 Jun 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
326 changes: 9 additions & 317 deletions packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltip.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ hideDarkMode: true
---

import { createRef } from 'react';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can be removed once we get #11896 merged since it will not be used.

import { useRef, useState, useEffect } from 'react';
import {
Chart,
ChartArea,
Expand Down Expand Up @@ -540,355 +541,46 @@ class EmbeddedLegendAlt extends React.Component {

This demonstrates an alternate way of applying tooltips using data labels.

```js
import { Chart, ChartAxis, ChartBar, ChartStack, ChartThemeColor, ChartTooltip } from '@patternfly/react-charts/victory';
```ts file = "ChartTooltipDataLabel.tsx"

<div style={{ height: '275px', width: '450px' }}>
<Chart
ariaDesc="Average number of pets - possibly more information to summarize the data in the chart."
ariaTitle="Data label example chart title"
domainPadding={{ x: [30, 25] }}
legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]}
legendPosition="bottom-left"
height={275}
name="chart6"
padding={{
bottom: 75, // Adjusted to accommodate legend
left: 50,
right: 50,
top: 50
}}
themeColor={ChartThemeColor.multiOrdered}
width={450}
>
<ChartAxis />
<ChartAxis dependentAxis showGrid />
<ChartStack horizontal>
<ChartBar
data={[
{ name: 'Cats', x: '2015', y: 1, label: 'Cats: 1' },
{ name: 'Cats', x: '2016', y: 2, label: 'Cats: 2' },
{ name: 'Cats', x: '2017', y: 5, label: 'Cats: 5' },
{ name: 'Cats', x: '2018', y: 3, label: 'Cats: 3' }
]}
labelComponent={<ChartTooltip constrainToVisibleArea />}
/>
<ChartBar
data={[
{ name: 'Dogs', x: '2015', y: 2, label: 'Dogs: 2' },
{ name: 'Dogs', x: '2016', y: 1, label: 'Dogs: 1' },
{ name: 'Dogs', x: '2017', y: 7, label: 'Dogs: 7' },
{ name: 'Dogs', x: '2018', y: 4, label: 'Dogs: 4' }
]}
labelComponent={<ChartTooltip constrainToVisibleArea />}
/>
<ChartBar
data={[
{ name: 'Birds', x: '2015', y: 4, label: 'Birds: 4' },
{ name: 'Birds', x: '2016', y: 4, label: 'Birds: 4' },
{ name: 'Birds', x: '2017', y: 9, label: 'Birds: 9' },
{ name: 'Birds', x: '2018', y: 7, label: 'Birds: 7' }
]}
labelComponent={<ChartTooltip constrainToVisibleArea />}
/>
<ChartBar
data={[
{ name: 'Mice', x: '2015', y: 3, label: 'Mice: 3' },
{ name: 'Mice', x: '2016', y: 3, label: 'Mice: 3' },
{ name: 'Mice', x: '2017', y: 8, label: 'Mice: 8' },
{ name: 'Mice', x: '2018', y: 5, label: 'Mice: 5' }
]}
labelComponent={<ChartTooltip constrainToVisibleArea />}
/>
</ChartStack>
</Chart>
</div>
```

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

<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.teal}
width={150}
/>
</div>
```ts file = "ChartTooltipFixed.tsx"

```

### Legend

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

```js
import { ChartLabel, ChartLegend, ChartPie, ChartThemeColor } from '@patternfly/react-charts/victory';
import { Tooltip } from '@patternfly/react-core';
```ts file = "ChartTooltipLegend.tsx"

class TooltipPieChart extends React.Component {
constructor(props) {
super(props);

// Custom legend label component
// Note: Tooltip wraps children with a div tag, so we add a reference to ChartLabel instead
this.LegendLabel = ({datum, ...rest}) => {
const ref = createRef();
return (
<g ref={ref}>
<ChartLabel {...rest} />
<Tooltip content={datum.name} enableFlip reference={ref} />
</g>
);
}

// Custom legend component
this.getLegend = (legendData) => (
<ChartLegend
data={legendData}
labelComponent={<this.LegendLabel />}
/>
);
}

render() {
return (
<div style={{ height: '275px', width: '300px' }}>
<ChartPie
ariaDesc="Average number of pets - possibly more information to summarize the data in the chart."
ariaTitle="Legend example chart title"
constrainToVisibleArea
data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
height={275}
labels={({ datum }) => `${datum.x}: ${datum.y}`}
legendComponent={this.getLegend([
{ name: 'Cats: 35' },
{ name: 'Dogs: 55' },
{ name: 'Birds: 10' }
])}
legendPosition="bottom"
name="chart7"
padding={{
bottom: 65,
left: 20,
right: 20,
top: 20
}}
themeColor={ChartThemeColor.multiOrdered}
width={300}
/>
</div>
);
}
}
```

### Left aligned

This demonstrates how to customize tooltip label alignment using theme properties.

```js
import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartVoronoiContainer, getCustomTheme } from '@patternfly/react-charts/victory';

class TooltipThemeChart extends React.Component {
constructor(props) {
super(props);

// Victory theme properties only
this.themeProps = {
voronoi: {
style: {
labels: {
textAnchor: 'start' // Align tooltip labels left
}
}
}
};

// Applies theme color and variant to base theme
this.myCustomTheme = getCustomTheme(
ChartThemeColor.default,
this.themeProps
);
}
```ts file = "ChartTooltipLeftAligned.tsx"

render() {
return (
<div style={{ height: '250px', width: '600px' }}>
<Chart
ariaDesc="Average number of pets - possibly more information to summarize the data in the chart."
ariaTitle="Left aligned example chart title"
containerComponent={<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea voronoiDimension="x"/>}
legendData={[{ name: 'Cats' }, { name: 'Dogs', symbol: { type: 'dash' } }, { name: 'Birds' }, { name: 'Mice' }]}
legendOrientation="vertical"
legendPosition="right"
height={250}
maxDomain={{y: 10}}
minDomain={{y: 0}}
name="chart8"
padding={{
bottom: 50,
left: 50,
right: 200, // Adjusted to accommodate legend
top: 50
}}
theme={this.myCustomTheme}
width={600}
>
<ChartAxis tickValues={[2, 3, 4]} />
<ChartAxis dependentAxis showGrid tickValues={[2, 5, 8]} />
<ChartGroup>
<ChartLine
data={[
{ name: 'Cats', x: '2015', y: 1 },
{ name: 'Cats', x: '2016', y: 2 },
{ name: 'Cats', x: '2017', y: 5 },
{ name: 'Cats', x: '2018', y: 3 }
]}
/>
<ChartLine
data={[
{ name: 'Dogs', x: '2015', y: 2 },
{ name: 'Dogs', x: '2016', y: 1 },
{ name: 'Dogs', x: '2017', y: 7 },
{ name: 'Dogs', x: '2018', y: 4 }
]}
style={{
data: {
strokeDasharray: '3,3'
}
}}
/>
<ChartLine
data={[
{ name: 'Birds', x: '2015', y: 3 },
{ name: 'Birds', x: '2016', y: 4 },
{ name: 'Birds', x: '2017', y: 9 },
{ name: 'Birds', x: '2018', y: 5 }
]}
/>
<ChartLine
data={[
{ name: 'Mice', x: '2015', y: 3 },
{ name: 'Mice', x: '2016', y: 3 },
{ name: 'Mice', x: '2017', y: 8 },
{ name: 'Mice', x: '2018', y: 7 }
]}
/>
</ChartGroup>
</Chart>
</div>
);
}
}
```

### CSS overflow

This demonstrates an alternate way of applying tooltips using CSS overflow instead of <code>constrainToVisibleArea</code>.

```js
import { ChartArea, ChartGroup, ChartLabel, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory';

// Workaround for documentation-framework issue https://github.com/patternfly/patternfly-react/issues/11455
const sheet = (() => {
var style = document.createElement("style");
document.head.appendChild(style);
return style.sheet;
})();

sheet.insertRule(".ws-react-charts-tooltip-overflow { margin-left: 50px; margin-top: 50px; height: 135px; }", sheet.cssRules.length);
sheet.insertRule(".ws-react-charts-tooltip-overflow svg { overflow: visible; }", sheet.cssRules.length);

<div className="ws-react-charts-tooltip-overflow">
<div style={{ height: '100px', width: '400px' }}>
<ChartGroup
ariaDesc="Average number of pets - possibly more information to summarize the data in the chart."
ariaTitle="CSS overflow example chart title"
containerComponent={<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} />}
height={100}
maxDomain={{y: 9}}
name="chart9"
padding={0}
themeColor={ChartThemeColor.green}
width={400}
>
<ChartArea
data={[
{ name: 'Cats', x: '2015', y: 3 },
{ name: 'Cats', x: '2016', y: 4 },
{ name: 'Cats', x: '2017', y: 8 },
{ name: 'Cats', x: '2018', y: 6 }
]}
/>
<ChartLabel text="CPU utilization" dy={120}/>
</ChartGroup>
</div>
</div>
```ts file = "ChartTooltipCssOverflow.tsx"

```

### Wrapped chart

This demonstrates an alternate way of applying tooltips by wrapping charts with the Tooltip component.

```js
import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts/victory';
import { Button, Tooltip, TooltipPosition } from '@patternfly/react-core';
```ts file = "ChartTooltipWrappedChart.tsx"

class TooltipChart extends React.Component {
constructor(props) {
super(props);
this.state = {
isVisible: false
};
this.showTooltip = () => {
this.setState({ isVisible: !this.state.isVisible });
};
}

render() {
const { isVisible } = this.state;

return (
<div>
<div style={{ height: '230px', width: '230px' }}>
<Tooltip content={<div>My custom tooltip</div>} isVisible={isVisible} position={TooltipPosition.right} trigger="manual">
<ChartDonutThreshold
allowTooltip={false}
ariaDesc="Storage capacity - possibly more information to summarize the data in the chart."
ariaTitle="Wrapped example chart title"
data={[{ x: 'Warning at 60%', y: 60 }, { x: 'Danger at 90%', y: 90 }]}
labels={() => null}
name="chart10"
>
<ChartDonutUtilization
allowTooltip={false}
data={{ x: 'Storage capacity', y: 45 }}
labels={() => null}
subTitle="of 100 GBps"
title="45%"
/>
</ChartDonutThreshold>
</Tooltip>
</div>
<div style={{ width: '230px', textAlign: 'center' }}>
<Button onClick={this.showTooltip}>Show Tooltip</Button>
</div>
</div>
);
}
}
```

## Documentation
Expand Down
Loading
Loading