# Gauge chart with steps of colors

How can I achieve this using highcarts? tired using stops:[...] but it will not work as above image.

``````yAxis: {
min: 0,
max: 100
},
series: [{
name: 'customers',
data: [{
color: {
//
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0},
stops: [
[0.1, '#009a60'],
[0.2, '#4aa84e'],
[0.3, '#92b73a'],
[0.4, '#c6bf22'],
[0.5, '#edbd02'],
[0.7, '#ff8c00'],
[0.8, '#fc6114'],
[0.9, '#f43021'],
[1.0, '#ed0022']
]
},
y:76
}],
dataLabels: {
format: '<div class="prc" style="text-align:center;"><span style="font-weight:normal; font-family:Helvetica Neue, Helvetica, Arial; font-size:52px;' +
'#333' + '">{y}</span>'
}
}]
``````

One way of getting this char could be to use axis line and ticks to cover a chart to create white spaces. Next you could add more points and set stops with a color format that is not supported for a gradient - like hex color format with 3 digits (`"#rgb"`).

``````\$(function() {

var rawData = 94,
data = getData(rawData);

function getData(rawData) {
var data = [],
start = Math.round(Math.floor(rawData / 10) * 10);
data.push(rawData);
for (i = start; i > 0; i -= 10) {
data.push({
y: i
});
}
return data;
}

Highcharts.chart('container', {
chart: {
type: 'solidgauge',
marginTop: 10
},

title: {
text: ''
},

subtitle: {
text: rawData,
style: {
'font-size': '60px'
},
y: 200,
zIndex: 7
},

tooltip: {
enabled: false
},

pane: [{
startAngle: -120,
endAngle: 120,
background: [{ // Track for Move
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
borderWidth: 0,
shape: 'arc'
}],
size: '120%',
center: ['50%', '65%']
}, {
startAngle: -120,
endAngle: 120,
size: '95%',
center: ['50%', '65%'],
background: []
}],

yAxis: [{
min: 0,
max: 100,
lineWidth: 2,
lineColor: 'white',
tickInterval: 10,
labels: {
enabled: false
},
minorTickWidth: 0,
tickLength: 50,
tickWidth: 5,
tickColor: 'white',
zIndex: 6,
stops: [
[0, '#fff'],
[0.101, '#0f0'],
[0.201, '#2d0'],
[0.301, '#4b0'],
[0.401, '#690'],
[0.501, '#870'],
[0.601, '#a50'],
[0.701, '#c30'],
[0.801, '#e10'],
[0.901, '#f03'],
[1, '#f06']
]
}, {
pane: 1,
lineWidth: 5,
lineColor: 'white',
tickPositions: [],
zIndex: 6
}],

series: [{
animation: false,
dataLabels: {
enabled: false
},
borderWidth: 0,
color: Highcharts.getOptions().colors[0],
``````<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>