score:1

Accepted answer

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

score:0

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]
}]

});


Related Query

More Query from same tag