In a LineChart, can the tooltip show the values between 2 points (with interpolation)?

[tran-simon]

Hi,

I have a line chart that compares 2 series of data (x is time in seconds, y is the value)

The two series are not perfectly synced, so for example series A might be [{x: 3, y: 10}, {x: 5, y: 15}, {x: 6, y: 20}] and series B [{x: 3, y: 8}, {x: 4, y: 13}, {x: 5, y: 8}]

Currently, when I hover the chart, the tooltip only appears for exact points. So if I hover around x=4, I can see either "Series A: x=3, y=10", "Series A: x=5, y=15" or "Series B: x=4, y=13", but I can't see data from both series at the same time.

I would like to be able to show values from all series at the same point, with interpolation. So when the user hovers x=4, the tooltip would show "x=4. Series A: y=12.5. Series B: y=13"

Is this possible? thanks

[EDIT] Sandbox

[ckifer]

Can you provide more information on your chart or your chart code?

Is your x axis categorial or numerical? (it looks numerical but it might still be acting as categorical)

[ckifer]

Also some examples in the storybook https://github.com/recharts/recharts/blob/master/storybook/stories/Examples/Tooltip.stories.tsx#L178-L234

[tran-simon]

from props.coordinate.x, is there a utility recharts function that could get me the X value on the axis?

[ckifer]

In payload[0].payload you should have something like { x: 4, y2: 13 } which should always be your x axis value in this case. But no there isn't any utility functions

[tran-simon]

Should be good enough for me.

Ideally it would be great to have a way of viewing the interpolated value between 2 real points (with this custom tooltip, we can only view a value if the X exists on one of the data series).

Thanks for your help!

[ckifer]

Sure thing!

Yeah there's a lot I'd like to be able to do such as enable different tooltip modes such as interpolation, single point, etc. it's just too tough to do how the code base is set up currently. Hopefully we'll make some good progress on our refactoring efforts here soon and things should get easier to iterate on!