Highcharts speedometer gauge change label

I want to implement speedometer to display internet bandwidth speed but I want to change its number sequence. I have search a lot but couldn't find anything.

Find below code snippet for the highchart gauge. I want to change the label (number).

Check following image of gauge: Highchart image(https://i.stack.imgur.com/mM2qt.png)

But my requirement is number sequence should be 0,1,5,10,20,30,40,50,60,70,80,90,100

Is there any way to change the numbers ?

Highcharts.chart('container', {

chart: {
    type: 'gauge',
    plotBackgroundColor: null,
    plotBackgroundImage: null,
    plotBorderWidth: 0,
    plotShadow: false
},

title: {
    text: 'Speedometer'
},

pane: {
    startAngle: -150,
    endAngle: 150,
    background: [{
        backgroundColor: {
            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops: [
                [0, '#FFF'],
                [1, '#333']
            ]
        },
        borderWidth: 0,
        outerRadius: '109%'
    }, {
        backgroundColor: {
            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops: [
                [0, '#333'],
                [1, '#FFF']
            ]
        },
        borderWidth: 1,
        outerRadius: '107%'
    }, {
        // default background
    }, {
        backgroundColor: '#DDD',
        borderWidth: 0,
        outerRadius: '105%',
        innerRadius: '103%'
    }]
},

// the value axis
 yAxis: {
        min: 0,
        max: 100,

        minorTickInterval: 'auto',
        minorTickWidth: 1,
        minorTickLength: 10,
        minorTickPosition: 'inside',
        minorTickColor: '#666',

        tickPixelInterval: 30,
        tickWidth: 2,
        tickPosition: 'inside',
        tickLength: 10,
        tickColor: '#666',
        labels: {
            step: 2,
            rotation: 'auto'
        },
        title: {
            text: 'Mbps'
        },
        plotBands: [{
            from: 0,
            to: 60,
            color: '#55BF3B' // green
        }, {
            from: 60,
            to: 80,
            color: '#DDDF0D' // yellow
        }, {
            from: 80,
            to: 100,
            color: '#DF5353' // red
        }]
    },
series: [{
    name: 'Speed',
    data: [80],
    tooltip: {
        valueSuffix: ' km/h'
    }
}]

}, // Add some life function (chart) { if (!chart.renderer.forExport) { setInterval(function () { var point = chart.series[0].points[0], newVal, inc = Math.round((Math.random() - 0.5) * 20);

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

        point.update(newVal);

    }, 3000);
}

});

The Gauge chart in the Google Visualization API doesn't get as much love as some of the other chart types. There are relatively few options.

If you want to apply some formatting to the big number at the bottom of the dial, you can use a formatted value. In your data table, instead of giving a simple value type, pass an object with v and f properties like this:

{ "v": 32.5, "f": "32.5 Mbps" }

Where v the numeric data representing the value to render the chart with, and f is the formatted value to display the chart value as in text.

There is not an option to change the formatting of the numbers on the lower and upper bounds of the dial.

You can se the ranges for which the green, yellow, and red regions are rendered, the min and max values of the dial, but that's pretty much it.

My recommendation would be... if you like HighCharts and it does what you need, perhaps you should use that instead? There's also a ton of other radial gauge chart libraries out there. I suspect Google Charts has the radial gauge from some internal use (I've never seen it used publicly by Google), and it this meets their needs, they're unlikely to change it. The specific thing you are looking for has been requested previously.

See #2130, #2127, #932

google / google-visualization-issues

Highcharts speedometer gauge change label #2481