ttbarnes
Posts: 8
Joined: Fri Sep 11, 2015 3:39 pm

pie chart - offset a single slice on legend click

Hi guys, i've been searching through the API docs and lots of examples, but can't seem to find what I want.

I have a pie chart with a legend. When you click a slice, it becomes offset (this is great). I would like this behaviour when you click on a legend item.

Is it possible to achieve an offset slice via legend click?

So if you click on an item in the legend, the relevant slice becomes offset.

It seems that the method to use is legendItemClick, eg:

Code: Select all

options: {
     chart: {
         type: 'pie'
     },
     plotOptions: {

      //etc

      series: {
        point: {
          events: {

            legendItemClick: function () {

              //return false; // this cancels the default action.

              console.log(this);

              //this.findtheSlice.makeItOffset();  //want to do something like this

            }

          }
        }
      }

    //etc

    }
  }
}
JSFiddle: http://jsfiddle.net/95n2mm02/2/

It seems that there isn't a method available to achieve this so may need to go deep into the api.

Any help would be very appreciated!

Btw, i'm using an angular directive for highcharts (highcharts-ng). There are some subtle differences.
User avatar
KacperMadej
Posts: 4632
Joined: Mon Sep 15, 2014 12:43 pm

Re: pie chart - offset a single slice on legend click

legendItemClick for pie series is a point event of pie type series, so function could be placed in plotOptions.pie.point.event.legendItemClick.
To prevent default behavior (hide/show a slice) use event.preventDefault() (API: http://api.highcharts.com/highcharts#se ... dItemClick) and to slice out a slice you could call slice() on this in event function. To hide halo, before slicing out it is possible to change state of the slice to the default state - no halo there.
Example: http://jsfiddle.net/95n2mm02/6/
Kacper Madej
Highcharts Developer
ttbarnes
Posts: 8
Joined: Fri Sep 11, 2015 3:39 pm

Re: pie chart - offset a single slice on legend click

Thanks for your reply KacperMadej. There is also another approach (thanks to Sebastian, highcharts support engineer):

Code: Select all

point: {
                events: {
                    legendItemClick: function () {
                        this.slice();
                        return false;
                    }
                }
            }
ttbarnes
Posts: 8
Joined: Fri Sep 11, 2015 3:39 pm

Re: pie chart - offset a single slice on legend click

Actually, there is a slight issue with the above approaches. The following scenario ensues:

- If you click an item in the pie chart, it will slice.
- if you click a *different* item in the pie chart, the first item will 'unslice'/not-offset.

The proposed solutions for clicking the legend items does not achieve the above - At the moment this happens:

- if you click an item in the legend, the item in the pie chart becomes sliced.
- if you click a *different* item in the pie chart, the first item is still sliced.


I would like to have this:
- if you click any item in the pie chart, the item will slice and become offset. All other items will be reverted to the original state.
- Exactly the same for items in the legend.
- If a user decides to click on an item in the pie chart and then the legend (or vice versa), the same behaviour will be achieved.

How can this be done? I've been searching through the docs and trying to make changes with the legendItemClick event for ~ 2 hours now, by eg looping over each point in the series, and setting the slice as false, but this doesn't work.

As an example, something like this:

Code: Select all

legendItemClick: function () {

  for(var i = 0;i < this.series.yData; i++) {
    i.slice(false); //unslice everything
  }
  this.slice(); //slice the one that has been clicked.

}

Can you select 'all points' within the legendItemClick event function, or immediately after event?

Any help would be very appreciated!

http://jsfiddle.net/zx45h4q8/
User avatar
KacperMadej
Posts: 4632
Joined: Mon Sep 15, 2014 12:43 pm

Re: pie chart - offset a single slice on legend click

Calling slice for numbers won't help here. You should call it on points instead.
Example: http://jsfiddle.net/zx45h4q8/2/

Other option is to store sliced point and 'unslice' just that point - this will eliminate need for searching or 'unslicing' of all points.
Kacper Madej
Highcharts Developer
ttbarnes
Posts: 8
Joined: Fri Sep 11, 2015 3:39 pm

Re: pie chart - offset a single slice on legend click

Thanks once again Kacper! Really appreciate the help.

I'm just getting used to highcharts :-)
SASM
Posts: 1
Joined: Fri May 13, 2022 8:26 am

Re: pie chart - offset a single slice on legend click

How to Enable both of these functionalities together?. Like i added code for both of the functionalities together like this

Code: Select all

var points = this.series.points,
                                    len = points.length;

                                for (var i = 0; i < len; i++) {
                                    points[i].slice(false); //unslice everything
                                }
                                this.setState("");
                                this.slice();
But in this 'this.setState("");' functionality is not working. please provide a solution
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: pie chart - offset a single slice on legend click

Hello SASM,
Welcome to our forum and thanks for contacting us with your question!

You can use the same function for point.events.click and point.events.legendItemClick - just like in the demo below. Using this code you can click on any point or any legendItem and point will be sliced.

Demo: https://jsfiddle.net/BlackLabel/Lfxwv3mj/

Let me know if that was what you were looking for!
Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”