BarStack hover effect

[LoiKos]

Hi,

I was building a simple BarStack, but when i tried to add some features i get stuck. So the bar stack is the following:

As a first iteration it's perfectly fine and do it's job. But after failing to implement some additional features, i feel i was missing something.

1)° First, i wanted to provide a simple hover effect on BarSeries:

Enregistrement.de.l.ecran.2022-10-26.a.11.36.55.mov

It work but it's not really what i expected to do. Hover highlight specific BarSeries in the stack when i originally tried to highlight the whole "BarStackSeries" and i realize that i have no way to know which

<rect class="visx-bar" ....></rect>

are part of a single "Bar" with an index or id for example. Did i miss something here ? Have you a way to achieve this ? I tried to add an id or data-test attribute to <BarSeries/> but i didn't work.

2)° But the real effect i really like to provide i more than just hover. in fact i wish i could provide the same as this bump chart from nivo.

Having a whole Bar highlighted in comparison with the other but only on when user hover it.

Have you already build something like this using visx ? Have you some examples using BarChart or LineChart ? if not have you some insight to give me to be able to create this ?

[Brookelyn]

Hey @LoiKos!

I'm sure you've already found a solution for this, but wanted to share an example of how I solved this in case it's helpful for anyone else: you can see everything in this CodeSandbox.

When passing data to your BarStack, it returns an array of barStacks. EachbarStack contains the info for a single series, which in this case can be found in barStack.bars. These data points will usually correspond to your original data, so the data at the 0 index in bars for a given series will match the values in data[0], which means you can use the index of a given bar to pass a selected index to your tooltipData, and then change the styling.

[LoiKos]

Hey @Brookelyn
Really nice !
I haven't dig into this more as it was a "nice to have" but not crucial feature.
I may switch to building my own BarStack (like you did) when i get some times but at the moment i still use XYChart and BarStack and BarSeries from '@visx/xychart'.

[Brookelyn]

Ah, I didn't realise you were using the XYChart!

I've not used that much as I need more flexibility than I've found is available with it. But, you made me curious as to how I could get it working for an XYChart, especially as the xy version doesn't expose the data in the same way as the non-xy version of BarStack. 🙂

You can check it out here if you fancy.

[LoiKos]

Sorry i totally missed your comment. Looks awesome :). I'll try to add this to my project when i find some times. Thanks !

[carleryd]

Very late to the party but I had the exact same issue as OP and this solution didn't quite solve the problem.
What I need is to track the segment being hovered, not individual bars, but that does not seem possible when using AnimatedBarStack as it isn't able to pass events down to the child AnimatedBarSeries and only there can you identify which segment is being hovered.

So I'm postponing this problem to another time, would love to hear if anyone managed to solve this!