Search code examples
javascripthighchartssunburst-diagram

Highcharts Sunburst custom legend and click functionality

Sunburst custom legend and click functionality I have a big set of data on sunburst and I want to show level 2 as legend on the right. Since I know the values, I made a custom legend with all level 2 data made it as links. But I'm not getting the color codes for all levels.

I used var colors = Highcharts.getOptions().colors;

But I'm getting only a few color codes.

  1. How to get full color codes used in the graph as it is ?

  2. And when I click on that legend, I want to show only that level and its sub levels in the graph. (the same default functionality that is available in the graph). How can I do this ?

Please help

Solution

    1. I added a color variable into your code:

      const color = i >= colors.length ? colors[i - colors.length] : colors[i];

    Demo: http://jsfiddle.net/BlackLabel/qb7ckxwn/

    1. Here is an approach how to trigger the drill down in the sunburst on the outstanding element:

      document.getElementById('btn').addEventListener('click', function(){
chart.series[0].points.forEach(d => {
    if (d.name === 'Asia') {
        chart.series[0].setRootNode(d.id, true, { trigger: 'click' })
    }
})

      })

    Demo: https://jsfiddle.net/BlackLabel/t7pghmxd/