Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/sunburst.src.js"></script>

<div id="container"></div>

JavaScript

var data = [{
  id: 'p1'
}, {
  id: 'p2'
}, {
  parent: 'p1',
  value: 5
}, {
  parent: 'p2',
  value: 3
}].map(function(i) {
  i.visible = true;
  return i;
});

var chart = Highcharts.chart('container', {
  chart: {
    type: 'sunburst'
  },

  plotOptions: {
    series: {
      events: {
        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));
        }
      }
    }
  },

  series: [{
      data: data.slice()
    },
    // series for creating the legend
    {
      type: 'line',
      name: 'p1',
      color: 'blue'
    }, {
      type: 'line',
      name: 'p2',
      color: 'blue'
    }
  ]


});