Description
getInteractiveLegendEvents's onLegendClick callback is never invoked when ChartBar components are wrapped in ChartStack (or ChartGroup) alongside ChartAxis. The same setup with ChartArea instead of ChartBar works correctly.
Steps to reproduce
- Create a
Chart with ChartAxis, ChartBar inside a ChartStack, and a ChartLegend
- Pass
getInteractiveLegendEvents({ chartNames, legendName, onLegendClick }) to Chart's events prop
- Click a legend item
onLegendClick is never called
Minimal reproduction
<Chart
events={getInteractiveLegendEvents({
chartNames: [['bar-0'], ['bar-1'], ['bar-2']],
isHidden,
legendName: 'legend',
onLegendClick: handleLegendClick,
})}
legendComponent={<ChartLegend name="legend" data={legendData} />}
containerComponent={<ChartContainer />}
>
<ChartAxis />
<ChartAxis dependentAxis />
<ChartStack>
<ChartBar name="bar-0" data={data[0]} />
<ChartBar name="bar-1" data={data[1]} />
<ChartBar name="bar-2" data={data[2]} />
</ChartStack>
</Chart>
Full repro: https://github.com/sachaudh/pf-legend-click-repro
What works vs what doesn't
| Setup |
onLegendClick fires? |
| ChartArea + ChartStack + ChartAxis |
Yes |
| ChartBar + ChartAxis (no wrapper) |
Yes |
| ChartBar + ChartStack (no ChartAxis) |
Yes |
| ChartBar + ChartStack + ChartAxis |
No |
| ChartBar + ChartGroup + ChartAxis |
No |
All three ingredients are required to trigger the bug: ChartBar, a ChartStack/ChartGroup wrapper, and ChartAxis.
Workaround
Apply click events directly to ChartLegend's events prop instead of relying on Chart-level event dispatch:
const legendClickEvents = [
{ target: 'data', eventHandlers: { onClick: handleClick } },
{ target: 'labels', eventHandlers: { onClick: handleClick } },
];
<ChartLegend name="legend" data={legendData} events={legendClickEvents} />
Affected version
@patternfly/react-charts v8.4.1, Victory v37.3.6
Jira Issue: PF-3666
Description
getInteractiveLegendEvents'sonLegendClickcallback is never invoked whenChartBarcomponents are wrapped inChartStack(orChartGroup) alongsideChartAxis. The same setup withChartAreainstead ofChartBarworks correctly.Steps to reproduce
ChartwithChartAxis,ChartBarinside aChartStack, and aChartLegendgetInteractiveLegendEvents({ chartNames, legendName, onLegendClick })to Chart'seventsproponLegendClickis never calledMinimal reproduction
Full repro: https://github.com/sachaudh/pf-legend-click-repro
What works vs what doesn't
All three ingredients are required to trigger the bug:
ChartBar, aChartStack/ChartGroupwrapper, andChartAxis.Workaround
Apply click events directly to
ChartLegend'seventsprop instead of relying on Chart-level event dispatch:Affected version
@patternfly/react-chartsv8.4.1, Victory v37.3.6Jira Issue: PF-3666