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.
For a Specific Series
To customize the highlight appearance, assign a configuration object to the highlight attribute on a series item.
To apply the highlight settings to all series, use the kendo-chart-series-defaults component.
For All Series
Disabling the Highlight
To disable the highlight for a series item, set visible to false.
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.
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.
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.
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.
Support and Learning Resources
- Chart Series Highlight Homepage
- Getting Started with the Kendo UI for Angular Chart
- API Reference of the Chart
- Axes
- Chart Area
- Crosshairs
- Error Bars
- Labels
- Legend
- Notes
- Panes
- Plot Area
- Plot Bands
- Selection
- Series
- Title
- Getting Started with Kendo UI for Angular (Online Guide)
- Getting Started with Kendo UI for Angular (Video Tutorial)
- Video Courses
- Chart Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base