Highcharts: Datalabels outside when unsufficient space inside, using Google spreadsheets - google-sheets

Question

I am making bar charts using Highcharts and Google spreadsheets. I want to place the datalabels inside the bars, but sometimes the value is so small that the label won't fit nicely inside the bar, so in these cases, I want to place them outside of the bar. I know this can be done, as shown here: https://jsfiddle.net/o3cujptj/
But when I try to use this method with my chart, that uses Google sheets to get its data, it doesn't work, as chart.series[0].data returns empty. How can I make this work?
My js fiddle : https://jsfiddle.net/jmunger/sLk8nmo6/2/
const chart = Highcharts.chart('container', {
plotOptions: {
bar: {
dataLabels: {
x: -5,
align: 'right',
style: {
textOutline: 0
},
shadow: false,
borderWidth: 0,
inside: true,
enabled: true,
pointFormatter: function() {
return Highcharts.numberFormat(this.point.y, 0);
},
//format: 'n = {point.label}'
}
}
},
chart: {
events: {
load: function() {
const chart = this,
points = chart.series[0].data,
options = {
dataLabels: {
inside: false,
style: {
color: 'black'
}
}
};
points.forEach(function(point) {
if (point.shapeArgs.height < 30) {
point.update(options, false);
}
});
chart.redraw();
}
}
},
data: {
googleSpreadsheetKey: '1D0v11GK07TJu6fXcwbcofiPOo4FmRpATGBAaSBqNlZE',
googleSpreadsheetWorksheet: 3,
endColumn: 3,
seriesMapping: [{
color: 2,
label: 3 // Labels are pulled from column 2 and picked up in the dataLabels.format below
}],
complete: function (options) {
//?? anything to do here?
}
},
series: [{
dataLabels: {
inside: true,
enabled: true,
style: {
color: 'white'
}
},
type: 'bar'
}]
});
Option 2: Or upload your JavaScript file
Indentation level:
Brace style:
BEAUTIFY JAVASCRIPT BEAUTIFY JAVASCRIPT IN NEW WINDOW
Beautified JavaScript:
const chart = Highcharts.chart('container', {
plotOptions: {
bar: {
dataLabels: {
x: -5,
align: 'right',
style: {
textOutline: 0
},
shadow: false,
borderWidth: 0,
inside: true,
enabled: true,
pointFormatter: function () {
return Highcharts.numberFormat(this.point.y, 0);
},
//format: 'n = {point.label}'
}
}
},
chart: {
events: {
load: function () {
const chart = this,
points = chart.series[0].data,
options = {
dataLabels: {
inside: false,
style: {
color: 'black'
}
}
};
points.forEach(function (point) {
if (point.shapeArgs.height < 30) {
point.update(options, false);
}
});
chart.redraw();
}
}
},
data: {
googleSpreadsheetKey: '1D0v11GK07TJu6fXcwbcofiPOo4FmRpATGBAaSBqNlZE',
googleSpreadsheetWorksheet: 3,
endColumn: 3,
seriesMapping: [{
color: 2,
label: 3 // Labels are pulled from column 2 and picked up in the dataLabels.format below
}],
complete: function (options) {
//?? anything to do here?
}
},
series: [{
dataLabels: {
inside: true,
enabled: true,
style: {
color: 'white'
}
},
type: 'bar'
}]
});

Answer 1

The load event is fired when the chart is finished loading - not data.
You can use redraw or render event, which are called after data is loaded.
let allowChartUpdate = true;
const chart = Highcharts.chart('container', {
chart: {
events: {
render: function() {
const chart = this,
points = chart.series[0].points,
options = {...};
if (points.length && allowChartUpdate) {
allowChartUpdate = false;
points.forEach(function(point) {
if (point.shapeArgs.height < 30) {
point.update(options, false);
}
});
chart.redraw();
}
}
}
},
...
});
Live demo: https://jsfiddle.net/BlackLabel/tn98gwmj/
API Reference: https://api.highcharts.com/highcharts/chart.events.render