onClick events for XYChart

[maximerivolet]

Hi,

I need the "onClick" event option on XYChart.

Currently on my page, I have a barChart, using the "Bar" from @Visx/Shape, and a pie chart, using "Pie", from @Visx/Shape.

For both of them, I can manage the "onClick" events. But for XYChart, the option is not available.

Do you have any advice to use this on XYCharts ?

Regards,

[maximerivolet]

It seems that "onPointerUp" can allow us to do that. I did it on a BarSeries. But I have an issue to do that for BarStack.

[maximerivolet]

Hello,

I tried a bit more to use onPointerUp on BarStack, without success. I also tried onPointerMove and onPointerOut, both of them don't work.

My structure is as below :

          <BarStack>
            {listSigles.map((sigle, i) => {
              return (
                <BarSeries
                  key={`${sigle}-${i}`}
                  dataKey={sigle}
                  data={isRange && renderVertically ? dataAgeRange : dataAge}
                  xAccessor={(data) =>
                    renderVertically ? data.age : axisLeft ? data.groups[sigle].length : -data.groups[sigle].length
                  }
                  yAccessor={(data) => (renderVertically ? data.groups[sigle].length : data.age)}
                  colorAccessor={() => getGroupColor(sigle, groups)}
                  onPointerUp={() => console.log("test")}
                  onPointerMove={() => console.log("test")}
                  onPointerOut={() => console.log("test")}
                />
              )
            })}
          </BarStack>

As mentioned, it works on a simple BarSeries or AnimatedBarSeries, like this one :

      <AnimatedBarSeries
        dataKey={dataKey}
        data={data}
        xAccessor={(data: Chart.AgeData) => data.total}
        yAccessor={(data: Chart.AgeData) => data.age}
        colorAccessor={() => color}
        onPointerUp={() => handleClick(age)}
      />

[maximerivolet]

Hello, any advice on this one @williaster ?

[mariusflorescu]

hey, can confirm that this is happening. no events are being triggered by clicking on any bar series from the bar stack.

[SantiPineda2000]

Possible solution

Hey @mariusflorescu @maximerivolet I achieved to handle events in the XYChart component, but instead of defining them on the <BarStack> or <BarSeries> components you have to define them in the <XYChart> one like the following:

<XYChart onPointerUp={() => console.log("Pointer up")} onPointerDown={() => console.log("Pointer down")} onPointerMove={() => console.log("Pointer Move")} >
{/* Your code here */}
  <BarStack>
    {listSigles.map((sigle, i) => {
      return (
        <BarSeries
          key={`${sigle}-${I}`}
          dataKey={sigle}
          data={isRange && renderVertically ? dataAgeRange : dataAge}
          xAccessor={(data) =>
            renderVertically ? data.age : axisLeft ? data.groups[sigle].length : -data.groups[sigle].length
          }
          yAccessor={(data) => (renderVertically ? data.groups[sigle].length : data.age)}
          colorAccessor={() => getGroupColor(sigle, groups)}
          {/* Remove these lines
          onPointerUp={() => console.log("test")}
          onPointerMove={() => console.log("test")}
          onPointerOut={() => console.log("test")} */}
        />
      )
    })}
  </BarStack>
</XYChart>

Check the documentation here