Charts - Highlighting

Highlighting data offers quick visual feedback for chart users.

It can be used to emphasize a specific data point or series, or to fade out the rest of the chart. And it can be controlled by the user or synchronized across multiple charts.

Highlighting

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'
}}

Highlighting series

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

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

• highlighted 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.

Controlled highlight

The highlight can be controlled by the user when they set highlightedItem and onHighlightChange.

You can set the highlightedItem value based on inputs, and sync it when the user hover over an item themselves.

Synchronizing highlights

Having a controlled highlight allows you to control it in multiple charts at the same time. You need to ensure that the series has the same ids and the data is in the same order.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <ChartsAxisHighlight />