React ChartsSeries Highlighting

Highlighting the hovered data item or series allows for easier differentiation, especially in charts with many series and data points.

In the above example:

• The hovered item - in this case the marker - is highlighted.
• The series containing the hovered item is also highlighted.
• All other series are dimmed.

By default, only item highlighting is activated. The above example has custom configuration applied, as detailed below.

Customisation Copy Link

highlight: {
    // Attributes that apply to the currently highlighted item.
    highlightedItem: {
        fill: 'yellow',
        stroke: 'gold',
        strokeWidth: 2,
    },
    // Attributes that apply to the unhighlighted items within the highlighted series.
    unhighlightedItem: {
        fill: 'maroon',
        strokeWidth: 0,
    },
    // Attributes that apply to the entire series containing the highlighted item.
    highlightedSeries: {
        fill: 'red',
        stroke: 'maroon',
        strokeWidth: 2,
    },
    // Attributes that apply to all other series.
    unhighlightedSeries: {
        opacity: 0.2,
    },
}

In this configuration, the highlight style of the markers and series are customised.

Note the following when a marker is highlighted:

• The hovered marker is highlighted using the highlightedItem configuration. This changes the fill to gold, the stroke to yellow, and the strokeWidth to 2.
• The non-hovered markers within the hovered series are styled using the unhighlightedItem configuration. This changes the fill to to maroon, and removes the stroke by setting the strokeWidth to 0.
• The hovered series is highlighted using the highlightedSeries configuration. This changes the fill and stroke to shades of red, with a strokeWidth of 2.
• The non-highlighted series are dimmed with an applied opacity of 0.2 using the unhighlightedSeries configuration.

In the above example we provided the same highlight for all of the series, but the style can be unique to each series.

For simplicity, we provided the highlight once within a chart Theme, rather than repeating it on each series.

API Reference Copy Link

The available options differ between series types. See the Options API for more details.