HighCharts: How to format particular label column? - css

Question

I need to show the label values inside the Highcharts bar chart. It can be implemented using dataLabels.Formatter function.
But when the bar is in consist-able size the labels are shown inside the bar and it is looking good. In some cases, the bar is very small in size comparing to the label.
Please see the code pen here, https://codepen.io/JGSpark/pen/YzzBydv?editors=1010
The last bar is very small and 40 is showing outside. As the color: 'white' is commonly used for all the labels it is showing in white though it is in outside.
How can I change the color of the label if it is showing out?
In this example, I need to change the color of label 40 to black. Any suggestions?

Answer 1

You need to add custom formatter which will check the size of yAxis value and will change the color of label accordingly:
formatter: function() {
var max = this.series.yAxis.max,
color = this.y / max < 0.05 ? 'black' : 'white'; // 5% width
return '<p style="color: ' + color + '">' + this.y + ' M</p>';
},

Answer 2

If your chart is not a dynamically created you can set the dataLabels.color for the particular point.
{
y: 40,
dataLabels: {
color: 'black'
}
}
Demo
API
EDIT
Another solution which I can suggest is to add a functionality inside the chart.events.load which will filter if dataLabels is aligned to left or right and set wanted color - it will work if more labels will be outside the column bar.
events: {
load() {
let chart = this,
series = chart.series;
series[0].points.forEach(p => {
if (p.dataLabel.alignOptions.align === 'left') {
p.dataLabel.css({
color: 'black'
})
}
})
}
}
Demo
API