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.
To apply the highlight settings to all series, use the kendo-chart-series-defaults component.
Disable 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.
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.
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:
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: