-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Tooltip event type and shared prop
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 |