I want to show the value between the green and yellow and red plotBands.
in the example attached i want to show the values 135,172 (where the color are changing)
yAxis: {
min: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 135,
color: '#55BF3B' // green
}, {
from: 135,
to: 172,
color: '#DDDF0D' // yellow
}, {
from: 172,
to: 200,
color: '#DF5353' // red
}]
},
You can use tickPositioner
function to define which ticks will be shown on the chart:
tickPositioner: function() {
var plotBands = this.options.plotBands,
ticks = [],
i = 0;
for (i; i <= 200; i += 20) {
ticks.push(i);
}
for (i = 0; i < plotBands.length - 1; i++) {
ticks.push(plotBands[i].to)
}
return ticks;
}
Live demo: https://jsfiddle.net/BlackLabel/1kpt7dws/
API: https://api.highcharts.com/highcharts/yAxis.tickPositioner