Want to avoid spacing between each stacked bars in highcharts?

Vote count:

0

I am working with Highcharts and have come across a little problem that I am struggling to overcome.

I have created a jsfiddle so you can see my issue:

http://ift.tt/1CVaxQH [A]

As you can see

I can achieve the above format in highcharts, Since this chart is rendering based on dynamic data When a single group values arrives highcharts leaves so much space between the bars. Am attaching image here

And the code

$('#container-one').highcharts({
    chart: {
        type: 'bar',
        events: {
            click: function (event) {
                console.log(event.pageX + ',' + event.pageY);
            }
        }
    },

    credits: {
        enabled: false
    },

    title: {
        text: 'Total fruit consumtion, grouped by gender'
    },

    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
        minPadding: 1.1,
        maxPadding: 1.1
    },

    yAxis: {
        allowDecimals: false,
        min: 0,
        title: {
            text: 'Number of fruits'
        }
    },

    tooltip: {
        enabled: false,
        formatter: function () {
            return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' +
                'Total: ' + this.point.stackTotal;
        }
    },

    plotOptions: {
        // column: {
        //     stacking: 'normal'
        // }
        series: {
            pointWidth: 20,
            stacking: 'normal',
            borderWidth: 0,
            events: {
                click: function (event) {
                    //reloadFlash();
                    //$('#report').html('click on yAxis title');
                    console.log(event.pageX + ',' + event.pageY);
                }
            }
        }
    },

    series: [{
        name: 'John',
        color: 'rgba(89,89,89,1)',
        data: [5],                     // data: [5, 3, 4, 7, 4],
        stack: 'male',
        pointPadding: -0.0,
        pointPlacement: -0.0
    }, {
        name: 'Joe',
        color: 'rgba(255,95,215,1)',
        data: [3],                    // data: [3, 4, 4, 2, 2],
        stack: 'male',
        pointPadding: -0.0,
        pointPlacement: -0.0
    }, {
        name: 'Jane',
        color: 'rgba(217,116,0,1)',
        data: [2],                    // data: [2, 5, 6, 2, 1],
        stack: 'female',
        pointPadding: -0.0,
        pointPlacement: -0.0
    }, {
        name: 'Janet',
        color: 'rgba(155,215,255,1)',
        data: [3],        // data: [3, 0, 4, 4, 3],
        stack: 'female',
        pointPadding: -0.0,
        pointPlacement: -0.0
    }]

});

how can i reduce the spaces between bars?

If changing height of the chart is one solution means how can i achieve this dynamically?

asked 43 secs ago

Jothi Sankar N Kanakavel

26

Want to avoid spacing between each stacked bars in highcharts?