show Sunburst legend similar to Pie chart legend? - Javascript highcharts

Javascript examples for highcharts:Pie Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Pie Chart

Description

show Sunburst legend similar to Pie chart legend?

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <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> 
      <script type="text/javascript">
var data = [{//from w w  w.j  a v a2  s.  com
  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'
    }
  ]
});

      </script>  
   </body>
</html>

Related Tutorials