techniq
LineChart, BarChart, PieChart, etc. Tooltips are unusable on mobile
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
https://github.com/huntabyte/shadcn-svelte/issues/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.
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.
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!