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 E02040series xseries yseries z
page Apage Bpage Cpage Dpage E02040series xseries yseries z
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:

axisHighlight={{
  x: 'line', // Or 'none', or 'band'
  y: 'line', // Or 'none'
}}
page Apage Bpage Cpage Dpage E0510152025series xseries yseries z

Highlighting series

In parallel with the tooltip, you can highlight/fade elements.

This kind of interaction is controlled by series properties highlightScope which contains two options:

  • higlighted Indicates which item to highlight. Its value can be
    • 'none' Do nothing (default one).
    • 'item' Only highlight the item itself.
    • 'series' Highlight all items of the series.
  • faded Indicates which item to fade (if they are not already highlighted). Its value can be
    • 'none' Do nothing (default one).
    • 'series' Fade all the items of the series.
    • 'global' Fade all the items of the chart.
0123402468ABC

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:

  • The time axis is formatted to only show the year
  • The number values are formatted in U.S. Dollars.
19901992199419961998200020022004200620082010201220142016201825,00030,00035,00040,00045,00050,000French GDP per capitaGerman GDP per capitaUK GDP per capita
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>