Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

getInteractiveLegendEvents onLegendClick not called with ChartBar in ChartStack + ChartAxis

Ouverte
#12,263 3 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
55/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
Calme
Stack technique
react, typescript
Domaine
frontend

Piste de recherche

Commencez par getInteractiveLegendEvents et le chemin de distribution des événements de Chart utilisé par ChartBar, ChartStack ou ChartGroup, et ChartAxis. Reproduisez l’exemple minimal, comparez-le aux cas fonctionnels de ChartArea et de ChartBar non encapsulé, puis vérifiez que onLegendClick se déclenche pour les deux types de wrapper lorsque ChartAxis est présent.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

Stale
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

Langage dominant
TypeScript
Étoiles
862
Forks
392
Merge moyen
4 j 8 h
PR mergées (30 j)
9

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de patternfly/patternfly-react

Toutes les issues de patternfly/patternfly-react

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.