Stock Chart Events

Updated on Jun 3, 2026

This article explains the available events for the Telerik Stock Chart for Blazor:

• OnDragEnd
• OnDragStart
• OnSeriesClick
• OnZoomEnd
• OnZoomStart

OnDragEnd

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

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.

<TelerikStockChart Width="750px"
                   Height="450px"
                   DateField="@nameof(StockDataPoint.Date)"
                   OnDragEnd="@OnStockChartDragEnd">

    <StockChartCategoryAxes>
        <StockChartCategoryAxis BaseUnit="@ChartCategoryAxisBaseUnit.Months"></StockChartCategoryAxis>
    </StockChartCategoryAxes>

    <StockChartSeriesItems>
        <StockChartSeries Type="StockChartSeriesType.Candlestick"
                          Name="Product 1"
                          Data="@StockChartProduct1Data"
                          OpenField="@nameof(StockDataPoint.Open)"
                          CloseField="@nameof(StockDataPoint.Close)"
                          HighField="@nameof(StockDataPoint.High)"
                          LowField="@nameof(StockDataPoint.Low)">
        </StockChartSeries>
    </StockChartSeriesItems>

    <StockChartNavigator>
        <StockChartNavigatorSeriesItems>
            <StockChartNavigatorSeries Type="StockChartSeriesType.Line"
                                       Name="Product 1"
                                       Data="@StockChartProduct1Data"
                                       Field="@nameof(StockDataPoint.High)"
                                       CategoryField="@nameof(StockDataPoint.Date)">
            </StockChartNavigatorSeries>
        </StockChartNavigatorSeriesItems>
    </StockChartNavigator>
</TelerikStockChart>

<div>Last event: @EventLog</div>

@code {
    private string EventLog { get; set; } = "No event fired yet.";

    private List<StockDataPoint> StockChartProduct1Data { get; set; } = new List<StockDataPoint>()
    {
        new StockDataPoint(new DateTime(2019, 1, 1), 41.62m, 40.12m, 41.69m, 39.81m, 2632000),
        new StockDataPoint(new DateTime(2019, 2, 1), 39.88m, 40.12m, 41.12m, 39.75m, 3584700),
        new StockDataPoint(new DateTime(2019, 3, 1), 42m, 42.62m, 43.31m, 41.38m, 7631700),
        new StockDataPoint(new DateTime(2019, 4, 1), 42.25m, 43.06m, 43.31m, 41.12m, 4922200)
    };

    private void OnStockChartDragEnd(ChartDragEndEventArgs args)
    {
        EventLog = $"OnDragEnd fired for {args.AxisRanges.Count} axis range(s).";
    }

    public class StockDataPoint
    {
        public StockDataPoint() { }

        public StockDataPoint(DateTime date, decimal open, decimal close, decimal high, decimal low, int volume)
        {
            Date = date;
            Open = open;
            Close = close;
            High = high;
            Low = low;
            Volume = volume;
        }

        public DateTime Date { get; set; }
        public decimal Open { get; set; }
        public decimal Close { get; set; }
        public decimal High { get; set; }
        public decimal Low { get; set; }
        public int Volume { get; set; }
    }
}

OnDragStart

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

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.

<TelerikStockChart Width="750px"
                   Height="450px"
                   DateField="@nameof(StockDataPoint.Date)"
                   OnDragStart="@OnStockChartDragStart">

    <StockChartCategoryAxes>
        <StockChartCategoryAxis BaseUnit="@ChartCategoryAxisBaseUnit.Months"></StockChartCategoryAxis>
    </StockChartCategoryAxes>

    <StockChartSeriesItems>
        <StockChartSeries Type="StockChartSeriesType.Candlestick"
                          Name="Product 1"
                          Data="@StockChartProduct1Data"
                          OpenField="@nameof(StockDataPoint.Open)"
                          CloseField="@nameof(StockDataPoint.Close)"
                          HighField="@nameof(StockDataPoint.High)"
                          LowField="@nameof(StockDataPoint.Low)">
        </StockChartSeries>
    </StockChartSeriesItems>

    <StockChartNavigator>
        <StockChartNavigatorSeriesItems>
            <StockChartNavigatorSeries Type="StockChartSeriesType.Line"
                                       Name="Product 1"
                                       Data="@StockChartProduct1Data"
                                       Field="@nameof(StockDataPoint.High)"
                                       CategoryField="@nameof(StockDataPoint.Date)">
            </StockChartNavigatorSeries>
        </StockChartNavigatorSeriesItems>
    </StockChartNavigator>
