This is a migrated thread and some comments may be shown as answers.

Disable clickable legend

6 Answers 377 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
RBeco
Top achievements
Rank 1
RBeco asked on 13 Feb 2014, 12:53 PM
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!

6 Answers, 1 is accepted

Sort by
0
Stamo Gochev
Telerik team
answered on 18 Feb 2014, 07:06 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0
Anders
Top achievements
Rank 1
answered on 12 Feb 2016, 11:00 AM

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

0
Danail Vasilev
Telerik team
answered on 17 Feb 2016, 07:35 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Олег
Top achievements
Rank 1
answered on 31 May 2017, 01:11 PM

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.

 

0
Олег
Top achievements
Rank 1
answered on 02 Jun 2017, 08:35 AM

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!

0
Stamo Gochev
Telerik team
answered on 06 Jun 2017, 05:27 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Chart (HTML5)
Asked by
RBeco
Top achievements
Rank 1
Answers by
Stamo Gochev
Telerik team
Anders
Top achievements
Rank 1
Danail Vasilev
Telerik team
Олег
Top achievements
Rank 1
Share this question
or