HighCharts Gauge from -100% to 100%

Question

I'm trying to figure out how to define a gauge, probably of type solidgauge, to go between -100% and 100%. With -100% being solid red and 0% being solid yellow and 100% being solid green. I would like to have the graph originate from the 0% and then go to either side. I would like to also have the graph show a line (like a speedometer that reflects from the center point through the end of the graphed arc (but not required).

This will be a static graph on the page, once calculated for the page it won't be updated, unless the page is refreshed.

I'm thinking that something like a solid activity gauge is what I'm looking for. However, I need the graphs to go in two different directions, and I can't figure out how to define that. I want the gauge to have one graph that would go from 0 to -90, while the other goes from 0 to 90. I want them to have 0 as the same end point and the positive side to be in a gradient green, and the negative side to be in a gradient red.

Sample Gauge showing both positive and negative

Gauge showing positive results

Gauge showing negative results

Answer 1

Thanks to a team member, I have my answer.

var gaugeOptions = {

    chart: {
       backgroundColor: 'transparent',
        type: 'solidgauge'
    },

    title: null,

    pane: {
        center: ['71%', '80%'],
        size: '140%',
        startAngle: -90,
        endAngle: 0,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    tooltip: {
        enabled: false
    },

    // the value axis
    yAxis: {
        stops: [
            [0.1, '#DDDF0D'], // green
            [0.5, '#DF5353'], // yellow
            [0.9, '#DF5353'] // red
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickAmount: 2

    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
            enabled:false

            }
        }
    }
};

var gaugeOptions2 = {

    chart: {
       backgroundColor: 'transparent',
        type: 'solidgauge'
    },

    title: null,

    pane: {
        center: ['10%', '85%'],
        size: '140%',
        startAngle: 0,
        endAngle: 90,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    tooltip: {
        enabled: false
    },

    // the value axis
    yAxis: {
        stops: [
            [0.1, '#DDDF0D'], // green
            [0.5, '#55BF3B'], // yellow
            [0.9, '#55BF3B'] // red
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickAmount: 2

    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
            enabled:false

            }
        }
    }
};

var gaugeOptions3 = {

    chart: {
           backgroundColor: 'transparent',
        type: 'solidgauge'

    },

    title: null,

    pane: {
        center: ['50%', '85%'],
        size: '140%',
        startAngle: -90,
        endAngle: 90,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    tooltip: {
        enabled: false
    },

    // the value axis
    yAxis: {
        stops: [
            [0.1, '#55BF3B'], // green
            [0.5, '#DDDF0D'], // yellow
            [0.9, '#DF5353'] // red
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickAmount: 2,
        title: {
            y: -70
        },
        labels: {
            y: 16
        }
    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
                y: 5,
                borderWidth: 0,
                useHTML: true
            }
        }
    }
};

// The speed gauge
var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
    yAxis: {
        min: 0,
        max: 100,
    lineWidth: 0,
    tickPositions: []
    },

    credits: {
        enabled: false
    },

    series: [{

        data: [0],


    }]

}));

// The RPM gauge
var chartRPM = Highcharts.chart('container-rpm', Highcharts.merge(gaugeOptions2, {
    yAxis: {
        min: 0,
        max: 100,
    lineWidth: 0,
    tickPositions: []
    },

    credits: {
        enabled: false
    },

    series: [{
        name: '',
        data: [0],

        tooltip: {
            valueSuffix: ''
        }
    }]

}));


var chartTitle = Highcharts.chart('container-title', Highcharts.merge(gaugeOptions3, {
    yAxis: {
        min: -100,
        max: 100,
        title: {
            text: 'Progress'
        }
    },

    credits: {
        enabled: false
    },

    series: [{
        name: 'Progress',
        data: [0],
        dataLabels: {
            format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                   '<span style="font-size:12px;color:silver">%</span></div>'
        },
        tooltip: {
            valueSuffix: ' %'
        }
    }]

}));

// Bring life to the dials
setInterval(function () {
    // Speed
    var point,
            point2,
                point3,
        newVal,
        newVal2,
        inc;


        point = chartSpeed.series[0].points[0];
        point2 = chartRPM.series[0].points[0];
        point3 = chartTitle.series[0].points[0];

        inc = Math.round((Math.random() - 0.5) * 100);
      //  newVal = point.y + inc;

        if (inc > 0 ) {
            newVal2 =  inc;
            newVal = 0;
        }else{
            newVal =  inc;
            newVal2 =0;
        }

        point.update(Math.abs(newVal));
    point2.update(newVal2);
     point3.update(inc);

}, 2000);