New to Kendo UI for Angular? Start a free 30-day trial
Chart Events
Updated on Mar 24, 2026
The Chart fires events for user interactions such as clicking, hovering, dragging, zooming, and selecting. Use these events to respond to user actions and update your application state.
The following example demonstrates the most common Chart events. Use the toggle buttons to switch between interaction, selection, and drilldown charts, and observe the events in the log panel.
Change Theme
Theme
Loading ...
Events Reference
The following tables list all available events on the ChartComponent, grouped by category.
Series and Plot Area
| Event | Fires when | Event class |
|---|---|---|
seriesClick | The user clicks a series point. | SeriesClickEvent |
seriesHover | The user hovers over a series point. | SeriesHoverEvent |
seriesOver | The cursor enters a series. | SeriesOverEvent |
seriesLeave | The cursor leaves a series. | SeriesLeaveEvent |
plotAreaClick | The user clicks the plot area. | PlotAreaClickEvent |
plotAreaHover | The user hovers over the plot area. | PlotAreaHoverEvent |
plotAreaLeave | The cursor leaves the plot area. | PlotAreaLeaveEvent |
axisLabelClick | The user clicks an axis label. | AxisLabelClickEvent |
Legend
| Event | Fires when | Event class |
|---|---|---|
legendItemClick | The user clicks a legend item. | LegendItemClickEvent |
legendItemHover | The user hovers over a legend item. | LegendItemHoverEvent |
legendItemLeave | The cursor leaves a legend item. | LegendItemLeaveEvent |
Notes
| Event | Fires when | Event class |
|---|---|---|
noteClick | The user clicks a note. | NoteClickEvent |
noteHover | The user hovers over a note. | NoteHoverEvent |
noteLeave | The cursor leaves a note. | NoteLeaveEvent |
Drag and Zoom
| Event | Fires when | Event class |
|---|---|---|
drag | The user drags the Chart. | DragEvent |
dragStart | The user starts dragging the Chart. | DragStartEvent |
dragEnd | The user stops dragging the Chart. | DragEndEvent |
zoom | The user zooms the Chart. | ZoomEvent |
zoomStart | The user starts zooming. | ZoomStartEvent |
zoomEnd | The user stops zooming. | ZoomEndEvent |
Selection
| Event | Fires when | Event class |
|---|---|---|
select | The user modifies the axis selection. | SelectEvent |
selectStart | The user starts modifying the selection. | SelectStartEvent |
selectEnd | The user completes a selection change. | SelectEndEvent |
Drilldown and Rendering
| Event | Fires when | Event class |
|---|---|---|
drilldown | The user drills down on a data point. | DrilldownEvent |
drilldownLevelChange | The drilldown level changes. | number |
render | The Chart is ready to render on screen. | RenderEvent |
paneRender | A pane renders. | PaneRenderEvent |
Preventing Default Behavior
Some events support the preventDefault() method, which cancels the associated default action. For example, call preventDefault() on the legendItemClick event to prevent toggling the series visibility.
html
<kendo-chart (legendItemClick)="onLegendClick($event)">
...
</kendo-chart>