How to remove linking for legend in htmlchart

2 posts, 0 answers
  1. Neetha
    Neetha avatar
    36 posts
    Member since:
    Feb 2014

    Posted 08 Jul 2014 Link to this post

    I have 2 html charts side by side with same x-axis and y-axis , I would like to single legend instead of 2.

    <telerik:RadHtmlChart runat="server" ID="RadHtmlChart2" Width="300" Height="200">
                            <Appearance Position="Right"  >                           
                                <TextStyle FontSize="12"   Color="Blue" FontFamily="Courier New, sans-serif" />

    Anyway to remove links (clicking on one legend will highlight the first one and hide the second.) Please let me know. I wanted to show the legend but just remove the linking, just need a static text with colors next to it.
  2. Marin Bratanov
    Marin Bratanov avatar
    3567 posts

    Posted 10 Jul 2014 Link to this post

    Hello Neetha,

    If your charts have the same axes, you can consider combining all series into a single chart.

    Nevertheless, to override the default behavior where a click on the series name in the legend hides the series, you need to cancel the events. Note that this is not officially supported in the control at the moment and there are some issues with the legendItemHover event. Nevertheless, here is a small example:

        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="300px" Height="300px">
                    <telerik:LineSeries Name="first">
                            <telerik:CategorySeriesItem Y="1" />
                            <telerik:CategorySeriesItem Y="1" />
                            <telerik:CategorySeriesItem Y="1" />
                    <telerik:LineSeries Name="second">
                            <telerik:CategorySeriesItem Y="11" />
                            <telerik:CategorySeriesItem Y="11" />
                            <telerik:CategorySeriesItem Y="11" />
    <script type="text/javascript">
        function stopEvent(evt) {
        function preventChartLegendClicks() {
            var chart = $find("<%=RadHtmlChart1.ClientID %>")._chartObject;
            chart.bind("legendItemClick", stopEvent);
            //chart.bind("legendItemHover", stopEvent);


    Marin Bratanov

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. DevCraft R3 2016 release webinar banner
Back to Top