Disable clickable legend

7 posts, 0 answers
  1. RBeco
    RBeco avatar
    15 posts
    Member since:
    Apr 2013

    Posted 13 Feb 2014 Link to this post

    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!
  2. Stamo Gochev
    Admin
    Stamo Gochev avatar
    185 posts

    Posted 18 Feb 2014 Link to this post

    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.
  3. Anders
    Anders avatar
    30 posts
    Member since:
    Jul 2013

    Posted 12 Feb 2016 in reply to Stamo Gochev Link to this post

    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

  4. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1502 posts

    Posted 17 Feb 2016 Link to this post

    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
  5. Олег
    Олег avatar
    6 posts
    Member since:
    Feb 2017

    Posted 31 May Link to this post

    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.

     

  6. Олег
    Олег avatar
    6 posts
    Member since:
    Feb 2017

    Posted 02 Jun in reply to Олег Link to this post

    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!

  7. Stamo Gochev
    Admin
    Stamo Gochev avatar
    185 posts

    Posted 06 Jun Link to this post

    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.
Back to Top