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.
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/.