how can I pin a tooltip in a chart

[Marg1na1]

I need to be able to click on the stick and the tooltip stops moving and is fixed to its coordinates, and when the cursor moves, other tooltips are shown to me. When you click on the same coordinates to which the tooltip is currently attached, it should unpin.

[ckifer]

This is currently only partially possible. Click and stick is easy enough using the "active" and "defaultIndex" props, but it is impossible to have more than one instance of Tooltip show at once at this point.

https://codesandbox.io/s/l68jc7

[relaxtmeee]

@ckifer
Tow instance of tooltip would solve this problem. Each of them had a different behavior (One reacts to a click, the other to a hover)

[ckifer]

sure, but this doesn't work at the moment because recharts prevents multiple instances of Tooltip. You might be able to get it to work with a custom Tooltip component where you remember the clicked Tooltip's position and always render it there if its set. Otherwise, you render the hovered position as normal.

[relaxtmeee]

@ckifer
It doesn't work as expected, you need to show two tooltips at the same time - clicked (fixed position) and hovered.

I already realized that this cannot be done using reacharts native means.

Thank you for the quick feedback)

[ckifer]

Yep agreed. Just trying to give ideas to unblock.

Labelled as an enhancement and something we'll need to add in the future. If someone wants to contribute feel free.

[ckifer]

https://master--63da8268a0da9970db6992aa.chromatic.com/?path=/story/examples-tooltip--locked-by-click

This does work to "lock" the tooltip though, it just won't show a second instance when hovering

[nicogreenarry]

This feature is important to me as well. Right now I'm considering a non-native workaround, like when the user pins a point, record the coordinates and use non-Recharts code to render a fake tooltip there.

I suspect it would be difficult or impossible to get the manually-rendered "tooltips" to stay in the correct location if the chart is resized, but I can probably live with that.

But I'd much prefer a native solution to this.

Update:
On second thought, there are some UX issues around having multiple tooltips displayed at the same time (e.g. tooltips will obscure data points and will overlap each other), and I no longer think I'd want this feature. I still want a user to be able to pin certain data points, but I'd prefer to display those pinned data points in a grid or table adjacent to the chart.

[PavelVanecek]

In 3.x we will allow multiple Tooltip instances so that should help.

…

On Wed, Apr 17, 2024, 05:56 Nico Greenarry ***@***.***> wrote: This feature is important to me as well. Right now I'm considering a non-native workaround, like when the user pins a point, record the coordinates and use non-Recharts code to render a fake tooltip there. I suspect it would be difficult or impossible to get the manually-rendered "tooltips" to stay in the correct location if the chart is resized, but I can probably live with that. But I'd *much* prefer a native solution to this. — Reply to this email directly, view it on GitHub <#4387 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAIMTCUIB5QWRYTJ4QDRXULY5WGBTAVCNFSM6AAAAABFXEBIMSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANJZHEYDSOJUHE> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>