Horizontal Lines don't render in TimeSeriesChart #535
Description
Have gone down a rabbit hole on this annoying issue.
So turns out if we have a straight horizontal line in recharts, it will not render.
So for instance, if your "pain score" is 3 on week 1 and 3 on week 2, there will not be a line.
I think this is likely quite isolated / minor as so long as a third data point of differing value enters the picture I believe it will resolve, because it would create some curviness.
The problem is essentially that we use a linear gradient as the stroke for the lines. And there is no "bounding box" for the stroke if it is purely horizontal and so a gradient is not even computed.
I have tried a couple things:
- Setting gradientUnits="userSpaceOnUse" messes up the thresholds for line charts with thresholds
- Setting different x1/x2/y1/y2 on the gradient does nothing, at least in chrome. Chrome just skips rendering the gradient entirely.
The final solution recommended for this issue appears to be to randomly "Jitter" the data points a bit so a data point of 3 might acutally be 2.9999 but would render the same. However:
- There is definitely some rounding involved so like 2.999999 doesn't work, I think it's like ~4 decimal places where it matters
- We use the data for the chart for the tooltip etc. so it would display wrong data for the tooltip
Not sure if there is a better solution out there...