Disable clickable legend

[RBeco]

Hello,

I am using a pie chart which by default has a clickable legend. If you click on a legend item, you filter out that data Item. However, my client doesn't want this functionality because they find it confusing that the tooltip info doesnt change (the % stays the same and is not calculated back to be a total of 100% with the remaining items).

How do I disable this functionality? I cant find any property in the control for this.

Thanks!

[Stamo Gochev]

Hi,

You can attach an event handler to the legendItemClick event and prevent the default behavior (show/hide the corresponding pie segment). This could be done like this:

<script type="text/javascript">
    function pageLoad() {
        //get a reference to the chart
        var chart = $find("Chart");
        //attach an event handler
        chart._chartObject.bind("legendItemClick", function (e) {
            e.preventDefault();
        });
    }
</script>

I also attach a working example with the above suggestion. Could you try to use the same approach in your real scenario?

Regards,
Stamo Gochev
Telerik

[Anders]

Dear Stamo Gochev

 I have used the code from your example and it works fine. But now I need to disable on one of the series and not all of them.

Is that possible?

Anders Pedersen

[Danail Vasilev]

Hi Anders,

You can use some flag that utilizes the series item name. For example to disable the legend interaction of the second item you can use the code below:

chart._chartObject.bind("legendItemClick", function (e) {
    if (e.text == "name 2") {
        e.preventDefault();
    }
});

Regards,
Danail Vasilev
Telerik

[Олег]

Hello!

To continue a topic...

Can anybody help me how to make something like this:

<script type="text/javascript">
    function pageLoad() {
        var chart = $find("Chart");
        chart._chartObject.bind("legendItemClick", function (e) {
         if (e.legendItem1Clicked==false && e.legendItem2Clicked==true)

            {

           if(e.text="name 1"){e.preventDefault()}     

            }

        });
    }
</script>

 

I mean can I know if the label is clicked or not? I want to prevent click only on the last legend item, to avoid clear plot area.

 

[Олег]

Hi!

See my own solution:

 <script type="text/javascript">
               
                function pageLoad() {                  

                    //get a reference to the chart
                    var chart = $find("MainChart");
                    var kp1 = 0;
                    var kp2 = 0;
                    //attach an event handler
                    chart._chartObject.bind("legendItemClick", function (e) {
                        if (e.text == "Name1") {
                            if (kp2 % 2 == 0) kp1 += 1;
                        }

                        if (e.text == "Name2") {
                            if (kp1 % 2 == 0) kp2 += 1;
                        }

                        if ((kp1 % 2 != 0) & e.text == "Name2") {
                            e.preventDefault()
                        }

                        if ((kp2 % 2 != 0) & e.text == "Name1") {
                            e.preventDefault()
                        }
                    });
                }
            </script>

Now, the last label is not clickable!

[Stamo Gochev]

Hello,

One way to determine if a specific legend item was clicked is to check for its text property in the event handler (this also what Oleg and my colleague Danail have suggested):

chart.get_kendoWidget().bind("legendItemClick", function (e) {
    if (e.text == "last legend item text") {
        e.preventDefault();
    }
});

I also want to mention that it is preferable to use the get_kendoWidget() client-side method (the public API) instead of _chartObject as the last one might be removed in future releases:

http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/client-side-programming/overview

Regards,
Stamo Gochev
Progress Telerik