Remove whitespace from highcharts gauge chart?

Question

I want to remove white space from semi circle gauge chart created using highcharts library.

html:

<div id="gauge_div" style="width: 100%;">

JSBin

Answer 1

Try Below Code ..

define height with HTML div so you can create chart with specific dimension

HTML

<div id="gauge_div" style="height: 200px;">

use Javascript code in pane

> size:[30] which is used to give size of our chart.

> center: ['50%', '90%'] is diameter of the pie relative to the plot area. Can be a percentage or pixel value. You can move chart up/down or right/left using center. Jsbin Demo

Jquery

 $('#gauge_div').highcharts({
    chart: {
        type: 'gauge',
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false
    },

    title: {
        text: ''
    },

    pane: {
      size:[30],
        startAngle: -90,
        center: ['50%', '90%'],
        endAngle: 90,
      background: {backgroundColor: 'white', borderWidth: 0,innerradious:'10%'}
    },

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

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

        tickPixelInterval: 30,
        tickWidth: 0,
        tickPosition: 'inside',
        tickLength: 10,
        tickColor: '#666',
        labels: {
            step: 2,
            rotation: 'auto'
        },
       /* title: {
            text: ''
        },*/
        plotBands: [{
            from: 0,
            to: 75,
            color: '#5c90e3' // blue
        }, {
            from: 75,
            to: 100,
            color: '#e6e6e6' 
        }]        
    },
    plotOptions: {
        gauge: {

            dataLabels: {
                enabled: false      
            },
            pivot: {
                radius: 0
            },
            dial: {
                backgroundColor: 'orange'   
            }
        }
    },
    series: [{

        name: 'Progress',
        data: [75],
        tooltip: {
            valueSuffix: '%'
        }
    }]


});

hope can solve your problem.