Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

getInteractiveLegendEvents onLegendClick not called with ChartBar in ChartStack + ChartAxis

Abierto
#12,263 3 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
55/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Comienza con getInteractiveLegendEvents y la ruta de distribución de eventos de Chart utilizada por ChartBar, ChartStack o ChartGroup, y ChartAxis. Reproduce el ejemplo mínimo, compáralo con los casos funcionales de ChartArea y ChartBar sin envolver, y verifica después que onLegendClick se activa para ambos tipos de wrapper cuando ChartAxis está presente.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
862
Forks
392
Merge medio
4 d 8 h
PR fusionados (30 d)
9

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de patternfly/patternfly-react

Todos los issues de patternfly/patternfly-react

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.