</TelerikStockChart>

<div>Last event: @EventLog</div>

@code {
    private string EventLog { get; set; } = "No event fired yet.";

    private List<StockDataPoint> StockChartProduct1Data { get; set; } = new List<StockDataPoint>()
    {
        new StockDataPoint(new DateTime(2019, 1, 1), 41.62m, 40.12m, 41.69m, 39.81m, 2632000),
        new StockDataPoint(new DateTime(2019, 2, 1), 39.88m, 40.12m, 41.12m, 39.75m, 3584700),
        new StockDataPoint(new DateTime(2019, 3, 1), 42m, 42.62m, 43.31m, 41.38m, 7631700),
        new StockDataPoint(new DateTime(2019, 4, 1), 42.25m, 43.06m, 43.31m, 41.12m, 4922200)
    };

    private void OnStockChartDragStart(ChartDragStartEventArgs args)
    {
        EventLog = $"OnDragStart fired for {args.AxisRanges.Count} axis range(s).";
    }

    public class StockDataPoint
    {
        public StockDataPoint() { }

        public StockDataPoint(DateTime date, decimal open, decimal close, decimal high, decimal low, int volume)
        {
            Date = date;
            Open = open;
            Close = close;
            High = high;
            Low = low;
            Volume = volume;
        }

        public DateTime Date { get; set; }
        public decimal Open { get; set; }
        public decimal Close { get; set; }
        public decimal High { get; set; }
        public decimal Low { get; set; }
        public int Volume { get; set; }
    }
}

OnSeriesClick

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

Below you can find:

• Event Arguments
• Examples:
  • Basic Click Handler
  • Get The Data Model For The Clicked Series

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 data source, which needs to be serializable.

  • For OHLC and Candlestick chart types the DataItem will contain the information mapped to the OpenField, CloseField, HighField and LowField properties.
  • For Line, Area and Column the DataItem will contain the information mapped to the Field properties.
  • The DataItem will contain an aggregated value for the date, so in order to get it you can use the Category and parse it to DateTime.

• Category - provides information on the category the data point is located in. Since the Stock Chart has a date X axis the Category should be cast to DateTime.

• SeriesIndex - provides the index of the <StockChartSeries> the data point belongs to.

• Percentage - for the Stock Chart the value will always be 0.

• SeriesName - bound to the Name parameter of the <StockChartSeries> 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
• Get The Data Model For The Clicked Series

Basic Click Handler

@* Get the Category from which the user clicked. *@

<TelerikStockChart Width="750px"
                   Height="450px"
                   DateField="@nameof(StockDataPoint.Date)"
                   OnSeriesClick="@OnSeriesClickHandler">

    <StockChartCategoryAxes>
        <StockChartCategoryAxis BaseUnit="@ChartCategoryAxisBaseUnit.Months"></StockChartCategoryAxis>
    </StockChartCategoryAxes>

    <StockChartSeriesItems>
        <StockChartSeries Type="StockChartSeriesType.Candlestick"
                          Name="Product 1"
                          Data="@StockChartProduct1Data"
                          OpenField="@nameof(StockDataPoint.Open)"
                          CloseField="@nameof(StockDataPoint.Close)"
                          HighField="@nameof(StockDataPoint.High)"
                          LowField="@nameof(StockDataPoint.Low)">
        </StockChartSeries>
    </StockChartSeriesItems>

    <StockChartNavigator>
        <StockChartNavigatorSeriesItems>
            <StockChartNavigatorSeries Type="StockChartSeriesType.Line"
                                       Name="Product 1"
                                       Data="@StockChartProduct1Data"
                                       Field="@(nameof(StockDataPoint.High))"
                                       CategoryField="@(nameof(StockDataPoint.Date))">
            </StockChartNavigatorSeries>
        </StockChartNavigatorSeriesItems>
    </StockChartNavigator>

