score:4

I use the "isInside" value like so:

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

But if that doesn't work for you, it's possible to use "this.point.shapeArgs.height" and check if that height is greater than the length of your text.

score:4

You can set the color to contrast, and it will change depending on whether the dataLabel is inside/outside the bar.

style: {
    color: 'contrast'
}

score:5

Possible solution is to use formatter. Determine if value is lower than some level, and then change dataLabel color. 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 point's width with length of y-value string.


Related Query

More Query from same tag