LineChart, BarChart, PieChart, etc. Tooltips are unusable on mobile

[jchen42703]

Problem

On mobile, when users tap on bars/lines on mobile, they need to hold down on the bar/line to see the tooltip. If they hold down for too long, it will begin highlighting the surrounding text and collapse the tooltip. This makes using the graphs on mobile unusable.

I looked through the layerchart docs and was unable to find any examples that had the popover UX on mobile.

Ideal UX

As described in other issues, Tooltips are not intended to be used for mobile. Instead, we should use Popovers.

ReCharts in Shadcn and Unovis implement this behavior natively:

https://ui.shadcn.com/charts/bar#charts

https://unovis.dev/gallery/view?collection=Bar%20Charts&title=Horizontal%20Stacked%20Bar%20Chart%20with%20Tooltip%20and%20Legend

However, it's not clear on how to implement this in layerchart natively or within Svelte Shadcn

Reproduce Issue

Go to these on your phone:

(Shadcn-Svelte uses layerchart)
https://shadcn-svelte.com/charts/bar#charts

https://www.layerchart.com/docs/examples/Columns

What I Tried

huntabyte/shadcn-svelte#1044
Solutions here with a custom PopoverTooltip component didn't render the popover when using it as a tooltip snippet

Desired Solution

A way to default to Popover behavior on mobile.

[techniq]

Hi @jchen42703, thanks for the feedback. This will take some exploration to nail the mobile interactions, but is an area that definitely needs improved.

Switching from pointer event back to mouse/touch helped improve mobile interactions / scrubbing, and in some cases quick taps do work correctly with Line/Area charts from my testing.

BarChart currently uses mode: 'band' which renders invisible <rect> for hit targets which does make event propagation a little tricky. I'm looking to get single-element tooltip triggering working with band scales, but it's a little tricky with inner/outer band padding to nail down.

Investigating the approaches leveraged by Recharts / Unovis will be very helpful. I believe unovis uses d3-selection events which will also take some time to understand.

In short, this needs improved but will take time to identify the correct solution. If you see the technique to leverage, please let me know.

[jchen42703]

I'm not really the right person to be able to improve this 😅 , but for those who want a quick fix:

For each chart, remove the tooltip on mobile and instead render a modal on tooltip click or on bar click. Not the cleanest solution, but it'll temporarily resolve any potential user complaints!

[techniq]

For a temporary solution you might be able to leverage <Chart bind:context> to access context.tooltip externally (example) or <Chart tooltip={{ onclick: ... }} / <AreaChart onTooltipClick={...}> to wire up some improved interactivity on mobile.