Skip to content

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.
page Apage Bpage Cpage Dpage E02040page Apage Bpage Cpage Dpage E02040
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'
}}
page Apage Bpage Cpage Dpage E0510152025
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.

012345678910−1.0−0.50.00.51.01.52.02.5
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.
19901992199419961998200020022004200620082010201220142016201825,00030,00035,00040,00045,00050,000
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>