Looking to create a dynamic sunburst highchart that displays three levels at a time while allowing interactive drilling. For instance, if there are 5 levels, the chart should initially show the first three levels. When clicking on level 3, levels 2, 3, and 4 should be displayed, and so on.
Below is the AngularV8 implementation:
.html file
<div class="kt-widget14__chart" style="min-height:300px;">
<div class="chartjs-size-monitor-new">
<highcharts-chart [Highcharts]="highcharts" [options]="company360SunburstOptions"
style="width: 100%; height: 100%; display: block;">
</highcharts-chart>
</div>
</div>
.ts file
this.myService.getData().subscribe(result => {
this.chartOptions.series[0].data = result;
this.chartOptions.series[0].point = {
events: {
click: (function (event) {
that.poinClicked(data);
})
}
};
});
chartOptions = {
chart: {
type: "sunburst",
height: '100%',
},
credits: {
enabled: false
},
exporting: { enabled: false },
title: {
text: ''
},
subtitle: {
text: ''
},
plotOptions: {
series: { // or general options: "series: { ... }"
dataLabels: {
format: '{point.name}',
filter: {
property: 'innerArcLength',
operator: '>',
value: 16
},
enabled: true,
style: {
textShadow: false
}
},
animation: false
}
},
series: [{
type: "sunburst",
data: [],
allowDrillToNode: true,
cursor: 'pointer',
point: {},
levels: [{
level: 1,
levelSize: {
units: 'percentage',
},
hidden: false,
dataLabels: {
enabled: true
}
}, {
level: 2,
hidden: false,
dataLabels: {
enabled: true
}
}, {
level: 3,
hidden: true,
dataLabels: {
enabled: false
},
levelSize: {
value: 0
}
}, {
level: 4,
hidden: true,
dataLabels: {
enabled: false
},
levelSize: {
value: 0
}
}]
}],
tooltip: {
enabled: false
}
};
pointClicked() {
let level = data['Level'];
level = level + 1;
if (level == 1) {
this.sunburstShowLevels([1,2])
} else if (level == 2) {
this.sunburstShowLevels([1,2,3])
} else if (level == 3) {
this.sunburstShowLevels([2,3,4])
}
}
sunburstShowLevels(levelIdList) {
// Will get a list of levelIds that should be display
let levels = this.chartOptions.series[0].levels; // Whole levels object
let newLevels = [];
for (var index=0; index<levels.length; index++) {
var level = levels[index];
if (levelIdList.includes(level['level'])) {
// Then show it
level.hidden = false; // set flag
level['levelSize'] = {value: 1};
level['dataLabels'] = {enabled: true}
} else {
level.hidden = true; // set flag
level['levelSize'] = {value: 0};
level['dataLabels'] = {enabled: false}
}
newLevels.push(level);
}
}
Although the code works correctly in displaying the desired levels upon clicking, an issue arises where two clicks are required for the functionality to take effect. For example, when clicking on the second level, it initially shows only level 2 before displaying levels 1, 2, and 3 after the second click.
Challenge
In conclusion, the goal is to efficiently display specific levels upon each click without the need for multiple clicks to trigger the desired behavior. Seeking alternative suggestions or improvements to streamline this process. Grateful for any assistance.
Thank you in advance.