Disable Leged Item Click
Environment
Product | RadHtmlChart for ASP.NET AJAX |
Version | All |
Description
I want to disable the ability to click on chart legend items, preventing the default behavior of showing or hiding the corresponding chart segments.
This KB article also answers the following questions:
- How to make legend items in RadHtmlChart non-interactive?
- How to prevent the default toggle behavior on legend item click in RadHtmlChart?
- How to stop chart segments from hiding when clicking on their legend items?
Solution
To make legend items unclickable and prevent the default behavior of showing or hiding the corresponding chart segments in RadHtmlChart, attach the legendItemClick
event and prevent its default action.
The following example demonstrates how to achieve this by using a Pie Chart as an illustration. However, this approach is applicable to any chart type that supports legend items in RadHtmlChart.
-
Attach the
OnLegendItemClick
client event to the RadHtmlChart. -
Implement the
onLegendItemClick
function to prevent the default behavior.
Here is how you can configure the RadHtmlChart:
<telerik:RadHtmlChart runat="server" ID="RadChart1" Width="500px">
<PlotArea>
<Series>
<telerik:PieSeries>
<SeriesItems>
<telerik:PieSeriesItem Y="20" Name="name 1" />
<telerik:PieSeriesItem Y="30" Name="name 2" />
<telerik:PieSeriesItem Y="50" Name="name 3" />
<telerik:PieSeriesItem Y="40" Name="name 4" />
</SeriesItems>
</telerik:PieSeries>
</Series>
</PlotArea>
<ClientEvents OnLegendItemClick="onLegendItemClick"/>
</telerik:RadHtmlChart>
Include the following JavaScript function in your page:
function onLegendItemClick(e) {
e.preventDefault();
}
By preventing the default action in the onLegendItemClick
function, clicking on legend items will no longer toggle the visibility of the corresponding chart segments, making the legend items effectively unclickable in terms of interactive behavior.