[Solved]-Show more data on Gauge chart with Highcharts-Highcharts

you are trying to use features of two highcharts type of charts - solidgauge and gauge.

it is possible to place both of them in one chart and set same (or almost the same) values for both series.

example: http://jsfiddle.net/2l1bmhb5/

$(function () {
    $('#container').highcharts({
        chart: {
            plotbackgroundcolor: null,
            plotbackgroundimage: null,
            plotborderwidth: 0,
            plotshadow: false
        },
        title: {
            text: null
        },
        tooltip: {
            enabled: false
        },
        pane: {
            startangle: -90,
            endangle: 90,
            background: {
                backgroundcolor: '#ccc',
                borderwidth: 0,
                shape: 'arc',
                innerradius: '60%',
                outerradius: '95%'
            }
        },
        yaxis: {
            stops: [
                [1, '#f00'] // red
                ],
            min: 0,
            max: 95,
            minorticklength: 0,
            linewidth: 0,
            tickpixelinterval: 30,
            tickwidth: 2,
            tickposition: 'inside',
            ticklength: 5,
            tickcolor: '#666',
            tickpositions: [0, 72, 82.68, 95],
            labels: {
                distance: 10
            }
        },
        series: [{
            type: 'gauge',
            data: [14],
            pivot: {
                radius: 0
            },
            datalabels: {
                y: -5,
                borderwidth: 0,
                style: {
                    fontsize: '20px'
                }
            },
            dial: {
                radius: '85%',
                backgroundcolor: 'red',
                borderwidth: 0,
                basewidth: 3,
                topwidth: 3,
                baselength: '100%', // of radius
                rearlength: '0%'
            }
        }, {
            type: 'solidgauge',
            fillcolor: 'red',
            data: [14.5],
            radius: '95%'
        }]

    },

    // add some life
    function (chart) {
        if (!chart.renderer.forexport) {
            setinterval(function () {
                var point = chart.series[0].points[0],
                    point2 = chart.series[1].points[0],
                    newval,
                    inc = math.round((math.random() - 0.5) * 20);

                newval = point.y + inc;
                if (newval < 0 || newval > 95) {
                    newval = point.y - inc;
                }

                point.update(newval, false);
                point2.update(newval + 0.5);

            }, 3000);
        }
    });
});

update:

1. colors can change fluently if you set yaxis stops. api: http://api.highcharts.com/highcharts#yaxis.stops

scale of stops if 0-1, so if you want colors to be based on axis values - scale them.

http://jsfiddle.net/f6k9eou4/

stops: [
    [0, '#ff0000'], // red
    [76.38/95, '#00ff00'], // green
    [93/95, '#0000ff'] // blue
],

other way would be to use yaxis mincolor and maxcolor to change colors. in that case axis must updated and series must be additionally binded with axes.

http://jsfiddle.net/2l1bmhb5/2/

...
if (newval < 76.38) {
    color = col[0];
} else if (newval < 93) {
    color = col[1];
} else {
    color = col[2];
}
chart.yaxis[0].update({
    stops: [
        [1, color]
        ]
},false);

point.update(newval, false);
point2.update(newval, false);
chart.series[1].bindaxes(); //solidgauge series
chart.redraw(true);

2. needle (aka dial) and pivot can be styled using options described in api.

http://api.highcharts.com/highcharts#series.pivot

http://api.highcharts.com/highcharts#series.dial

pivot: {
    backgroundcolor: "#fff",
    bordercolor: "#666",
    borderwidth: 5,
    radius: 6
},
dial: {
    radius: '100%',
    backgroundcolor: '#666',
    borderwidth: 0,
    basewidth: 5,
    topwidth: 5,
    baselength: '100%', // of radius
    rearlength: '0%'
}

http://jsfiddle.net/2l1bmhb5/3/

3. lines of additional points are y axis tick lines. it is not possible using default options to change visibility of selected lines or their dash style. one way would be to change their style on load and after each redraw.

   function styleticklines() {
   var paths = $('.highcharts-axis > path').splice(0),
       len = paths.length;
   // hide first and last
   paths[0].setattribute('opacity', 0);
   paths[len - 1].setattribute('opacity', 0);
   // style the rest
   for (var i = 1; i < len - 1; i++) {
       paths[i].setattribute('stroke-dasharray', '3,3');
   }
   }
   

http://jsfiddle.net/2l1bmhb5/4/

other way would be to write highcharts wrapper that would change default behavior and enable setting style per selected ticks.

4. at that point you might notice that tick lines are covered by series plot. if you want to avoid it, then set zindex for yaxis to e.g. 7

finall example: http://jsfiddle.net/2l1bmhb5/6/

$(function () {
    var col = ['#ff0000', '#00ff00', '#0000ff'],
        color;

    function styleticklines() {
        var paths = $('.highcharts-axis > path').splice(0),
            len = paths.length;
        // hide first and last
        paths[0].setattribute('opacity', 0);
        paths[len - 1].setattribute('opacity', 0);
        // style the rest
        for (var i = 1; i < len - 1; i++) {
            paths[i].setattribute('stroke-dasharray', '3,3');
        }
    }

    $('#container').highcharts({
        chart: {
            plotbackgroundcolor: null,
            plotbackgroundimage: null,
            plotborderwidth: 0,
            plotshadow: false,
            events: {
                load: styleticklines,
                redraw: styleticklines
            }
        },
        title: {
            text: null
        },
        tooltip: {
            enabled: false
        },
        pane: {
            startangle: -90,
            endangle: 90,
            background: {
                backgroundcolor: '#ccc',
                borderwidth: 0,
                shape: 'arc',
                innerradius: '60%',
                outerradius: '100%'
            }
        },
        yaxis: {
            zindex: 7,
            stops: [
                [1, '#ff0000']
            ],
            min: 0,
            max: 95,
            minorticklength: 0,
            linewidth: 0,
            tickpixelinterval: 30,
            tickwidth: 2,
            tickposition: 'inside',
            ticklength: 46,
            tickcolor: '#666',
            tickpositions: [0, 76.38, 93, 95],
            labels: {
                distance: 20
            }
        },
        series: [{
            type: 'solidgauge',
            fillcolor: 'red',
            data: [72],
            radius: '100%',
            datalabels: {
                y: 10,
                borderwidth: 0,
                style: {
                    fontsize: '20px'
                }
            }
        }, {
            type: 'gauge',
            data: [72],
            pivot: {
                backgroundcolor: "#fff",
                bordercolor: "#666",
                borderwidth: 5,
                radius: 6
            },
            datalabels: {
                enabled: false
            },
            dial: {
                radius: '105%',
                backgroundcolor: '#666',
                borderwidth: 0,
                basewidth: 5,
                topwidth: 5,
                baselength: '100%', // of radius
                rearlength: '0%'
            }
        }]

    },

    // add some life
    function (chart) {
        if (!chart.renderer.forexport) {
            setinterval(function () {
                var point = chart.series[0].points[0],
                    point2 = chart.series[1].points[0],
                    newval,
                    inc = math.round((math.random()) * 10);

                newval = point.y + inc;
                if (newval < 0 || newval > 95) {
                    newval = point.y - inc;
                }

                if (newval < 76.38) {
                    color = col[0];
                } else if (newval < 93) {
                    color = col[1];
                } else {
                    color = col[2];
                }
                chart.yaxis[0].update({
                    stops: [
                        [1, color]
                    ]
                }, false);

                point.update(newval, false);
                point2.update(newval, false);
                chart.series[0].bindaxes();
                chart.redraw(true);

            }, 3000);
        }
    });
});