Bug - Charts - Interactive legend

[rebeccaalpert]

Describe the problem
In charts with interactive legends, the mouseover behavior stops working if you have two different data sources hooked up to it that have different property ordering.

How do you reproduce the problem?
You can see the problem here: https://codesandbox.io/p/devbox/blissful-sound-jc6t2y?file=%2Findex.js&workspaceId=ws_XJDbnQ4RTGsaMiqYAaL6TA

Try the legend. It should work. Click the button to change the data out. It should break.

If you copy rawData2 into rawData and change some values to be different, the problem goes away. Clicking also seems to fix the issue.

Expected behavior
I would expect mouseover to work for dynamic data, regardless of order.

Is this issue blocking you?
I guess we can try dropping it or using separate charts for the two data sources for now. Seems sad we can't just use one dynamic chart.

Screenshots
If applicable, add screenshots to help explain the issue.

What is your environment?

• OS: iOS
• Browser Chrome
• Version Version 134.0.6998.119 (Official Build) (arm64)

What is your product and what release date are you targeting?
Digital Roadmap

Any other information?

[dlabrecq]

Don't believe this is a sad chart bug. Your example created events based on a specific dataset, which is ultimately provided to the voronoi container. You then replaced that data, but the container's events are still based on your previous dataset -- you need to recreate the container's events similarly. Either use useEffect to create events with the latest dataset or recreate the voronoi container.

If you were to debug the example, it's easy to see that events are not created with the expected data. Here is a modified example using useEffect to create events later in the React life cycle.

Also note that you can customize shared events. Should the getInteractiveLegendEvents helper function not meet your expectations, please see Victory's documentation to create your own. There are multiple live examples you can play with / edit here https://nearform.com/open-source/victory/docs/api/victory-shared-events -- it's not difficult to create an event.