</TelerikStockChart>

<div>
    Clicked from: @logger
</div>

@code {
    public string logger { get; set; } = String.Empty;

    void OnSeriesClickHandler(ChartSeriesClickEventArgs args)
    {
        DateTime category = DateTime.Parse(args.Category.ToString());
        logger = category.ToShortDateString();
    }

    public List<StockDataPoint> StockChartProduct1Data { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await GenerateChartData();
    }

    public async Task GenerateChartData()
    {
        StockChartProduct1Data = new List<StockDataPoint>()
        {
            new StockDataPoint(new DateTime(2019, 1, 1), 41.62m, 40.12m, 41.69m, 39.81m, 2632000),
            new StockDataPoint(new DateTime(2019, 2, 1), 39.88m, 40.12m, 41.12m, 39.75m, 3584700),
            new StockDataPoint(new DateTime(2019, 3, 1), 42m, 42.62m, 43.31m, 41.38m, 7631700),
            new StockDataPoint(new DateTime(2019, 4, 1), 42.25m, 43.06m, 43.31m, 41.12m, 4922200)
        };

        await Task.FromResult(StockChartProduct1Data);
    }

    public class StockDataPoint
    {
        public StockDataPoint() { }

        public StockDataPoint(DateTime date, decimal open, decimal close, decimal high, decimal low, int volume)
        {
            Date = date;
            Open = open;
            Close = close;
            High = high;
            Low = low;
            Volume = volume;
        }
        public DateTime Date { get; set; }

        public decimal Open { get; set; }

        public decimal Close { get; set; }

        public decimal High { get; set; }

        public decimal Low { get; set; }

        public int Volume { get; set; }
    }
}

The result from the code snippet above

Get The Data Model For The Clicked Series

@* Receive the data model based on the series the user clicked on *@

<TelerikStockChart Width="750px"
                   Height="300px"
                   DateField="@nameof(StockDataPoint.Date)"
                   OnSeriesClick="@OnSeriesClickHandler">

    <StockChartCategoryAxes>
        <StockChartCategoryAxis BaseUnit="@ChartCategoryAxisBaseUnit.Months"></StockChartCategoryAxis>
    </StockChartCategoryAxes>

    <StockChartSeriesItems>
        <StockChartSeries Type="StockChartSeriesType.Candlestick"
                          Name="Product 1"
                          Data="@StockChartProduct1Data"
                          OpenField="@nameof(StockDataPoint.Open)"
                          CloseField="@nameof(StockDataPoint.Close)"
                          HighField="@nameof(StockDataPoint.High)"
                          LowField="@nameof(StockDataPoint.Low)">
        </StockChartSeries>
    </StockChartSeriesItems>

    <StockChartNavigator>
        <StockChartNavigatorSeriesItems>
            <StockChartNavigatorSeries Type="StockChartSeriesType.Line"
                                       Name="Product 1"
                                       Data="@StockChartProduct1Data"
                                       Field="@(nameof(StockDataPoint.High))"
                                       CategoryField="@(nameof(StockDataPoint.Date))">
            </StockChartNavigatorSeries>
        </StockChartNavigatorSeriesItems>
    </StockChartNavigator>

</TelerikStockChart>

@if (dataModel != null)
{
    <div>
        <div>Clicked from: @SeriesName</div>
        <div>Open Value: @dataModel.Open</div>
        <div>Close Value: @dataModel.Close</div>
        <div>High Value: @dataModel.High</div>
        <div>Low Value: @dataModel.Low</div>
        <div>Date: @dataModel.Date.ToShortDateString()</div>
    </div>
}


