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/
Source: stackoverflow.com
Related Query
- How to change Highcharts xAxis label color individually?
- Update color of plotline label on change highcharts
- highcharts pie dynamic label inside and outside for each slice
- highcharts pie chart color for dynamic data
- highcharts.js - Dynamic Label Color
- Highcharts display label for pie chart using html table as data source
- Setting color on label gridline Highcharts
- Dynamic quadrant label positions with Highcharts
- Highcharts Dynamic Column color based on data comparison
- how to get dynamic color change based on values in highcharts
- dynamic marker color highcharts
- Highcharts - dynamic data label positioning on multi series doughtnut charts
- highcharts dynamic background color issue
- Highcharts Pie dynamic series color
- Highcharts Set data label border color for each pie slice
- Highcharts - Assign a color to a specific value when data is dynamic
- Highcharts - how to have a chart with dynamic height?
- Fixed y-axis label width in Highcharts
- Highchart - change color of one x-axis label only
- Changing series color in highcharts dynamically
- How to change the text color in Highcharts
- Highcharts area fillOpacity do not work when changing the color
- Highcharts Change Bar Color Based on Value
- Highcharts dynamically change bar color based on value
- HighCharts - How to create dynamic chart that exports EVERYTHING
- How do I format x-axis label in highcharts
- Highcharts - set maximum range for yAxis but keep axis dynamic within that range
- Highcharts dynamic (re-)sizing in AngularJS tabs
- Highcharts graph X-axis label for different date ranges
- how to set dynamic data in highcharts
More Query from same tag
- How to force HighChart xAxis units to show custom format in all zoom levels?
- JSON-Object as string: Use of concat(), eval() and/or JSON.parse()?
- FusionCharts vs GoogleCharts vs HighCharts suggestions required for commercial use
- Highcharts pie chart size doesn't fill smaller containers even with dataLabels disabled
- Highcharts draw (and remove) glyphs on the chart
- Highcharts 3D pie with custom colors
- Highcharts: what is the difference between event.target and event.currentTarget
- Setting options.rangeSelector.selected to 0 does not set zoom to correct level in highstock
- Highcharts/Highstock How to show original OHLC values in tooltip for chart drawn using adjusted OHLC values?
- Opacity Highcharts pie chart IE8
- How to Multiply two arrays and dynamically plot into HighCharts?
- Live data from MySQL with highchart
- Highcharts Node.js export server : Connection error
- JSON data not showing in highstock Candlestick chart using PHP & MYSQL
- Highstock Make a conditional tooltip
- Highcharts Triple Drilldown Round Corners Plugin Bug
- highchart: "grouped categories" mutil categorie show not beautiful
- is it possible to create Highchart polar chart which has x-axis at center rather than at circumference
- dynamic spline highchart from database
- HIghcharts xAxis labels out of order
- displaying entire value on the y-axis in highcharts when the range between the intervals are high
- HighCharts how to add live series data set to existing chart
- Highcharts csv data loading
- while working with network chart, is there any why to color the common node with two different colors.?
- Ajax dynamic data with column bar chart
- Highchart doesn't show series group in IE8
- Showing tooltip on right side of the column in a vertical bar chart
- Uncaught TypeError: Cannot set property 'custom/world' of undefined
- Highcharts - Issue with showing and hiding plot lines and bands on legendItemClick
- How to add flags to countinuous update angular highcharts