Label Y-Axis stops in Highcharts solid gauges - highcharts

Question

I have a solid gauge that looks like this: https://jsfiddle.net/fb5Ltxbt/
These are the requirements I've achieved thus far:
Gauge range of 0 to 50
If value < 40, show in red, else in green
Display major ticks
This is what I want to add if it's possible:
Something to indicate Y-Axis stops as defined in the code
In other words, what I want is to ADD something like the "250" indicator from the following image:
It doesn't have to be an additional number, just something, anything, that marks each stop.
JSFiddle source code below:
var gaugeOptions = {
chart: {
type: 'solidgauge',
backgroundColor: null
},
title: null,
pane: {
center: ['35%', '75%'],
size: '100%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: 'white',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
// Add something to indicate each of these stops
stops: [
[0.8, 'red'],
[1.0, 'green']
],
lineWidth: 0,
tickInterval: 10, // Keep the labels for these ticks
minorTickInterval: 2.5,
title: null,
labels: {
y: -5,
style: {
'color': 'black',
'fontWeight': 'bold'
}
}
}
};
var chart = Highcharts.chart('chartContainer', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 50,
title: null
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'ABC',
data: [30],
dataLabels: {
formatter: function() {
return this.point.y;
},
y: -20,
style: {
textShadow: false,
'color': 'black',
'fontSize': '2em'
},
borderWidth: 0
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div style="width: 1024px; height: 768px; margin: 0;">
<div id="chartContainer"></div>
</div>
I have seen how to make specific labels outside gauge chart but it requires all normal ticks to be removed. I'd don't want them to be removed if possible but please say so if what I want is not possible too, thanks!

Answer 1

You can an additional yAxis to achieve additional ticks. The additional axis should be linked to the main axis. Then, it has the same scale as the main axis and you gain control over additional, independent ticks - you define specific ticks via tickPositions.
{
linkedTo: 0,
lineWidth: 0,
minorTickLength: 0,
tickPositions: [35],
tickLength: 75,
labels: {
x: 30,
y: -30,
style: {
fontSize: '25px'
}
}
}]
Live example and output
https://jsfiddle.net/ym2tvzy7/
If you want ticks with different color and styles, you can add more axes.
https://jsfiddle.net/ym2tvzy7/1/

Answer 2

If i understand your requirements correctly
May be this will help not exactly as your requirement anyway as an alternative
You can also try :-
plotBands: [{
from: 39.5,
to: 40.5,
color: '#55BF3B' // green
}]
var gaugeOptions = {
chart: {
type: 'solidgauge',
backgroundColor: null
},
title: null,
pane: {
center: ['35%', '75%'],
size: '100%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: 'white',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.8, 'red'],
[1.0, 'green']
],
lineWidth: 0,
tickInterval: 10,
minorTickInterval: 2.5,
title: null,
labels: {
y: -5,
style: {
'color': 'black',
'fontWeight': 'bold'
}
}
}
};
var chart = Highcharts.chart('chartContainer', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 50,
title: null,
plotBands: [{
from: 0,
to: 40,
color: '#55BF3B' // green
}]
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'ABC',
data: [31],
dataLabels: {
formatter: function() {
return this.point.y;
},
y: -20,
style: {
textShadow: false,
'color': 'black',
'fontSize': '2em'
},
borderWidth: 0
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div style="width: 1024px; height: 768px; margin: 0;">
<div id="chartContainer"></div>
</div>