New to Kendo UI for Angular? Start a free 30-day trial

Series Highlight

Series and individual points are highlighted when hovered or tapped.

The highlight effect can be customized or disabled using configuration settings.

Customizing Appearance

The type of highlight effect varies by series type. For example, bar charts change the fill color and line series draw an overlay over the markers.

To customize the highlight appearance, assign a configuration object to the [highlight] attribute on a series item.

Example
View Source
Edit In Stackblitz  
Change Theme:

To apply the highlight settings to all series, use the kendo-chart-series-defaults component.

Example
View Source
Edit In Stackblitz  
Change Theme:

Disable Highlight

To disable the highlight for a series item, set [visible] to false.

Example
View Source
Edit In Stackblitz  
Change Theme:

Inactive Opacity

By default, the highlight effect is applied only to the hovered (or "active") series. To make the effect more pronounced, the Chart allows to set the opacity of all other series with inactiveOpacity.

To set the inactive opacity for all series, use the kendo-chart-series-defaults component.

Example
View Source
Edit In Stackblitz  
Change Theme:

Toggle Highlight With Code

To toggle the highlight of a series point, call the toggleHighlight function.

In the following example, the filter callback is evaluated for each data point. If the function returns true, the point is highlighted.

Example
View Source
Edit In Stackblitz  
Change Theme:

Custom Toggle Function

To override the default highlight behavior, define a toggle event handler. The function is executed both when displaying and hiding the highlight as indicated by the show event argument.

The default highlight behavior can be disabled by calling preventDefault function.

The following example demonstrates how to override the default highlight effect for Column series:

Example
View Source
Edit In Stackblitz  
Change Theme:

Custom Highlight Visual

To draw a custom highlight overlay, define a visual function. The function should return a drawing element that will be automatically destroyed when the highlight is toggled off.

The following example demonstrates how to draw a highlight overlay for Area series:

Example
View Source
Edit In Stackblitz  
Change Theme: