Javascript ChartsSeries Highlighting

ReactAngularVueJavascript

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

highlightStyle: {
    // Attributes that apply to individual items within a single series.
    item: {
      fill: 'red',
      stroke: 'maroon',
      strokeWidth: 4,
    },
    // Attributes that apply to the entire series containing the highlighted item.
    series: {
        dimOpacity: 0.2, // series opacity when dimmed (while another series is hovered)
        strokeWidth: 2
    }
}

In this configuration, the highlight style of the hovered item is customised, and both the series highlighting and series dimming options are enabled.

Note the following when a bar segment is hovered:

• The hovered item is highlighted using the highlightStyle.item configuration. This changes the fill to red, and the stroke to maroon with a strokeWidth of 4.
• The other segments from the highlighted series are highlighted using the highlightStyle.series.strokeWidth configuration and have a strokeWidth of 2.
• All segments belonging to the other series are dimmed with an applied opacity of 0.2.
• When a legend item is hovered, the hovered series shows the strokeWidth of 2, and the other series are dimmed. No individual item is highlighted as none are hovered.

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

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

API Reference