Skip to content

Tooltip event type and shared prop

Pavel Vaněček edited this page Jul 28, 2024 · 2 revisions

Recharts' Tooltip has two behaviours: axis and item.

axis means that when one hovers over a chart, the Tooltip will gather all data from a given axis, and show them all. So for example if there are multiple lines, Tooltip will show data from them all. See this example: https://master--63da8268a0da9970db6992aa.chromatic.com/?path=/story/examples-linechart--simple

item means that when hovering over a chart, the Tooltip only shows the one item directly under the mouse. This is what Scatter is doing; see for example here: https://master--63da8268a0da9970db6992aa.chromatic.com/?path=/story/examples-scatterchart--joint-line and note how hovering over one item always only shows the one and ignores whatever is on the axis below and above.

Some charts allow for both behaviours; this is controlled by the prop shared on Tooltip. Unfortunately that's not documented on the API site! But it is here on the storybook: https://master--63da8268a0da9970db6992aa.chromatic.com/?path=/docs/api-component-tooltip--docs.

With shared prop undefined, chart uses the default mode. By setting shared={false} the chart is advised to switch from axis to item mode. (And, theoretically, by setting shared=true it would be advised to switch from item to axis mode - but there is no such chart combination so that doesn't do anything).

Now charts have an opinion on what they allow. What are the supported tooltip modes?

Chart Item tooltip mode Axis tooltip mode
AreaChart ❌ No ✅ Yes
BarChart ✅ Yes ✅ Yes (default)
LineChart ❌ No ✅ Yes
ComposedChart ❌ No ✅ Yes
PieChart ✅ Yes ❌ No
RadarChart ❌ No ✅ Yes
RadialBarChart ✅ Yes ✅ Yes (default)
ScatterChart ✅ Yes ❌ No
FunnelChart ✅ Yes ❌ No
Treemap ❌ No ✅ Yes
SankeyChart ❌ No ✅ Yes
SunburstChart ✅ Yes ❌ No
Clone this wiki locally