@code {
    public StockDataPoint dataModel { get; set; }
    public string SeriesName { get; set; }

    void OnSeriesClickHandler(ChartSeriesClickEventArgs args)
    {
        DateTime category = DateTime.Parse(args.Category.ToString());
        string seriesName = args.SeriesName;

        dataModel = StockChartProduct1Data.Where(x => x.Date == category).FirstOrDefault();
        SeriesName = seriesName;
    }

    public List<StockDataPoint> StockChartProduct1Data { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await GenerateChartData();
    }

    public async Task GenerateChartData()
    {
        StockChartProduct1Data = new List<StockDataPoint>()
        {
            new StockDataPoint(new DateTime(2019, 1, 1), 41.62m, 40.12m, 41.69m, 39.81m, 2632000),
            new StockDataPoint(new DateTime(2019, 2, 1), 39.88m, 40.12m, 41.12m, 39.75m, 3584700),
            new StockDataPoint(new DateTime(2019, 3, 1), 42m, 42.62m, 43.31m, 41.38m, 7631700),
            new StockDataPoint(new DateTime(2019, 4, 1), 42.25m, 43.06m, 43.31m, 41.12m, 4922200)
        };

        await Task.FromResult(StockChartProduct1Data);
    }

    public class StockDataPoint
    {
        public StockDataPoint() { }

        public StockDataPoint(DateTime date, decimal open, decimal close, decimal high, decimal low, int volume)
        {
            Date = date;
            Open = open;
            Close = close;
            High = high;
            Low = low;
            Volume = volume;
        }
        public DateTime Date { get; set; }

        public decimal Open { get; set; }

        public decimal Close { get; set; }

        public decimal High { get; set; }

        public decimal Low { get; set; }

        public int Volume { get; set; }
    }
}

The result from the code snippet above

OnZoomEnd

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

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.

<TelerikStockChart Width="750px"
                   Height="450px"
                   DateField="@nameof(StockDataPoint.Date)"
                   OnZoomEnd="@OnStockChartZoomEnd">

    <StockChartCategoryAxes>
        <StockChartCategoryAxis BaseUnit="@ChartCategoryAxisBaseUnit.Months"></StockChartCategoryAxis>
    </StockChartCategoryAxes>

    <StockChartSeriesItems>
        <StockChartSeries Type="StockChartSeriesType.Candlestick"
                          Name="Product 1"
                          Data="@StockChartProduct1Data"
                          OpenField="@nameof(StockDataPoint.Open)"
                          CloseField="@nameof(StockDataPoint.Close)"
                          HighField="@nameof(StockDataPoint.High)"
                          LowField="@nameof(StockDataPoint.Low)">
        </StockChartSeries>
    </StockChartSeriesItems>

    <StockChartNavigator>
        <StockChartNavigatorSeriesItems>
            <StockChartNavigatorSeries Type="StockChartSeriesType.Line"
                                       Name="Product 1"
                                       Data="@StockChartProduct1Data"
                                       Field="@nameof(StockDataPoint.High)"
                                       CategoryField="@nameof(StockDataPoint.Date)">
            </StockChartNavigatorSeries>
        </StockChartNavigatorSeriesItems>
    </StockChartNavigator>
</TelerikStockChart>

<div>Last event: @EventLog</div>

