ChartLegendInteractivePieChart.tsx

import {
  Chart,
  ChartLegend,
  ChartThemeColor,
  ChartPie,
  getInteractiveLegendEvents,
  getInteractiveLegendItemStyles
} from '@patternfly/react-charts/victory';

export const ChartLegendInteractivePieChart: React.FunctionComponent = () => {
  const [hiddenSeries, setHiddenSeries] = React.useState<Set<number>>(new Set());

  const 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
  const getChartNames = () => {
    const result = [];
    series.map((_, _index) => {
      // Provide names for each series hidden / shown -- use the same name for a pie chart
      result.push(['pie']);
    });
    return result;
  };

  // Returns legend data styled per hiddenSeries
  const getLegendData = () =>
    series.map((s, index) => ({
      ...s.legendItem, // name property
      ...getInteractiveLegendItemStyles(hiddenSeries.has(index)) // hidden styles
    }));

  // Hide each data series individually
  const handleLegendClick = (props: { index: number }) => {
    const newHiddenSeries = new Set(hiddenSeries);
    if (newHiddenSeries.delete(props.index)) {
      newHiddenSeries.add(props.index);
    }
    setHiddenSeries(newHiddenSeries);
  };

  // Returns true if data series is hidden
  const isHidden = (index: number) => hiddenSeries.has(index);
  // Returns onMouseOver, onMouseOut, and onClick events for the interactive legend
  const getEvents = () =>
    getInteractiveLegendEvents({
      chartNames: getChartNames(),
      isHidden,
      legendName: 'chart6-ChartLegend',
      onLegendClick: handleLegendClick
    });

  const data = [];
  series.map((s, index) => {
    data.push(!hiddenSeries.has(index) ? s.datapoints : { y: null });
  });

  return (
    <div style={{ height: '275px', width: '300px' }}>
      <Chart
        ariaDesc="Average number of pets"
        ariaTitle="Pie chart example"
        events={getEvents()}
        height={275}
        legendComponent={<ChartLegend name={'chart6-ChartLegend'} data={getLegendData()} />}
        legendPosition="bottom"
        name="chart6"
        padding={{
          bottom: 65,
          left: 20,
          right: 20,
          top: 20
        }}
        showAxis={false}
        themeColor={ChartThemeColor.multiUnordered}
        width={300}
      >
        <ChartPie constrainToVisibleArea data={data} labels={({ datum }) => `${datum.x}: ${datum.y}`} name="pie" />
      </Chart>
    </div>
  );
};