CODEWITHSUNDEEP
javascriptchartshighcharts
Tony Barnes
Tony Barnes

Reputation: 2643

Highcharts pie chart - offset a single slice on legend click

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:

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

    }
  }
}

Here is a JSFiddle

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.

Upvotes: 0

Views: 996

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

In the legendItemClick you should call this.slice() and then return false.

           point: {
                events: {
                    legendItemClick: function () {
                        this.slice();
                        return false;
                    }
                }
            },

Example: http://jsfiddle.net/95n2mm02/4/

Upvotes: 1

Related Questions