# Chart Events

This article describes the available events for the Telerik Chart for Blazor:

* [OnAxisLabelClick](https://www.telerik.com/blazor-ui/documentation/components/chart/events#onaxislabelclick)
* [OnDragEnd](https://www.telerik.com/blazor-ui/documentation/components/chart/events#ondragend)
* [OnDragStart](https://www.telerik.com/blazor-ui/documentation/components/chart/events#ondragstart)
* [OnDrilldown](https://www.telerik.com/blazor-ui/documentation/components/chart/events#ondrilldown)
* [OnLegendItemClick](https://www.telerik.com/blazor-ui/documentation/components/chart/events#onlegenditemclick)
* [OnSeriesClick](https://www.telerik.com/blazor-ui/documentation/components/chart/events#onseriesclick)
* [OnZoomEnd](https://www.telerik.com/blazor-ui/documentation/components/chart/events#onzoomend)
* [OnZoomStart](https://www.telerik.com/blazor-ui/documentation/components/chart/events#onzoomstart)

## OnAxisLabelClick

The `OnAxisLabelClick` event fires when the user clicks a label item on any of the Chart axes. The event argument is of type `ChartAxisLabelClickEventArgs` and exposes the following properties:

<style>
    .article table {
        table-layout: auto;
        word-break: normal;
    }
</style>

| Property   | Type     | Description                                                                                                                                                                                                                                                                                           |
| ---------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `AxisName` | `string` | The value of the `Name` parameter of the Chart axis. Returns `null` if `Name` is not set.                                                                                                                                                                                                             |
| `Index`    | `int`    | The label index on the clicked axis.                                                                                                                                                                                                                                                                  |
| `Text`     | `string` | The visible value of the label. It may be formatted.                                                                                                                                                                                                                                                  |
| `Value`    | `object` | The underlying non-formatted value of the label. The `Value` can be: <ul><li>The same as the <code>Text</code> value when clicking on a category axis label.</li><li>A numeric value when clicking on a value axis label.</li><li>An ISO-8601 DateTime string when clicking on a date axis.</li></ul> |

> caption Using the Chart OnAxisLabelClick event

<demo metaUrl="client/chart/events/axis-label-click/" height="500"></demo>

## OnLegendItemClick

The `OnLegendItemClick` event fires when the user clicks on any item in the Chart legend. The event argument is of type `ChartLegendItemClickEventArgs` and exposes the following properties:

| Property      | Type     | Description                                                                                                                                                                                                   |
| ------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `PointIndex`  | `int?`   | The data point index in the series `Data`. Applies to single-series Charts only (Pie and Donut).                                                                                                              |
| `SeriesIndex` | `int`    | The series index in the `ChartSeriesItems` collection.                                                                                                                                                        |
| `Text`        | `string` | The label of the clicked legend item. In multi-series Charts, the `Text` value matches the `ChartSeries` `Name`. In single-series Charts (Pie and Donut), the `Text` value matches the `CategoryField` value. |

> caption Using the Chart OnLegendItemClick event

<demo metaUrl="client/chart/events/legend-item-click/" height="500"></demo>

## OnDragEnd

The Chart `OnDragEnd` event fires at the end of a drag (pan) gesture. The event argument is of type `ChartDragEndEventArgs` and exposes the following properties:

<style>
    .article table {
        table-layout: auto;
        word-break: normal;
    }
</style>

| Property     | Type                                 | Description                                                                                                                                                                             |
| ------------ | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `AxisRanges` | `Dictionary<string, ChartAxisRange>` | The visible range of each axis at the end of the drag. The dictionary key is the axis name. Each `ChartAxisRange` value has `Min` and `Max` properties that reflect the new axis range. |

The `OnDragEnd` event fires after [`OnDragStart`](https://www.telerik.com/blazor-ui/documentation/components/chart/events#ondragstart).

<demo metaUrl="client/chart/events/drag-end/" height="440"></demo>

## OnDragStart

The Chart `OnDragStart` event fires at the beginning of a drag (pan) gesture. The event argument is of type `ChartDragStartEventArgs` and exposes the following properties:

<style>
    .article table {
        table-layout: auto;
        word-break: normal;
    }
</style>

| Property     | Type                                 | Description                                                                                                                                                                                   |
| ------------ | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `AxisRanges` | `Dictionary<string, ChartAxisRange>` | The visible range of each axis at the start of the drag. The dictionary key is the axis name. Each `ChartAxisRange` value has `Min` and `Max` properties that reflect the current axis range. |

The `OnDragStart` event fires before [`OnDragEnd`](https://www.telerik.com/blazor-ui/documentation/components/chart/events#ondragend).

<demo metaUrl="client/chart/events/drag-start/" height="500"></demo>

## OnDrilldown

The `OnDrilldown` event is triggered when the [drill-down functionality executes](https://www.telerik.com/blazor-ui/documentation/components/chart/drilldown). The handler of this event accepts a `ChartDrilldownEventArgs` object as a parameter. You can access the name of the drilled down (clicked) series through the `SeriesName` property of the event arguments object.

## OnSeriesClick

The `OnSeriesClick` event fires as a response to the user click on a `<ChartSeries>`.

Below you can find:

* [Event Arguments](https://www.telerik.com/blazor-ui/documentation/components/chart/events#event-arguments)
* Examples:
  * [Basic Click Handler](https://www.telerik.com/blazor-ui/documentation/components/chart/events#basic-click-handler)
  * [Get The Data Model For The Clicked Series](https://www.telerik.com/blazor-ui/documentation/components/chart/events#get-the-data-model-for-the-clicked-series)
  * [Load Data On Demand Based On Series Click](https://www.telerik.com/blazor-ui/documentation/components/chart/events#load-data-on-demand-based-on-series-click)

### Event Arguments

The event handler receives a `ChartSeriesClickEventArgs` object which provides the following data:

* `DataItem` - provides the data model of the current series item. You need to cast it to the type from your datasource, which needs to be serializable.

  * If you are using a [Date Axis](https://www.telerik.com/blazor-ui/documentation/components/chart/date-axis), the `DataItem` will contain the only the aggregated value in the corresponding y-value field, because it is a collection of more than one items. See the `Category` below for details.

* `Category` - provides information on the category the data point is located in. You need to cast it to the type in your data source, for example `DateTime`, `string`, `int` or another type. The Category parameter is applicable to [Categorical Charts](https://www.telerik.com/blazor-ui/documentation/components/chart/data-bind#series-types).

  * When using a [Date Axis](https://www.telerik.com/blazor-ui/documentation/components/chart/date-axis), you can use it, together with the `BaseUnit` value of the axis, to filter the data source and obtain the actual data items from the data source in case you want to provide extra information about them.

* `Percentage` - applicable to [Donut](https://www.telerik.com/blazor-ui/documentation/components/chart/types/donut), [Pie](https://www.telerik.com/blazor-ui/documentation/components/chart/types/pie) and [Stacked 100%](https://www.telerik.com/blazor-ui/documentation/components/chart/stacked-series#stack-100) Charts - the percentage value of the current data point from the whole.

* `SeriesIndex` - provides the index of the `<ChartSeries>` the data point belongs to.

* `SeriesName` - bound to the Name parameter of the `<ChartSeries>` the data point belongs to.

* `SeriesColor` - shows the RGB color of the Series the data point belongs to.

* `CategoryIndex` - shows the index of the data point's x-axis category.

### Examples

These examples showcase the different applications of the `OnSeriesClick` event.

* [Basic Click Handler](https://www.telerik.com/blazor-ui/documentation/components/chart/events#basic-click-handler)
* [Get The Data Model For The Clicked Series](https://www.telerik.com/blazor-ui/documentation/components/chart/events#get-the-data-model-for-the-clicked-series)
* [Load Data On Demand Based On Series Click](https://www.telerik.com/blazor-ui/documentation/components/chart/events#load-data-on-demand-based-on-series-click)

### Basic Click Handler

<demo metaUrl="client/chart/events/on-series-click/basic-click-handler/" height="500"></demo>

### Get The Data Model For The Clicked Series

<demo metaUrl="client/chart/events/on-series-click/data-model/" height="500"></demo>

### Load Data On Demand Based On Series Click

<demo metaUrl="client/chart/events/on-series-click/load-data-on-demand/" height="500"></demo>

## OnZoomEnd

The Chart `OnZoomEnd` event fires at the end of a zoom gesture. The event argument is of type `ChartZoomEndEventArgs` and exposes the following properties:

<style>
    .article table {
        table-layout: auto;
        word-break: normal;
    }
</style>

| Property     | Type                                 | Description                                                                                                                                                                             |
| ------------ | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `AxisRanges` | `Dictionary<string, ChartAxisRange>` | The visible range of each axis at the end of the zoom. The dictionary key is the axis name. Each `ChartAxisRange` value has `Min` and `Max` properties that reflect the new axis range. |

The `OnZoomEnd` event fires after [`OnZoomStart`](https://www.telerik.com/blazor-ui/documentation/components/chart/events#onzoomstart).

<demo metaUrl="client/chart/events/zoom-end/" height="440"></demo>

## OnZoomStart

The Chart `OnZoomStart` event fires at the beginning of a zoom gesture. The event argument is of type `ChartZoomStartEventArgs` and exposes the following properties:

<style>
    .article table {
        table-layout: auto;
        word-break: normal;
    }
</style>

| Property     | Type                                 | Description                                                                                                                                                                                   |
| ------------ | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `AxisRanges` | `Dictionary<string, ChartAxisRange>` | The visible range of each axis at the start of the zoom. The dictionary key is the axis name. Each `ChartAxisRange` value has `Min` and `Max` properties that reflect the current axis range. |

The `OnZoomStart` event fires before [`OnZoomEnd`](https://www.telerik.com/blazor-ui/documentation/components/chart/events#onzoomend).

<demo metaUrl="client/chart/events/zoom-start/" height="500"></demo>

## See Also

* [Live Demo: Chart Events](https://demos.telerik.com/blazor-ui/chart/events)
* [Chart Pan](https://www.telerik.com/blazor-ui/documentation/components/chart/pan-and-zoom/pan)
* [Chart Zoom](https://www.telerik.com/blazor-ui/documentation/components/chart/pan-and-zoom/zoom)