Highcharts Angular - Sunburst implementation

Question

Im trying to implement a sunburst chart where i have two different data sources. I have an example of what im trying to achive in the below codesandbox.

https://codesandbox.io/s/pedantic-visvesvaraya-1vsoh?fontsize=14&hidenavigation=1&theme=dark

Im not sure if this is the right way to implement this. Please correct me if im wrong. The datasource changes the first time, but doesnt work the second time. Also, i noticed that when i drill down with one data source and then change the data source to another one(without pressing back button), it errors out and acts weird.

Any kind of help would be much appreciated. Do let me know if you need more info. Thanks in advance!

Answer 1

Highcharts for performance modify the original data array, so for example return the data from a function to create a deep copy of data for every update.

To prevent the problem with drilldown use an internal drillUp method to go back to the highest level before changing the data.

getDataSource1 = () => [ ... ];
getDataSource2 = () => [ ... ];

...

doDrillUp(){
    const chart = this.chart;
    if (chart) {
        const series = chart.series[0] as any;
        const mainRootNode = series.tree.children[0].id;

        while (series.rootNode !== mainRootNode) {
            series.drillUp();
        }
    }
}

changeData1() {
    this.doDrillUp();
    this.sunburstData = this.getDataSource1();
    this.loadChart(); 
}

changeData2() {
    this.doDrillUp();
    this.sunburstData = this.getDataSource2();
    this.loadChart();
}

---

Live demo: https://codesandbox.io/s/clever-fog-1x84b?file=/src/app/sunburst/sunburst.component.ts