New to Kendo UI for Vue? Start a free 30-day trial

Events

This article provides details about the different events available in the Chart API.

List of available Chart events

  • onAxisLabelClick - Triggered when the user clicks on the label of the Chart Axis.
  • onDrag - Triggered when the user clicks on the Chart, hold the mouse button down and start to drag the cursor.
  • onDragStart - Triggered when the Drag over the Chart starts.
  • onDragEnd - Triggered when the Drag over the Chart ends.
  • onLegendItemClick - Triggered when a Legend Item is clicked.
  • onLegendItemHover - Triggered when a Legend Item is hovered.
  • onNoteClick - Triggered when a Note is clicked.
  • onNoteHover - Triggered when a Note is hovered.
  • onPlotAreaClick - Triggered when the Plot Area is clicked.
  • onPlotAreaHover - Triggered when the Plot Area is hovered.
  • onRender - Triggered when the Chart is rendered.
  • onSelect - Triggered when the Category Axis item is selected. For more details, check this example.
  • onSelectStart - Triggered when the Category Axis item selection starts. For more details, check this example.
  • onSelectEnd - - Triggered when the Category Axis item selection ends. For more details, check this example.
  • onSeriesClick - Triggered when the Chart series is clicked.
  • onSeriesHover - Triggered when the Chart series is hovered.
  • onZoom - Triggered when the Chart is Zoomed.
  • onZoomStart - Triggered when the Chart Zoom starts.
  • onZoomEnd - Triggered when the Chart Zoom ends.

Below you will see demos of all Chart events. The events in the demos are separated by event type and context in which each of them is triggered.

Chart events demo

The below example demonstrates the usage of the onAxisLabelClick, onLegendItemClick, onLegendItemHover, onNoteClick, onNoteHover, onPlotAreaClick, onPlotAreaHover, onRender, onSeriesClick, onSeriesHover events. For more information about the usage of the other events see the other example in the current article.

Example
View Source
Change Theme:

onDrag, onDragStart and onDragEnd events demo

The below example demonstrates the usage of the onDrag, onDragStart and onDragEnd events.

Example
View Source
Change Theme:

onSelect, onSelectStart and onSelectEnd events demo

The onSelect, onSelectStart and onSelectEnd events are triggered when the select property of the ChartCategoryAxisItem is defined.

Example
View Source
Change Theme:

onZoom, onZoomStart and onZoomEnd events demo

The onZoom, onZoomStart and onZoomEnd events are triggered when the zoomable property of the Chart is set to true.

Example
View Source
Change Theme: