# 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. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/highlight/highlight-color/source.txt) ### Property Compatibility by Series Type The [`highlight`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#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`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/serieshighlight#color) | ✅ Yes | ❌ No | ❌ No | ❌ No | ❌ No | | [`border`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/serieshighlight#border) | ✅ Yes | ✅ Yes | ✅ Yes | ❌ No | ❌ No | | [`line`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/serieshighlight#line) | ❌ No | ❌ No | ✅ Yes | ❌ No | ❌ No | | [`opacity`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/serieshighlight#opacity) | ✅ Yes | ✅ Yes | ❌ No | ❌ No | ❌ No | | [`markers`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/serieshighlight#markers) | ❌ No | ❌ No | ❌ No | ✅ Yes | ❌ No | | [`inactiveOpacity`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/serieshighlight#inactiveOpacity), [`visible`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/serieshighlight#visible), [`toggle`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/serieshighlight#toggle), [`visual`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/serieshighlight#visual) | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Yes | > note Although `color` is not supported for Bar/Column via the `highlight.color` property, you can still change the appearance using a custom `toggle` or `visual` implementation. See more in the [Customizing the Toggle Function](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/series-highlight#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. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/highlight/appearance/source.txt) ### For All Series To apply the highlight settings to all series, use the [kendo-chart-series-defaults](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesdefaultscomponent) component. The following example demonstrates how to set the highlight color for all series in the Chart. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/highlight/appearance-all/source.txt) ## Disabling the Highlight To disable the highlight for a series item, set [`visible`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/serieshighlight#visible) to `false`. The following example demonstrates how to disable the highlight for a specific series. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/highlight/disable/source.txt) ## 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`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/serieshighlight#inactiveOpacity). To set the inactive opacity for all series, use the [kendo-chart-series-defaults](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesdefaultscomponent) component. The following example demonstrates how to set the inactive opacity for all series in the Chart. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/highlight/inactive-opacity/source.txt) ## Toggling the Highlight With Code To toggle the highlight of a series point, call the [`toggleHighlight`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#togglehighlight) function. In the following example, the filter callback is evaluated for each data point. If the function returns `true`, the point is highlighted. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/highlight/api/source.txt) ## Customizing the Toggle Function To override the default highlight behavior, define a [`toggle`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/serieshighlight#toggle) event handler. The function is executed both when displaying and hiding the highlight as indicated by the [`show`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/highlighttoggleargs#show) event argument. To disable the default highlight behavior, call the [`preventDefault`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/highlighttoggleargs#preventDefault) function. The following example demonstrates how to override the default highlight effect for the Column series. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/highlight/toggle/source.txt) 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. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/highlight/highlight-toggle-color/source.txt) ## Customizing the Highlight Visual To draw a custom highlight overlay, define a [`visual`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/serieshighlight#visual) function. The function is expected to return a [drawing element](https://www.telerik.com/kendo-angular-ui-develop/components/drawing) 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. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/highlight/visual/source.txt) ## Support and Learning Resources * [Chart Series Highlight Homepage](https://www.telerik.com/kendo-angular-ui/charts#series-highlight) * [Getting Started with the Kendo UI for Angular Chart](https://www.telerik.com/kendo-angular-ui-develop/components/charts/installation/getting-started) * [API Reference of the Chart](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api) * [Axes](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/axes) * [Chart Area](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/chart-area) * [Crosshairs](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/crosshairs) * [Error Bars](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/crosshairs) * [Labels](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/labels) * [Legend](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/legend) * [Notes](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/notes) * [Panes](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/panes) * [Plot Area](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/plot-area) * [Plot Bands](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/plot-bands) * [Selection](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/selection) * [Series](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/series) * [Title](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/title) * [Getting Started with Kendo UI for Angular (Online Guide)](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started) * [Chart Forum](https://www.telerik.com/forums/kendo-angular-ui?tagId=256) * [Before You Start: All Things Angular (Telerik Blog Post)](https://www.telerik.com/blogs/all-things-angular) * [Knowledge Base](https://www.telerik.com/kendo-angular-ui-develop/components/knowledge-base) ## Additional Resources * [Angular Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-angular) * [Angular Videos](https://www.telerik.com/videos/kendo-angular-ui) * [Kendo UI for Angular Roadmap](https://www.telerik.com/support/whats-new/kendo-angular-ui/roadmap)