visx
visx copied to clipboard
[xychart]: Is there support for multiple Y points on a single X point?
I'm using the XYChart, which seems really nice except for a slight edge case I have.
Using a time scale for the X axis, if a single date has multiple entries they show on the chart but both the tooltips and curve break. You can see the issue with the curve here:
Is it just simply not supported? My assumption is separate times may fix it so going to try that as a workaround.
Update:
The same points but with time separated out (by 5 hours) is a little less broken looking but still not ideal.
Update:
Okay so I've experimented with the different curves and curveMonotoneX
fixes that. So it's just the timestamp that is not correct now.
Hey @ShaneHudson thanks for checking out xychart
. I think the issue is the curve
type as it looks like you figured out. This determines how lines should be drawn / extrapolated between points. In case others come across this I created a sandbox here. This works okay for 2 points, but beyond that (as in your images) it seems like there's no guarantee that the line between two points wouldn't overlap the other lines with the same x-value unless you sorted points with shared x-values by their y-value.

Let's leave this issue open as looks like the tooltip logic doesn't quite handle multiple points correctly, as you can see in the demo (left of the point picks the top point, right of the point picks the bottom point). For LineSeries
, Tooltip logic currently is based on the nearest x- value, without considering the nearest y-value which should be the tie breaker if multiple points have equal x-distance. This should be pretty easy to fix.
I'm unsure if it is the same issue or separate... but I've noticed tooltips also break (shows for max and min but none in the middle) if you have the dates sorted backwards.
Would it be possible to leverage findNearestDatumXY
to address this? As far as I can understand, using voronoi-based indexing would avoid the issue above but won't be able to snap tooltip to x and/or y datums if the point is too far away?
I'm trying to take a look at how we can update findNearestDatumSingleDimension
to fix but I'm not sure where to start. Any ideas?
I'm unsure if it is the same issue or separate... but I've noticed tooltips also break (shows for max and min but none in the middle) if you have the dates sorted backwards.
~~@ShaneHudson Did you ever find a workaround for this?~~
Figured it out. https://stackoverflow.com/a/68816042/7426138