user3758133
user3758133

Reputation: 238

Get name of clicked point in Highcharts when the point has drilldown

I have a pie chart where one of the points have drilldown and the other points do not. When I detect a click using plotOptions.series.point.events.click and try to return the name of the clicked point, it works for every point except the one with drilldown.

If I do:

plotOptions: {
  series: {
    point: {
      events: {
        click: function(e) {
          console.log(this.name);
        }
      }
    }
  }
}

Then the proper name would show up for every point except the one with drilldown, which would return a null point. It might be because the graph updates first via drilldown and the point no longer exists when the event callback occurs. How can I make it so that both the regular points and drilldown points return properly when clicked?

I added a JSFiddle to illustrate my point: http://jsfiddle.net/Pq6gb/2/ I just took the pie drilldown example from Highcharts demo page and made it so that Firefox does not have a drilldown. Note in the browser's console that when I click Firefox, the name gets displayed. When I click any other slice, the displayed name is null.

Upvotes: 3

Views: 5248

Answers (2)

Torstein Hønsi
Torstein Hønsi

Reputation: 2197

This is fixed now in the current development version of drilldown.src.js: http://jsfiddle.net/highcharts/Pq6gb/3/

point: {
    events: {
        click: function(e) {
            console.log(e.type, this.name);
        }
    }
}

Upvotes: 7

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

Although not ideal, this would give you some event for regular and drilldown:

chart: {
    ...,
    events: {
        drilldown:  function (e) {
            console.log(e.point); // The point, with name, that was clicked
        }
    }
}

Along with your own code this would fire one event for regular points (your own code), and two events for drilldown points. You would then be able to check name == null in series.point.events.click, and ignore it, and handle it in chart.events.drilldown (API reference).

Upvotes: 5

Related Questions