Highcharts Solid Gauge (Thermometer) ... Color from -30 to +60

Question

how I can the yAxis Stops values adjust so that the shows me different colors depending on the temperature value?

The best would be as follows:
-30 to 0 = blue
0 to 12 = light blue
12 to 25 = green
25 to 30 = orange
30 to 60 = red

Here my Code:

$(function () {
    var gaugeOptions = {
        chart: {type: 'solidgauge'},
        title: null,
        pane: {
            size: '90%',
            startAngle: -180,
            endAngle: 90,
            background: {
                backgroundColor: '#EEE',
                innerRadius: '95%',
                outerRadius: '100%',
                shape: 'arc'
                        }
            },
        tooltip: {enabled: false},
       
        // the value axis
        yAxis: {
            stops: [
                [0.1, '#00f'],
                [0.2, '#0f0'],
                [0.3, '#f00']
                   ],
            lineWidth: 0,
            minorTickInterval: 0,
            tickPixelInterval: 50,
            tickWidth: 1,
            labels: {
               enabled: true,
               distance: 10
                    }
              },
        plotOptions: {
            solidgauge: {
                innerRadius: '95%',
                dataLabels: {
                    y: 5,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        }
    };
  
    
    
    
    $('#temp001').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
            min: -30, 
            max: 60
               },
        credits: {
            enabled: false
                 },
        series: [{
            name: 'inTemp',
            data: [-15.5], /////// Temp Value //////////
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:25px;color:' +((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y} &deg;C</span><br/>' + '<span style="font-size:12px;color:silver">abcde</span></div>'
            }
         }]
    }));
 
 

});

Sorry for my Bad English....German ist better

Has an answer already at http://stackoverflow.com/questions/23411055/highcharts-solidgauge-how-can-i-disable-gradient-fill — Nishith Kant Chaturvedi, Oct 27 '15 at 07:02

score 3 · Answer 1 · answered Oct 27 '15 at 12:53

Here you can find API about yAxis.stops: http://api.highcharts.com/highcharts#yAxis.stops

The values in stops are between 0 and 1, where 0 is the min value of your axis and 1 is the max value. The values between 0 and 1 are proportional to values of axis.

If you are having axis with min value of -30 and max value of 60 and you want to have stop from 30, the value for stop will be 60/(60-(-30))

You should set your colors in RGB format of "#XXYYZZ" if you want to have smooth transition between colors of your stops.

stops: [
                [0, '#000088'],
                [29 / 90, '#000088'],
                [30 / 90, '#5555ff'],
                [41 / 90, '#5555ff'],
                [42 / 90, '#00ff00'],
                [54 / 90, '#00ff00'],
                [55 / 90, '#ff8c00'],
                [59 / 90, '#ff8c00'],
                [60 / 90, '#ff0000']
],

example: http://jsfiddle.net/izothep/o35xLwbk/6/

Highcharts Solid Gauge (Thermometer) ... Color from -30 to +60

1 Answers1