I am trying to update the Sunburst chart series on the change of dropdown. But my chart data series is not updating. Right now When I am trying to update the chart just the tooltip is getting updated chart is not redrawing. Below is my code and JS fiddle demo URL: https://jsfiddle.net/n0y87osa/6/
var options = {
chart: {
height: '70%',
// type: 'sunburst'
renderTo: 'container'
},
plotOptions: {
sunburst: {}
},
series: [{
type: "sunburst",
name: 'Root',
data: data,
point:{
events:{
click: function (event) {
alert(this.name);
}
}
},
allowDrillToNode: true,
cursor: 'pointer',
dataLabels: {
style: {
fontSize: "12px",
//color: "#515151",
fontWeight: 'normal !important',
fontFamily: "'Open Sans', sans-serif",
textOutline : 0,
color: '#fff'
},
},
levels: [{
level: 1,
levelIsConstant: false,
dataLabels: {
filter: {
property: 'outerArcLength',
operator: '>',
value: 64
},
},
},{
level: 2,
dataLabels: {
rotationMode: 'parallel'
}
}, {
level: 3,
colorVariation: {
key: 'brightness',
to: -0.4 //Tells the gradation extent
}
}]
}],
tooltip: {
shared: true,
}
};
var chart = new Highcharts.Chart(options);
$('#type_').on('change',function(){
alert(this.value);
chart.series[0].setData(data2);
chart.redraw()
});
Issue reproduced in a minimal live example: https://jsfiddle.net/BlackLabel/qrhpsbx5/
Error in console: Uncaught TypeError: Cannot read properties of undefined (reading 'x')
The problem occurs because you are incorrectly using the index property in your data. Highcharts uses index from data also to calculate the length of data, which is causing incompatibilities during data updates.
As a solution, you can change the name of the property:
var data2 = [{
id: '0.0',
parent: '',
name: 'KSE ALL',
customIndex: 32819
}, ...];
or store it in custom:
var data2 = [{
id: '0.0',
parent: '',
name: 'KSE ALL',
custom: {
index: 32819
}
}, ...];
Live demo: https://jsfiddle.net/BlackLabel/xnespquj/
API Reference: https://api.highcharts.com/highcharts/series.sunburst.data.custom
I did destroy the chart and redraw it with updated data series.
var chart;
function sunBurstChart (data1){
var options = {
chart: {
height: '70%',
// type: 'sunburst'
renderTo: 'container'
},
series: [{
type: "sunburst",
name: 'Root',
data: data1,
point:{
events:{
click: function (event) {
alert(this.name);
}
}
},
allowDrillToNode: true,
cursor: 'pointer',
dataLabels: {
/**
* A custom formatter that returns the name only if the inner arc
* is longer than a certain pixel size, so the shape has place for
* the label.
*/
style: {
fontSize: "12px",
//color: "#515151",
fontWeight: 'normal !important',
fontFamily: "'Open Sans', sans-serif",
textOutline : 0,
color: '#fff'
},
},
levels: [{
level: 1,
levelIsConstant: false,
dataLabels: {
filter: {
property: 'outerArcLength',
operator: '>',
value: 64
},
style: {
fontSize: "12px",
//color: "#515151",
fontWeight: 'normal !important',
fontFamily: "'Open Sans', sans-serif",
textShadow: false ,
backgroundColor: 'rgba(255, 255, 255, 1)',
},
},
},{
level: 2,
dataLabels: {
rotationMode: 'parallel'
}
}, {
level: 3,
colorVariation: {
key: 'brightness',
to: -0.4 //Tells the gradation extent
}
}]
}],
chart = new Highcharts.Chart(options);
}
sunBurstChart(data);
$('#type_').on('change',function(){
// alert(this.value);
chart.destroy();
sunBurstChart(data2);
chart.redraw();
});