Highchart how to enlarge the plotBands in a gauge?

Question

I have a gauge chart made with Angular and Hightchart library. The gauge has three colored plotBands, but I need they are large as the tick. How can enlarge the plotBands or make the same things with background?

it has the follow configuration:

var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function ($scope) { 
$scope.chartConfig =    {
            options: {
      chart: {
          type: 'gauge',
          plotBackgroundColor: null,
          plotBackgroundImage: null,
          plotBorderWidth: 0,
          plotShadow: false,
      },

      title: {
          text: 'Indice di bilanciamento'
      },

      pane: {
           startAngle: -90,
           endAngle: 90,
            center: ['50%', '85%'],
            size: '140%'

      },
        tooltip: {
            enabled: false
                }
            },
    // the value axis
    yAxis: {
        min: 0,
        max: 200,

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

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

}
});

This is the jsfiddle example

Answer 1

Could use the thickness property of each plotBand.

//See: https://github.com/pablojim/highcharts-ng
var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function ($scope) {

    $scope.chartConfig =    {
                options: {
          chart: {
              type: 'gauge',
              plotBackgroundColor: null,
              plotBackgroundImage: null,
              plotBorderWidth: 0,
              plotShadow: false,
          },

          title: {
              text: 'Indice di bilanciamento'
          },

          pane: {
               startAngle: -90,
               endAngle: 90,
                center: ['50%', '85%'],
                size: '140%'

          },
            tooltip: {
                enabled: false
                    }
                },
        // the value axis
        yAxis: {
            min: 0,
            max: 200,

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

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

    }

});

Updated fiddle