datum.x}/>}
mouseFollowTooltips
voronoiDimension="x"
voronoiPadding={50}
/>
);
};
componentDidMount() {
this.observer = getResizeObserver(this.containerRef.current, this.handleResize);
this.handleResize();
}
componentWillUnmount() {
this.observer();
}
// Tips:
// 1. Omitting hidden components will reassign color scale, use null data instead or custom colors
// 2. Set domain or tick axis labels to account for when all data series are hidden
// 3. Omit tooltip for ChartScatter component by checking childName prop
// 4. Omit tooltip when all data series are hidden
// 5. Clone original container to ensure tooltip events are not lost when data series are hidden / shown
render() {
const { hiddenSeries, width } = this.state;
const container = React.cloneElement(
this.cursorVoronoiContainer,
{
disable: !this.isDataAvailable()
}
);
return (
}
legendPosition="bottom-left"
name="chart5"
padding={{
bottom: 75, // Adjusted to accommodate legend
left: 50,
right: 50,
top: 50,
}}
maxDomain={{y: 9}}
themeColor={ChartThemeColor.multiUnordered}
width={width}
>
{this.series.map((s, index) => {
return (
(active ? 5 : 3)}
/>
);
})}
{this.series.map((s, index) => {
return (
);
})}
);
}
}
```
### Interactive legend with pie chart
This demonstrates how to add an interactive legend to a pie chart using events such as `onMouseOver`, `onMouseOut`, and `onClick`.
```js
import React from 'react';
import {
Chart,
ChartLegend,
ChartThemeColor,
ChartPie,
getInteractiveLegendEvents,
getInteractiveLegendItemStyles
} from '@patternfly/react-charts';
class InteractivePieLegendChart extends React.Component {
constructor(props) {
super(props);
this.state = {
hiddenSeries: new Set(),
width: 0
};
this.series = [{
datapoints: { x: 'Cats', y: 35 },
legendItem: { name: 'Cats: 35' }
}, {
datapoints: { x: 'Dogs', y: 55 },
legendItem: { name: 'Dogs: 55' }
}, {
datapoints: { x: 'Birds', y: 10 },
legendItem: { name: 'Birds: 10' }
}];
// Returns groups of chart names associated with each data series
this.getChartNames = () => {
const result = [];
this.series.map((_, index) => {
// Provide names for each series hidden / shown -- use the same name for a pie chart
result.push(['pie']);
});
return result;
};
// Returns onMouseOver, onMouseOut, and onClick events for the interactive legend
this.getEvents = () => getInteractiveLegendEvents({
chartNames: this.getChartNames(),
isHidden: this.isHidden,
legendName: 'chart6-ChartLegend',
onLegendClick: this.handleLegendClick
});
// Returns legend data styled per hiddenSeries
this.getLegendData = () => {
const { hiddenSeries } = this.state;
return this.series.map((s, index) => {
return {
...s.legendItem, // name property
...getInteractiveLegendItemStyles(hiddenSeries.has(index)) // hidden styles
};
});
};
// Hide each data series individually
this.handleLegendClick = (props) => {
if (!this.state.hiddenSeries.delete(props.index)) {
this.state.hiddenSeries.add(props.index);
}
this.setState({ hiddenSeries: new Set(this.state.hiddenSeries) });
};
// Returns true if data series is hidden
this.isHidden = (index) => {
const { hiddenSeries } = this.state; // Skip if already hidden
return hiddenSeries.has(index);
};
};
render() {
const { hiddenSeries, width } = this.state;
const data = [];
this.series.map((s, index) => {
data.push(!hiddenSeries.has(index) ? s.datapoints : { y: null });
});
return (
}
legendPosition="bottom"
name="chart6"
padding={{
bottom: 65,
left: 20,
right: 20,
top: 20
}}
showAxis={false}
themeColor={ChartThemeColor.multiUnordered}
width={300}
>
`${datum.x}: ${datum.y}`}
name="pie"
/>
);
}
}
```
### Legend tooltips
This demonstrates an approach for applying tooltips to a legend using a custom label component. These tooltips are keyboard navigable.
```js
import React from 'react';
import { ChartLabel, ChartLegend, ChartPie, ChartThemeColor } from '@patternfly/react-charts';
import { Tooltip } from '@patternfly/react-core';
class TooltipPieChart extends React.Component {
constructor(props) {
super(props);
// Custom legend label compoenent
this.LegendLabel = ({datum, ...rest}) => (
);
// Custom legend component
this.getLegend = (legendData) => (
}
/>
);
}
render() {
return (
`${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}
/>
);
}
}
```
### Legend links
This demonstrates an approach for applying links to a legend using a custom label component. These links are keyboard navigable.
```js
import React from 'react';
import { Chart, ChartAxis, ChartGroup, ChartLabel, ChartLegend, ChartLine, ChartVoronoiContainer } from '@patternfly/react-charts';
class LegendLinkPieChart extends React.Component {
constructor(props) {
super(props);
// Custom legend label compoenent
this.LegendLabel = ({datum, ...rest}) => (
);
// Custom legend component
this.getLegend = (legendData) => (
}
/>
);
}
render() {
return (
`${datum.name}: ${datum.y}`} constrainToVisibleArea />}
legendComponent={this.getLegend([
{ name: 'Cats' },
{ name: 'Dogs' },
{ name: 'Birds' },
{ name: 'Mice'}
])}
legendData={[{ name: 'Cats' }, { name: 'Dogs', symbol: { type: 'dash' } }, { name: 'Birds' }, { name: 'Mice' }]}
legendPosition="bottom"
height={275}
maxDomain={{y: 10}}
minDomain={{y: 0}}
name="chart8"
padding={{
bottom: 75, // Adjusted to accommodate legend
left: 50,
right: 50,
top: 50
}}
width={450}
>
} />
} />
);
}
}
```
### Legend layout
This demonstrates an approach for applying a different legend layout and styles using a custom label component.
```js
import React from 'react';
import { ChartLabel, ChartLegend, ChartDonut, ChartThemeColor } from '@patternfly/react-charts';
import { Tooltip } from '@patternfly/react-core';
class LegendLayoutPieChart extends React.Component {
constructor(props) {
super(props);
// Custom legend label compoenent
this.LegendLabel = ({values, ...rest}) => (
);
// Custom legend component
this.getLegend = (legendData, values) => (
}
rowGutter={20}
/>
);
}
render() {
return (
`${datum.x}: ${datum.y}`}
legendComponent={this.getLegend([
{ name: 'Cats' },
{ name: 'Dogs' },
{ name: 'Birds' }
], [ 35, 55, 10 ])}
legendOrientation="vertical"
legendPosition="right"
name="chart9"
padding={{
bottom: 20,
left: 20,
right: 140, // Adjusted to accommodate legend
top: 20
}}
subTitle="Pets"
title="100"
themeColor={ChartThemeColor.multiOrdered}
width={375}
/>
);
}
}
```
## Documentation
### Tips
- See Victory's [FAQ](https://formidable.com/open-source/victory/docs/faq)
- `ChartLegend` may be used as a standalone component, instead of using `legendData`
### Note
Currently, the generated documention below is not able to resolve type definitions from Victory imports. For the
components used in the examples above, Victory pass-thru props are also documented here:
- For `Chart` props, see [VictoryChart](https://formidable.com/open-source/victory/docs/victory-chart)
- For `ChartArea` props, see [VictoryArea](https://formidable.com/open-source/victory/docs/victory-area)
- For `ChartAxis` props, see [VictoryAxis](https://formidable.com/open-source/victory/docs/victory-axis)
- For `ChartBar` props, see [VictoryBar](https://formidable.com/open-source/victory/docs/victory-bar)
- For `ChartBullet` props, see [VictoryBar](https://formidable.com/open-source/victory/docs/victory-bar)
- For `ChartDonut` props, see [VictoryPie](https://formidable.com/open-source/victory/docs/victory-pie)
- For `ChartGroup` props, see [VictoryGroup](https://formidable.com/open-source/victory/docs/victory-group)
- For `ChartLabel` props, see [VictoryLabel](https://formidable.com/open-source/victory/docs/victory-label)
- For `ChartLegend` props, see [VictoryLegend](https://formidable.com/open-source/victory/docs/victory-legend)
- For `ChartLine` props, see [VictoryLine](https://formidable.com/open-source/victory/docs/victory-line)
- For `ChartPie` props, see [VictoryPie](https://formidable.com/open-source/victory/docs/victory-pie)
- For `ChartScatter` props, see [VictoryScatter](https://formidable.com/open-source/victory/docs/victory-scatter)
- For `ChartVoronoiContainer` props, see [VictoryVoronoiContainer](https://formidable.com/open-source/victory/docs/victory-voronoi-container)