@code {
    private string EventLog { get; set; } = "No event fired yet.";

    private List<StockDataPoint> StockChartProduct1Data { get; set; } = new List<StockDataPoint>()
    {
        new StockDataPoint(new DateTime(2019, 1, 1), 41.62m, 40.12m, 41.69m, 39.81m, 2632000),
        new StockDataPoint(new DateTime(2019, 2, 1), 39.88m, 40.12m, 41.12m, 39.75m, 3584700),
        new StockDataPoint(new DateTime(2019, 3, 1), 42m, 42.62m, 43.31m, 41.38m, 7631700),
        new StockDataPoint(new DateTime(2019, 4, 1), 42.25m, 43.06m, 43.31m, 41.12m, 4922200)
    };

    private void OnStockChartZoomEnd(ChartZoomEndEventArgs args)
    {
        EventLog = $"OnZoomEnd fired for {args.AxisRanges.Count} axis range(s).";
    }

    public class StockDataPoint
    {
        public StockDataPoint() { }

        public StockDataPoint(DateTime date, decimal open, decimal close, decimal high, decimal low, int volume)
        {
            Date = date;
            Open = open;
            Close = close;
            High = high;
            Low = low;
            Volume = volume;
        }

        public DateTime Date { get; set; }
        public decimal Open { get; set; }
        public decimal Close { get; set; }
        public decimal High { get; set; }
        public decimal Low { get; set; }
        public int Volume { get; set; }
    }
}

OnZoomStart

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

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.

<TelerikStockChart Width="750px"
                   Height="450px"
                   DateField="@nameof(StockDataPoint.Date)"
                   OnZoomStart="@OnStockChartZoomStart">

    <StockChartCategoryAxes>
        <StockChartCategoryAxis BaseUnit="@ChartCategoryAxisBaseUnit.Months"></StockChartCategoryAxis>
    </StockChartCategoryAxes>

    <StockChartSeriesItems>
        <StockChartSeries Type="StockChartSeriesType.Candlestick"
                          Name="Product 1"
                          Data="@StockChartProduct1Data"
                          OpenField="@nameof(StockDataPoint.Open)"
                          CloseField="@nameof(StockDataPoint.Close)"
                          HighField="@nameof(StockDataPoint.High)"
                          LowField="@nameof(StockDataPoint.Low)">
        </StockChartSeries>
    </StockChartSeriesItems>

    <StockChartNavigator>
        <StockChartNavigatorSeriesItems>
            <StockChartNavigatorSeries Type="StockChartSeriesType.Line"
                                       Name="Product 1"
                                       Data="@StockChartProduct1Data"
                                       Field="@nameof(StockDataPoint.High)"
                                       CategoryField="@nameof(StockDataPoint.Date)">
            </StockChartNavigatorSeries>
        </StockChartNavigatorSeriesItems>
    </StockChartNavigator>
</TelerikStockChart>

<div>Last event: @EventLog</div>

@code {
    private string EventLog { get; set; } = "No event fired yet.";

    private List<StockDataPoint> StockChartProduct1Data { get; set; } = new List<StockDataPoint>()
    {
        new StockDataPoint(new DateTime(2019, 1, 1), 41.62m, 40.12m, 41.69m, 39.81m, 2632000),
        new StockDataPoint(new DateTime(2019, 2, 1), 39.88m, 40.12m, 41.12m, 39.75m, 3584700),
        new StockDataPoint(new DateTime(2019, 3, 1), 42m, 42.62m, 43.31m, 41.38m, 7631700),
        new StockDataPoint(new DateTime(2019, 4, 1), 42.25m, 43.06m, 43.31m, 41.12m, 4922200)
    };

    private void OnStockChartZoomStart(ChartZoomStartEventArgs args)
    {
        EventLog = $"OnZoomStart fired for {args.AxisRanges.Count} axis range(s).";
    }

    public class StockDataPoint
    {
        public StockDataPoint() { }

        public StockDataPoint(DateTime date, decimal open, decimal close, decimal high, decimal low, int volume)
        {
            Date = date;
            Open = open;
            Close = close;
            High = high;
            Low = low;
            Volume = volume;
        }

        public DateTime Date { get; set; }
        public decimal Open { get; set; }
        public decimal Close { get; set; }
        public decimal High { get; set; }
        public decimal Low { get; set; }
        public int Volume { get; set; }
    }
}

See Also

• Live Demo: Stock Chart