Declined
Last Updated: 14 Dec 2020 11:02 by ADMIN
Chris
Created on: 11 Dec 2020 13:06
Category: Charts
Type: Feature Request
0
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
ADMIN
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: https://feedback.telerik.com/blazor/1499035-seriesover-and-seriesleave-events.

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:

 

<style>
    /* 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;
    }*/
</style>

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

    <ChartCategoryAxes>
        <ChartCategoryAxis Categories="@xAxisItems">
        </ChartCategoryAxis>
    </ChartCategoryAxes>

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

    <ChartLegend Position="ChartLegendPosition.Right">
    </ChartLegend>
</TelerikChart>

@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" };
}

 

 

Regards,
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 https://learn.telerik.com/.