Last Updated: 14 Dec 2020 11:02 by ADMIN
Created on: 11 Dec 2020 13:06
Category: Charts
Type: Feature Request
Cursor on Chart Series Click

When a Chart Series has a click handler defined, I think the cursor should be set to 'pointer' when the user is hovering over the series so the user knows its clickable. Currently the Chart Series Labels change to a pointer cursor when you hover them, however they are not clickable. Not sure if this was the intended functionality, but it seems backwards to me.

1 comment
Marin Bratanov
Posted on: 14 Dec 2020 11:02

Hello Chris,

Hovering over the legend has a very clear action - at the moment it highlights the hovered series. In a future version, it will let you click to hide it.

With the series, however, any functionality is inside the application logic and the chart cannot know about it - whether all series (or segments in a pie) are clickable, or if all data points in a series are clickable, or whether a click on them will actually do anything (it might do nothing depending on the business logic). At the same time, the only built-in features of series are a hover effect and a tooltip, neither of which requires a pointer cursor. A hack like this could be possible if there were events like OnSeriesHover and OnSeriesLeave.

So, I made the following request on your behalf for exposing those events in the chart, so you can Follow it to get email status updates:

That said, I am marking this as "Declined" because we will not be adding a pointer cursor for the series out-of-the-box.

I've also made another workaround that you can consider, this one uses CSS to traverse the chart rendering:


    /* this will work in the chart below with its settings, axes, title and so on */
    .k-chart g[clip-path] g g g path {
        cursor: pointer;

    /* a very generic selector that will capture just about everything in the plot area of the chart */
    /* Try this if you cannot make a more specific selector like the one above by inspecting the rendered content */
    /*.k-chart path {
        cursor: pointer;

        <ChartSeries Type="ChartSeriesType.Column" Name="Product 1" Data="@series1Data">
        <ChartSeries Type="ChartSeriesType.Column" Name="Product 2" Data="@series2Data">

        <ChartCategoryAxis Categories="@xAxisItems">

    <ChartTitle Text="Quarterly revenue per product"></ChartTitle>

    <ChartLegend Position="ChartLegendPosition.Right">

@code {
    public List<object> series1Data = new List<object>() { 10, 2, 5, 6 };
    public List<object> series2Data = new List<object>() { 5, 8, 2, 7 };
    public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };



Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at