I am trying to set solid gauge chart to use defined colors for ranges using colorAxis dataClasses, but it isn't working. Not sure what I am doing wrong.
How should I define the colorAxis and dataClasses?
Please see http://jsfiddle.net/edob/27oc38L1 UPDATE!!! I've amended fiddle to use stops, and it worked for colors defined as red, green and not for hexadecimal colors! Try values like 51, 65 and 81
$(function() {
Highcharts.chart('container-cpu', {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'CPU'
}
},
colorAxis: {
dataClasses: [{
from: 0,
to: 50,
color: 'red'
}, {
from: 50,
to: 90,
color: 'green'
}, {
from: 90,
color: 'yellow'
}]
},
series: [{
name: 'HDD',
data: [70]
}]
});
});
I see default blue color for any value and I would expect to see green for value 70.
To color the value of a solidgauge you should use stops, like this:
yAxis: {
stops: [
[0.5, 'red'],
[0.9, 'green'],
[1, 'yellow']
],
min: 0,
max: 100,
title: {
text: 'CPU'
}
},
Solid gauge series only. Color stops for the solid gauge. Use this in cases where a linear gradient between a minColor and maxColor is not sufficient. The stops is an array of tuples, where the first item is a float between 0 and 1 assigning the relative position in the gradient, and the second item is the color.
Working JSFiddle example: http://jsfiddle.net/ewolden/c8qy4x5o/1/
API on stops: https://api.highcharts.com/highcharts/yAxis.stops
Since you said in a comment that you want to use solid colors, and not gradients; the following is one way you can implement that:
chart: {
type: 'solidgauge',
events: {
load: function() {
var currentValue = this.series[0].points[0].y;
var newColor = '';
console.log(currentValue)
if(currentValue < 50) {
newColor = 'red'
} else if(currentValue < 90) {
newColor = 'green'
} else {
newColor = 'yellow'
}
this.series[0].points[0].update({color: newColor}, true)
}
}
},
Working example: http://jsfiddle.net/ewolden/s9qrhtmb/
API on point.update: https://api.highcharts.com/class-reference/Highcharts.Point#update