Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

<div id="container1"></div>
<div id="container2"></div>

JavaScript

var data = [{
            id: 'START',
            name: 'START'
          },
          {
            id: 'One',
            name: 'One',
            parent: 'START'
          },
          {
            id: 'OneOne',
            name: 'OneOne',
            parent: 'One',
            value: 30
          },
          {
            id: 'OneTwo',
            name: 'OneTwo',
            parent: 'One',
            value: 70
          }
        ];
        var chart1;
        var chart2;

        $(document).ready(function() {

          chart2 = Highcharts.chart('container2', {
            series: [{
              type: "sunburst",
              data: data,
              allowTraversingTree: true
            }]
          });


          chart1 = Highcharts.chart('container1', {
            series: [{
              type: "sunburst",
              data: data,
              allowTraversingTree: true,
              point: {
                events: {
                  click: function() {
										console.log(this)
                    chart2.series[0].setRootNode(this.id)
                  }
                }
              }
            }]
          });

        })