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

Series Highlight

Series and individual points are highlighted when hovered or tapped.

You can customize or disable the highlight effect by using configuration settings.

Customizing the 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:

Disabling the Highlight

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

Example
View Source
Edit In Stackblitz  
Change Theme:

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

Toggling the 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:

Customizing the 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.

To disable the default highlight behavior, call the preventDefault function.

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

Example
View Source
Edit In Stackblitz  
Change Theme:

Customizing the Highlight Visual

To draw a custom highlight overlay, define a visual function. The function is expected to 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 the Area series.

Example
View Source
Edit In Stackblitz  
Change Theme: