Series Highlight
The Chart provides interactive highlighting functionality that visually emphasizes series and data points when users hover over or tap them. This feature enhances the user experience by making data exploration more intuitive and accessible.
The highlight behavior varies by Chart type and can be extensively customized through configuration settings. You can control colors, opacity, borders, and other visual properties, or completely override the default highlighting with custom implementations.
Customizing the Appearance
Different Chart types use different highlight mechanisms for their series—Pie Charts change colors, Line Charts highlight markers, and Bar Charts modify fill appearance.
The following example demonstrates how to set a highlight color for the Pie series.
Property Compatibility by Series Type
The highlight property options are supported differently depending on the series type being used.
See the table below for detailed compatibility information by series type—the last row lists general highlight behaviors that are available for all series types.
| Property | Pie/Donut | Bubble | Candlestick/OHLC | Line/Area/Scatter | Bar/Column |
|---|---|---|---|---|---|
color | ✅ Yes | ❌ No | ❌ No | ❌ No | ❌ No |
border | ✅ Yes | ✅ Yes | ✅ Yes | ❌ No | ❌ No |
line | ❌ No | ❌ No | ✅ Yes | ❌ No | ❌ No |
opacity | ✅ Yes | ✅ Yes | ❌ No | ❌ No | ❌ No |
markers | ❌ No | ❌ No | ❌ No | ✅ Yes | ❌ No |
inactiveOpacity, visible, toggle, visual | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Yes |
Although
coloris not supported for Bar/Column via thehighlight.colorproperty, you can still change the appearance using a customtoggleorvisualimplementation. See more in the Customizing the Toggle Function section.
For a Specific Series
To customize the highlight appearance, assign a configuration object to the highlight attribute on a series item.
The following example demonstrates how to set the highlight options for a specific series.
For All Series
To apply the highlight settings to all series, use the kendo-chart-series-defaults component.
The following example demonstrates how to set the highlight color for all series in the Chart.
Disabling the Highlight
To disable the highlight for a series item, set visible to false.
The following example demonstrates how to disable the highlight for a specific series.
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.
The following example demonstrates how to set the inactive opacity for all series in the Chart.
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.
Since the color property doesn't work with bar and column Charts, you can use the toggle function to programmatically change the highlight color. This approach gives you full control over the visual appearance when bars are highlighted.
The following example demonstrates how to change the highlight color for the Bar 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)
- Chart Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base