Can the color of the data label be different inside and outside the panel in Highchart

Question

I'm curious that the color of the text that is inside the histogram (plotOptions.bar.dataLabels.color) may be different if the text is not suitable for the length of the bar. For instance:

The code is here:

$(function () {
$('#container').highcharts({
    chart: {
        type: 'bar',
        height: 700
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    plotOptions: {
        bar: {
            stacking: 'normal',
            pointPadding: 0,
            groupPadding: 0.2,
            dataLabels: {
                enabled: true,
                color: 'black',
                align: "right",
                format: '{y} M',
                inside: false,
                style: {
                    fontWeight: 'bold'
                },
                verticalAlign: "middle"
            },
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 2.33]
    }]
});

});

Thanks in advance

Answer 1

A possible solution is to use formatting. Determine if the value is below a certain level, and then change the color of the data. For example: http://jsfiddle.net/Yrygy/176/

                formatter: function() {
                    var max = this.series.yAxis.max,
                        color =  this.y / max < 0.05 ? 'black' : 'white'; // 5% width
                    return '<span style="color: ' + color + '">' + this.y + ' M</span>';   
                },

You can also compare the width of the dot with the length of the y-value string.

Answer 2

I use the value of isInside like this:

 series: [{
   name: 'Percentage',
   data: this.calculateChartSeries(),
   dataLabels: {
     enabled: true,
     rotation: 0,
     align: 'right',
     borderWidth: 1,
     formatter: function() {
       if (this.point.isInside == true) {
         return '<span style="color: white">' + this.y + '%</span>';
       } else {
         return '<span style="color: black">' + this.y + '%</span>';
       }
     }
   }
 }]

Run code

, "this.point.shapeArgs.height" , , .

Answer 3

You can set the contrastcolor, and it will change depending on whether the dataLabel is inside / outside the panel.

style: {
    color: 'contrast'
}