I am having trouble trying to trigger the drilldown event from legend item click event handler. In the example the drilldown is triggered when clicking on a pie slice but clicking on a legend item will show/hide the slice.

I'm trying to asynchronously load the data for an item.

An example of the drilldown handler:

  drilldown: function(e) {
      console.log(".....", "on drilldown item", e, this);
      var chart = this
      , serieData = [];
      if (!e.seriesOptions) {
        chart.showLoading('Loading ...');
        setTimeout(function() {
          chart.addSeriesAsDrilldown(e.point, {
            name: 'Some sub item',
            colorByPoint: true,
            data: [{
              name: 'bla',
              y: 56.33
            }, {
              name: 'da da',
              y: 24.03,
              drilldown: true
            }, {
              name: 'ba ba ba',
              y: 10.38,
              drilldown: true
            }]
          });
          chart.hideLoading();
        }
        , 10);
      }
    }
  }

And the legend item handler:

  point: {
      events: {
        legendItemClick: function(e) {
          console.log(".....", "clicked legend item", e, this);
          //in drilldown chart = this but how can I get it here?
          //in drilldown e has seriesOptions, not this e
          //in drilldown e has point, not this e
          return false;
        }
      }
    }
  }

I am having trouble trying to trigger the drilldown event from legend item click event handler. In the example the drilldown is triggered when clicking on a pie slice but clicking on a legend item will show/hide the slice.

I'm trying to asynchronously load the data for an item.

An example of the drilldown handler:

  drilldown: function(e) {
      console.log(".....", "on drilldown item", e, this);
      var chart = this
      , serieData = [];
      if (!e.seriesOptions) {
        chart.showLoading('Loading ...');
        setTimeout(function() {
          chart.addSeriesAsDrilldown(e.point, {
            name: 'Some sub item',
            colorByPoint: true,
            data: [{
              name: 'bla',
              y: 56.33
            }, {
              name: 'da da',
              y: 24.03,
              drilldown: true
            }, {
              name: 'ba ba ba',
              y: 10.38,
              drilldown: true
            }]
          });
          chart.hideLoading();
        }
        , 10);
      }
    }
  }

And the legend item handler:

  point: {
      events: {
        legendItemClick: function(e) {
          console.log(".....", "clicked legend item", e, this);
          //in drilldown chart = this but how can I get it here?
          //in drilldown e has seriesOptions, not this e
          //in drilldown e has point, not this e
          return false;
        }
      }
    }
  }

• javascript
• highcharts

Share Improve this question Follow asked Nov 27, 2015 at 3:53 HMRHMR 39.4k2525 gold badges9898 silver badges174174 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You can trigger the drilldown from legendItemClick by calling target's Highcharts click event.

pie: {
    showInLegend: true,
    point: {
      events: {
        legendItemClick: function(e) {
          if (e.target.drilldown != undefined) {
            e.target.hcEvents.click[0]();         
          } else {
            return false;
          }    
        }
      }
    }
  }

Example: http://jsfiddle/ueetz0b6/8/

You have to check to see if the target has drilldown, or the call will fail. If you don't call the click event, you then need to return false, or it will trigger the default legend click behavior.

EDIT: This was tested in Highcharts 4.2.3. It may not work in older versions.

From version 4.2.0 (Highcharts.version) you can use friggle's answer

Not sure what e.seriesOptions is supposed to be or where it is but will try to figure it out when I have more time.

I used the following:

pie: {
    showInLegend: true,
    point: {
      events: {
        legendItemClick: function(e) {
          console.log(".....", "clicked legend item", e, this);
          //in drilldown chart = this but how can I get it here:
          var chart = $('#container').highcharts();//<=calling without parameters
                                                   //causes it to return the chart
          //in drilldown e has seriesOptions, not this e (ignoring now)
          //in drilldown e has point, not this e
          drilldownHandler.call(chart,{point:e.target});
          return false;
        }
      }
    }
  }