Highcharts: Is it possible to show Sunburst legend similar to Pie chart legend?

问题

Currently, on enabling the legend of sunburst chart in Highcharts, single series label is seen in legend. Refer following JSFiddle: http://jsfiddle.net/amrutaJgtp/7r8eb5ms/6/

Highcharts pie chart legend shows the all the category labels in the legend. Refer following Pie chart legend: http://jsfiddle.net/amrutaJgtp/wgaak302/

series: [{
name: 'Sales',
colorByPoint: true,
showInLegend: true,
data: [{
  name: 'Consumer',
  y: 2455
}, {
  name: 'Corporate',
  y: 6802
},{
  name: 'Home office',
  y: 9031
}, {
  name: 'Small Business',
  y: 5551
}]
}]

Is it possible to show all the data points of the sunburst series or atleast the categories - Consumer, Corporate, Home Office, Small Business in legend?

回答1:

In my opinion the answer is no.

Please refer to this demo: http://jsfiddle.net/kkulig/u3p1usz9/

I tried to implement this functionality by setting legendType = 'point' (not docummented in the API, but it works) and overwriting H.Legend.prototype.getAllItems, but it seems that hiding points is not supported for sunburst. There's no method that will do it - check out the console.log output. Switching visibility of the point by using visible property doesn't work either. Legend behaves properly, but there's no effect on the plot area.

Workaround

This simple example shows how to mimic desired legend behavior: http://jsfiddle.net/kkulig/kn10kb7L/

First I added additional two series that have no data:

{
  type: 'line',
  name: 'p1',
  color: 'blue'
}, {
  type: 'line',
  name: 'p2',
  color: 'blue'
}

The color of the legend item markers needs to be handled manually by setting the color of the 'fake' series. I created visible flag for every leaf for controlling its visibility. Then I used their legendItemClick callback function to filter the full data set and perform setData on the first series using the filtered data.

    legendItemClick: function(e) {
      series = this;
      data.forEach(function(leaf) {
        if (leaf.id === series.name || leaf.parent === series.name) {
          leaf.visible = !leaf.visible;
        }
      });
      this.chart.series[0].setData(data.filter((leaf) => leaf.visible));
    }

API reference: https://api.highcharts.com/highcharts/plotOptions.sunburst.point.events.legendItemClick

If you think that hiding points should be implemented in sunburst series you can share this idea here: https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api

Update

If you want an animation to happen use addPoint and removePoint instead of setData.

API references: