Highcharts solidgauge 弧形，5 种不同的纯色（无渐变）

Question

I have used a solid-gauge high chart arc shape in Y-axis stops I want to use 5 different colors like

0 to 39 - #B31700
40 to 64 - #F22808 
65 to 79 - #F98928 
80 to 89 - #F3C50B 
90 to 100 - #27aae1

Problem is when giving the data like 90 the color is so much invisible of given color when the value is increase above to 95 or 97 or 100 then the actual color comes in chart.

Please help me out how can I get the proper color in the starting of a stops in y axis.

Here is my example with fiddle:

https://jsfiddle.net/9jsp08v7/1/

Answer 1

Try to use the dataClasses feature instead of stops .

yAxis: [{
  ...,
  dataClasses: [{
    from: 0,
    to: 39,
    color: '#B31700'
  }, {
    from: 39,
    to: 64,
    color: '#F22808'
  }, {
    from: 64,
    to: 79,
    color: '#F98928'
  }, {
    from: 79,
    to: 89,
    color: '#F3C50B'
  }, {
    from: 89,
    to: 100,
    color: '#27aae1'
  }]
}],

Demo: https://jsfiddle.net/BlackLabel/vxgda85y/

Answer 2

At last I have found a solution.

Here is the fiddle link:

stops: [
    [39 / 100, '#B31700'],
    [40 / 100, '#F22808'],
    [64 / 100, '#F22808'],
    [65/100, '#F98928'],
    [79/100, '#F98928'],
    [80/100, '#F3C50B'],
    [89/100, '#F3C50B'],
    [90/100, '#27aae1'],
    [100/100, '#27aae1']
  ]

https://jsfiddle.net/avdq5rf6/1/