XYChart detect bar hover

[ianoc90]

Having trouble detecting hover events on a single bar for a <BarSeries /> component.

Use Case
I want to change the colour of a bar when hovering over a bar chart item.

Approach
There doesn't seem to be an onPointerOver or similar in the barseries docs so I've tried a couple of approaches:

onPointerMove
Having even a simple onPointerMove event seems to degrade the performance of the chart significantly, (at least within codesandbox), and it makes it tricky to nail down when the pointer exits a bar chart.

pure css
(Using emotion styles in the example). Something like:

        .visx-bar {
          fill: green;

          &:hover {
            fill: black;
          }
        }

Sets the correct color on the bar originally, but there is a <rect> that draws over the bars that doesn't allow pointer events on the bar.

Setting pointer-events to none will break the tooltip here as well.

Code sandbox link

Thanks in advance

[williaster]

Hey @ianoc90 👋 thanks for checking out visx. Sorry this isn't super straight forward. But here are a couple options for you. The first is to use the BarSeries colorAccessor prop in combination with onPointerMove/Out. This may not be the most performant, but it works fine for me if dev tools is closed (perf gets worse when it's open)

Sandbox

An alternative would be the :hover pseudo selector you mentioned. As you noted, by default a rect is rendered to intercept and handle all mouse events for the XYChart. This generally is best out of the box as it handles all series types (e.g., lines and areas that your mouse may not be directly over; it finds the nearest point relative to your pointer). So if you'd like to use :hover, you'd have to set captureMouseEvents={false} on the chart, and handle pointer events yourself. Here's an example, it's a bit more complex, and I'd note that the tooltip UX is worse because you have to be exactly over a bar to trigger the tooltip (hence why I removed the padding between bars).

Sandbox

[ianoc90]

Amazing.. thanks @williaster. Went with option 1 & I think that seemed to do the job for now.

[yeegor-restrata]

Hi @williaster, thank you for your help! Is it possible to create an interactive primitive within XYChart with any of these approaches?

Say, have XYChart -> Group -> GlyphCircle, so that XYChart tracks events related to the chart itself, and GlyphCircle is clickable and interactive too, with cursor: pointer applied to it.

I was looking for an API in XYChart to render something onto the XYChart's rect that tracks events, but that does not seem possible without access to the XYChart internal logic to reorder children (which my application does not have). I have even tried rewriting XYChart (well, copying it from @visx GH), but it doesn't work - probably my bundling system breaks some context references!

I feel like I am missing something, could you please push me towards the right direction? 😰