Highcharts - gauge with color coded steps

by katalin_2003

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 400px; height: 300px; margin: 0 auto"></div>

JavaScript

$(function () {

    $('#container').highcharts({

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

        title: {
            text: ''
        },

        pane: {
            startAngle: -100,
            endAngle: 100,
            borderWidth: 1,
            background: [ {
                backgroundColor: '#fff',
                borderWidth: 0,
                outerRadius: '100%',
                innerRadius: '88%'
            }]
        },

        // the value axis
        yAxis: {
            min: 0,
            max: 100,
            lineColor: '#3A3A3A',
            tickColor: '#3A3A3A',
            minorTickColor: '#c0c0bc',
            minorTickPosition: 'outside',
            tickPosition: 'outside',
            tickLength: 12,
            minorTickInterval: 'auto',
            tickWidth: 4,
            minorTickLength: 8,
            minorTickWidth: 0,
            offset: -13,
            lineWidth: 1,
            labels: {
                distance: 27,
                step: 0,
                rotation: 0,
                style: {
                    color: '#3A3A3A',
                    fontWeigth: 'normal'
                }
            },
            title: {
                text: '%'
            },
            plotBands: [{
                from: 65,
                to: 75,
                innerRadius: 103,
                outerRadius: 116,
                color: '#DEB948' //  yellow
            }, {
                from: 75,
                to: 100,
                innerRadius: 103,
                outerRadius: 116,
                color: '#6fbe6b' // green
            }, {
                from: 0,
                to: 65,
                innerRadius: 103,
                outerRadius: 116,
                color: '#e7797d' // yellow
            }]
        },

        plotOptions:...