Value or Logic Dependent Data Label format in Highcharts - highcharts

Question

Is there a solution in Highcharts to format a Label depending on the value?
I know there are color zones option for the dependent formatting of columns based on the value of the data. For example, if the value is bigger than 10 the column turns red, else remains the base color.
I need to get very similar function on the dataLabels. If the value is bigger than 10 turn the label background to red. If this is possible do exist a solution to dynamically get this specific value from the data series, or only can be/ should be a static setting?
Values bigger than 100 should have red dataLabel background color, and the rest (smaller) green background color:
https://jsfiddle.net/saboarpad/6bow3mx1/3/
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
backgroundColor:'red',
color:'white'
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});

Answer 1

You can edit data labels style after they have been generated:
chart: {
events: {
load: function() {
var points = this.series[0].points;
points.forEach(function(point) {
if (point.y > 100) {
point.dataLabel.text.css({
'color': 'white',
'background-color': 'red'
});
}
});
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/h64gjL2t/
Also, you can individually format dataLabel for each point: https://jsfiddle.net/BlackLabel/4k8p6mfg/
series: [{
data: [{
x: 0,
y: 29.9,
dataLabels: {
backgroundColor: 'red',
color: 'white'
}
},
71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4
]
}]
API: https://api.highcharts.com/highcharts/series.line.data.dataLabels

Answer 2

I find a similar solution, but not clear the use of the code.
In the dataLabels nod there is this "formatter" function which defines the color code based on the this.y value, so here We can do some compare of data: which one is bigger or smaller, and the function returns the color code and concatenates into a HTML span elements inline style.
However, everything is work until is use the plain "color" tag, but this is for the color of the fonts. I needed to change the a background as well. So I changed the color tag to:
1. Highcharts own tag: "backgroundColor" -- nothing happens
2. HMTL back ground color tag: "background-color" -- nothing happens
:( Im feel kind of lost.
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
color: 'blue',
formatter: function() {
var color = this.y > 100 ? 'red': 'green'
return '<span style="color: ' + color + '">' + this.y + '</span>';
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});