Vue 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.

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 behavior can be toggled using the buttons to see the difference when bringToFront is disabled.

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.

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.