score:4

Accepted answer

Use the formatter callback function to include logic in the label text like this:

dataLabels: {
  formatter: function() {
    let color = ''
    if (this.y > 50) {
      color = '#55BF3B' //green
    } else if (this.y > 10) {
      color = '#DDDF0D' //yellow
    } else {
      color = '#DF5353' //red
    }
    return '<div style="margin-top: -15.5px; text-align:center"><span style="font-size:10px;color:' + color + '">' + this.y + '</span><br/>' + '</div>'
    },
  }

Working JSFiddle example: http://jsfiddle.net/ewolden/x6j1ywdb/


If you want the dataLabel to be a gradient, you can implement (or borrow) a gradient function, such as this one: Programmatically Lighten or Darken a hex color (or rgb, and blend colors)

Working JSFiddle example: (with gradient dataLabels): http://jsfiddle.net/ewolden/x6j1ywdb/12/


Related Query

More Query from same tag