Angular 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:

• Hovering a bar segment will highlight it. The other segments in that series are partially dimmed.
• Hovering a bar segment in one series will dim the other series.
• Hovering a legend item will dim the other series.

Highlighting is enabled by default. Use highlight.enabled = false on each series to disable.

Bring to Front Copy Link

By default, the highlighted series is brought to the front to make it stand out, especially when multiple series overlap.

The bringToFront property is enabled by default, and can be disabled in the highlight options if the default rendering order should be preserved.

{
    highlight: {
        bringToFront: false,
    },
}

In the above example:

• By default, hovering any series in the chart or legend will render it above all the other series.
• This behaviour can be toggled using the buttons to see the difference when bringToFront is disabled.

Customisation Copy Link

The highlight styles of each series can be customised with the highlight options.

{
    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 example:

• The hovered marker is highlighted using the highlightedItem configuration. This changes the fill to yellow, the stroke to gold, and the strokeWidth to 2.
• The non-hovered markers within the hovered series are styled using the unhighlightedItem configuration. This changes the fill 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.

Stylers Copy Link

All Styler callbacks receive a param.highlightState property which can be used to dynamically customise the chart style based on the highlighted state.

{
    label: {
        itemStyler: (params) => {
            switch (params.highlightState) {
                case 'highlighted-series':
                    return { fontSize: 10 };
                case 'unhighlighted-item':
                    return { color: 'lightgray' };
                case 'highlighted-item':
                    return { fontWeight: 'bold' };
                default:
                    return { color: 'transparent' };
            }
        },
    },
}

In this example:

• The labels are hidden and only shown for the highlighted series.
• The label of the currently highlighted item is rendered in bold.

The highlightState parameter can have the following values:

• 'highlighted-item': The specific item is highlighted
• 'unhighlighted-item': Another item is highlighted, but not this one
• 'highlighted-series': The series containing this item is highlighted
• 'unhighlighted-series': Another series is highlighted, but not this one
• 'none': No highlighting is currently active

API Reference Copy Link

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