Charts - Tooltip

Tooltip provides extra data on charts item.

In all charts components, you can pass props to the tooltip by using tooltip={{...}}. If you are using composition, you can add the <Tooltip /> component and pass props directly.

Interactions

The tooltip can be triggered by two kinds of events:

'item'—when the user's mouse hovers over an item on the chart, the tooltip will display data about this specific item.
'axis'—the user's mouse position is associated with a value of the x-axis. The tooltip will display data about all series at this specific x value.

<Stack direction={{ xs: 'column', md: 'row' }}>
  <BarChart {...barChartsParams} tooltip={{ trigger: 'axis' }} />
  <BarChart {...barChartsParams} tooltip={{ trigger: 'item' }} />
</Stack>

<Stack direction={{ xs: 'column', md: 'row' }}>
  <BarChart {...barChartsParams} tooltip={{ trigger: 'axis' }} />
  <BarChart {...barChartsParams} tooltip={{ trigger: 'item' }} />
</Stack>

Press Enter to start editing

Highlights

Highlighting axis

You can highlight data based on mouse position. By default, those highlights are lines, but it can also be a vertical band if your x-axis use scaleType: 'band'.

On the chart, to customize this behavior, you can use:

highlight={{
  x: 'line', // Or 'none', or 'band'
  y: 'line', // Or 'none'
}}

<Stack direction={{ xs: 'column', md: 'row' }}>
  <BarChart {...barChartsParams} highlight={{ x: 'band' }} />
</Stack>

<Stack direction={{ xs: 'column', md: 'row' }}>
  <BarChart {...barChartsParams} highlight={{ x: 'band' }} />
</Stack>

Press Enter to start editing

Highlighting series 🚧

When the tooltip is highlighting elements, their style can be modified, and the style of other elements can be fade-out.

This is under construction, and requires some management to avoid ending up with a blinking Christmas tree.

Here is a demo of what it could be but needing much more work.

<LineChart {...lineChartsParams} tooltip={{ trigger: 'axis' }} />

<LineChart {...lineChartsParams} tooltip={{ trigger: 'axis' }} />

Press Enter to start editing

Customization

The format of data rendered in the tooltip can be modified thanks to the series valueFormatter property. The same can be applied to x values when a tooltip is triggered by the 'axis'.

Here is a demo with:

Time axis formatted to only show the year
Number values formatted in U.S. Dollar.

<LineChart
  {...lineChartsParams}
  xAxis={[{ data: years, scaleType: 'time', valueFormatter: yearFormater }]}
  series={lineChartsParams.series.map((s) => ({
    ...s,
    valueFormatter: currencyFormatter,
  }))}
/>

<LineChart
  {...lineChartsParams}
  xAxis={[{ data: years, scaleType: 'time', valueFormatter: yearFormater }]}
  series={lineChartsParams.series.map((s) => ({
    ...s,
    valueFormatter: currencyFormatter,
  }))}
/>

Press Enter to start editing

Composition

If you're using composition, by default the axis will be listening for mouse events to get its current x/y values. If you don't need it, because you don't use highlights, and the tooltip is triggered by an item, you can disable those listeners with the disableAxisListener prop.

<ChartContainer {...} disableAxisListener>
  {/* ... */}
</ChartContainer>