airbnb / visx

🐯 visx | visualization components
https://airbnb.io/visx
MIT License
19.4k stars 712 forks source link

Synchronize XYCharts of different sizes #1843

Open lorenzopicoli opened 4 months ago

lorenzopicoli commented 4 months ago

Thank you for this library, it's been incredibly helpful! I've been working on resizable charts and aiming to synchronize them all. However, I've encountered some challenges

I modified the synchronized charts example from #1646 to demonstrate that when the charts have different widths, the crosshair doesn't adjust for it.

Here's the example

I expected the crosshair to move faster in the wider chart, so if my mouse is at the end of the smaller chart, it should be at the end of the bigger one, and the same for the start of the chart. The behavior I see is that if I hover the mouse on the later half of the wider chart, nothing shows up in the smaller charts

After looking into the code, I discovered that the event emitter simply looks for nearby data points by examining the SVG point. I think it's possible to make it consider different-sized charts and correctly map to a relative point in the current chart. Was this something intentionally overlooked? Are the maintainers open to changing it? I'm willing to explore this further and open a pull request once I'm more familiar with the codebase.