patternfly / patternfly/patternfly-react

getInteractiveLegendEvents onLegendClick not called with ChartBar in ChartStack + ChartAxis

Open
#12,263 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Stale
Dominant language
TypeScript
Stars
862
Forks
392
Avg merge
4d 8h
Merged PRs (30d)
9

Description

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
  1. Create a Chart with ChartAxis, ChartBar inside a ChartStack, and a ChartLegend
  2. Pass getInteractiveLegendEvents({ chartNames, legendName, onLegendClick }) to Chart's events prop
  3. Click a legend item
  4. 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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with getInteractiveLegendEvents and the Chart event-dispatch path used by ChartBar, ChartStack or ChartGroup, and ChartAxis. Reproduce the minimal example, compare it with the working ChartArea and unwrapped ChartBar cases, then verify that onLegendClick fires for both wrapper types with ChartAxis present.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.