Highcharts datalabels getting scrambled on drilldown - highcharts

Question

This is a follow-up issue I'm having to this answered problem. I needed help with keeping series grouped together, but spaced apart between categories. I've added drilldown to the chart, and there is an issue with the datalabels when drilling down - they don't center over the columns anymore. The more you drill up and down, the more off they become. I've figured out the reason has to do with resetting the category names, although I have no idea why or what to do about it. But in the drilldown event, if you comment out where the categories are getting reset, the datalabels are centered again.
Here's a fiddle to show what I mean -- any suggestions?
var redrawEnabled = true;
var refChart = new Highcharts.chart('ctReferralsDetail', {
chart: {
backgroundColor: 'whiteSmoke',
type: 'column',
width: 800,
events: {
drilldown: function() {
refChart.xAxis[0].setCategories(["Ballard", "Butler", "Central", "Doss", "Iroquois", "Male", "Pleasure Ridge"]);
refChart.xAxis[0].update({
max: categoriesAA.length - 1
}, true);
this.update({
scrollbar: {
enabled: true,
}
}, false);
redraw(this);
},
drillupall: function() {
this.update({
scrollbar: {
enabled: false
}
}, false);
redraw(this);
},
render: function() {
redraw(this);
},
}
},
title: {
text: "# Referrals"
},
subtitle: {
text: 'subTitle'
},
xAxis: {
categories: ['Elementary 1', 'Elementary 2', 'Elementary 3', 'Middle', 'High'],
min: 0,
max: 4,
},
yAxis: [{
title: {
useHtml: true,
text: '<strong># Referrals</strong>'
}
}],
tooltip: {
shared: true,
},
plotOptions: {
column: {
borderRadius: 5,
dataLabels: {
enabled: true,
allowOverlap: true
},
grouping: false,
pointWidth: 45
}
},
series: [{
name: "2017-18",
data: [{
drilldown: 'py1',
y: 5513
}, {
drilldown: 'py2',
y: 5403
}, {
drilldown: 'py3',
y: 3132
}, {
drilldown: 'py4',
y: 12385
}, {
drilldown: 'py5',
y: 22679
}]
}, {
name: "2018-19",
data: [{
drilldown: 'cy1',
y: 5738
}, {
drilldown: 'cy2',
y: 4397
}, {
drilldown: 'cy3',
y: 3508
}, {
drilldown: 'cy4',
y: 10811
}, {
drilldown: 'cy5',
y: 22743
}]
}],
drilldown: {
allowPointDrilldown: false,
series: [{
name: "2017-18",
id: "py1",
data: [93, 41, 410, 84, 76, 120, 11, 525]
}, {
name: "2018-19",
id: "cy1",
data: [84, 48, 423, 78, 76, 123, 19, 502]
}]
}
})
function redraw(parm) {
var series = parm.series;
if (redrawEnabled) {
if (parm.chartWidth > 600) {
if (parm.options.plotOptions.column.grouping) {
redrawEnabled = false;
parm.update({
plotOptions: {
column: {
grouping: false
}
}
});
redrawEnabled = true;
}
series.forEach(function(s, i) {
s.points.forEach(function(p) {
if (i === 0) {
p.graphic.attr({
translateX: 25
});
p.dataLabel.attr({
translateX: p.dataLabel.translateX + 25
});
} else {
p.graphic.attr({
translateX: -25
});
p.dataLabel.attr({
translateX: p.dataLabel.translateX - 25
});
}
});
});
} else {
if (!parm.options.plotOptions.column.grouping) {
redrawEnabled = false;
this.update({
plotOptions: {
column: {
grouping: true
}
}
});
redrawEnabled = true;
}
}
}
}

Answer 1

In my opinion, you don't need your own function to position the columns as you did. The easiest solution is to remove the pointWidth and then set appropriate pointPadding and groupPadding to create greater space between categories. Then drilldown works as expected. Check demo I posted you below.
Code:
var refChart = new Highcharts.chart('ctReferralsDetail', {
chart: {
backgroundColor: 'whiteSmoke',
type: 'column',
width: 800
},
title: {
text: "# Referrals"
},
subtitle: {
text: 'subTitle'
},
xAxis: {
categories: ['Elementary 1', 'Elementary 2', 'Elementary 3', 'Middle', 'High'],
min: 0,
max: 4,
},
yAxis: [{
title: {
useHtml: true,
text: '<strong># Referrals</strong>'
}
}],
tooltip: {
shared: true,
},
plotOptions: {
column: {
borderRadius: 5,
dataLabels: {
enabled: true,
allowOverlap: true
},
groupPadding: 0.15,
pointPadding: 0.05
}
},
series: [{
name: "2017-18",
data: [{
drilldown: 'py1',
y: 5513
}, {
drilldown: 'py2',
y: 5403
}, {
drilldown: 'py3',
y: 3132
}, {
drilldown: 'py4',
y: 12385
}, {
drilldown: 'py5',
y: 22679
}]
}, {
name: "2018-19",
data: [{
drilldown: 'cy1',
y: 5738
}, {
drilldown: 'cy2',
y: 4397
}, {
drilldown: 'cy3',
y: 3508
}, {
drilldown: 'cy4',
y: 10811
}, {
drilldown: 'cy5',
y: 22743
}]
}],
drilldown: {
allowPointDrilldown: false,
series: [{
name: "2017-18",
id: "py1",
data: [93, 41, 410, 84, 76, 120, 11, 525]
}, {
name: "2018-19",
id: "cy1",
data: [84, 48, 423, 78, 76, 123, 19, 502]
}]
}
});
Demo:
https://jsfiddle.net/BlackLabel/7ok69jbq/1/