Question

I am constructing a progress-bar using bar chart(with percentage stacking) and would like to remove the spaces/padding in the container and keep only the bar without any padding/margin spaces in the chart container.

Is there a way of accomplishing this?

Fiddle

Code:

$(function () {
    var chart;
    $(document).ready(function () {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'bar'
            },
            legend: {
                enabled: false,
            },
            title: {
                text: ''
            },
            xAxis: {

                lineWidth: 0,

                labels: {
                    enabled: false
                },
                minorTickLength: 0,
                tickLength: 0
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                },
                lineWidth: 0,
                gridLineWidth:0,
                lineColor: 'transparent',
                labels: {
                    enabled: false
                },
                minorTickLength: 0,
                tickLength: 0
            },
            tooltip: {
                enabled: false
            },
            plotOptions: {
                bar: {
                    stacking: 'percent'

                },
                 series: {
            pointPadding: 0,
            groupPadding: 0,       
        }
            },

            series: [{
                name: 'max',
                data: [40],
                color: 'white'
            }, {
                name: 'current',
                data: [60],
                color: 'green'
            }]
        });
    });

});

Answer 1

You can simple remove margins:

chart: {
    renderTo: 'container',
    ....
    margin: 0
}

See: http://jsfiddle.net/gRYGn/4/