# Chart Events

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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/chart/events/source.txt)

## Events Reference

The following tables list all available events on the [`ChartComponent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent), grouped by category.

### Series and Plot Area

| Event                                                                                                                    | Fires when                           | Event class                                                                                                         |
| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------- |
| [`seriesClick`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#seriesclick)       | The user clicks a series point.      | [`SeriesClickEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesclickevent)       |
| [`seriesHover`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#serieshover)       | The user hovers over a series point. | [`SeriesHoverEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/serieshoverevent)       |
| [`seriesOver`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#seriesover)         | The cursor enters a series.          | [`SeriesOverEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesoverevent)         |
| [`seriesLeave`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#seriesleave)       | The cursor leaves a series.          | [`SeriesLeaveEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesleaveevent)       |
| [`plotAreaClick`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#plotareaclick)   | The user clicks the plot area.       | [`PlotAreaClickEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/plotareaclickevent)   |
| [`plotAreaHover`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#plotareahover)   | The user hovers over the plot area.  | [`PlotAreaHoverEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/plotareahoverevent)   |
| [`plotAreaLeave`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#plotarealeave)   | The cursor leaves the plot area.     | [`PlotAreaLeaveEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/plotarealeaveevent)   |
| [`axisLabelClick`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#axislabelclick) | The user clicks an axis label.       | [`AxisLabelClickEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/axislabelclickevent) |

### Legend

| Event                                                                                                                      | Fires when                          | Event class                                                                                                           |
| -------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| [`legendItemClick`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#legenditemclick) | The user clicks a legend item.      | [`LegendItemClickEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legenditemclickevent) |
| [`legendItemHover`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#legenditemhover) | The user hovers over a legend item. | [`LegendItemHoverEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legenditemhoverevent) |
| [`legendItemLeave`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#legenditemleave) | The cursor leaves a legend item.    | [`LegendItemLeaveEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legenditemleaveevent) |

### Notes

| Event                                                                                                          | Fires when                   | Event class                                                                                               |
| -------------------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------- |
| [`noteClick`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#noteclick) | The user clicks a note.      | [`NoteClickEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/noteclickevent) |
| [`noteHover`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#notehover) | The user hovers over a note. | [`NoteHoverEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/notehoverevent) |
| [`noteLeave`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#noteleave) | The cursor leaves a note.    | [`NoteLeaveEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/noteleaveevent) |

### Drag and Zoom

| Event                                                                                                          | Fires when                          | Event class                                                                                               |
| -------------------------------------------------------------------------------------------------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------- |
| [`drag`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#drag)           | The user drags the Chart.           | [`DragEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/dragevent)           |
| [`dragStart`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#dragstart) | The user starts dragging the Chart. | [`DragStartEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/dragstartevent) |
| [`dragEnd`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#dragend)     | The user stops dragging the Chart.  | [`DragEndEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/dragendevent)     |
| [`zoom`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#zoom)           | The user zooms the Chart.           | [`ZoomEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/zoomevent)           |
| [`zoomStart`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#zoomstart) | The user starts zooming.            | [`ZoomStartEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/zoomstartevent) |
| [`zoomEnd`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#zoomend)     | The user stops zooming.             | [`ZoomEndEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/zoomendevent)     |

### Selection

| Event                                                                                                              | Fires when                               | Event class                                                                                                   |
| ------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| [`select`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#select)           | The user modifies the axis selection.    | [`SelectEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/selectevent)           |
| [`selectStart`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#selectstart) | The user starts modifying the selection. | [`SelectStartEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/selectstartevent) |
| [`selectEnd`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#selectend)     | The user completes a selection change.   | [`SelectEndEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/selectendevent)     |

### Drilldown and Rendering

| Event                                                                                                                                | Fires when                              | Event class                                                                                                 |
| ------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| [`drilldown`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#drilldown)                       | The user drills down on a data point.   | [`DrilldownEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/drilldownevent)   |
| [`drilldownLevelChange`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#drilldownlevelchange) | The drilldown level changes.            | `number`                                                                                                    |
| [`render`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#render)                             | The Chart is ready to render on screen. | [`RenderEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/renderevent)         |
| [`paneRender`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#panerender)                     | A pane renders.                         | [`PaneRenderEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/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>
```

```ts
public onLegendClick(event: LegendItemClickEvent): void {
    event.preventDefault();
    // Custom logic here
}
```

## Suggested Links

* [Angular Charts Homepage](https://www.telerik.com/kendo-angular-ui/charts)
* [API Reference of the Angular Charts](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api)