javascript - Want to avoid spacing between each stacked bars in highcharts? - Stack Overflow

admin管理员组

文章数量:1388072

I am working with Highcharts and have e across a little problem that I am struggling to overe.

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

/ [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?

I am working with Highcharts and have e across a little problem that I am struggling to overe.

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

http://jsfiddle/jo_pappi/0e5h8sts/3/ [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?

• javascript
• jquery
• html
• css
• highcharts

Share Improve this question Follow asked Feb 3, 2015 at 10:02 Jothi Sankar N KanakavelJothi Sankar N Kanakavel 73388 silver badges2424 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Removing "pointWidth" solved the white space between the bars. But i need the bars should be off same height in all possible cases. I have solved the problem by setting height dynamically based on the categories count. say for example if am having only one category i have set the height for the chart as "210" and for 2 categories "270" like that. and removed pointWidth.

$('#container-one').highcharts({

    chart: {
        type: 'bar',
        height: 210,
        ...
        .
        .
    plotOptions: {
        bar: {
            pointPadding: 0,
            borderWidth: 0
        },
        series: {
            //pointWidth: 20,
            stacking: 'normal',
        .
        .
});

When i have two categories i have set chart height as 270

$('#container-two').highcharts({

    chart: {
        type: 'bar',
        height: 270,
        ...
        .
        .
    plotOptions: {
        bar: {
            pointPadding: 0,
            borderWidth: 0
        },
        series: {
            //pointWidth: 20,
            stacking: 'normal',
        .
        .
});

and the Fiddle Link

may be what i did was wrong. But its fixed my problem. correct me if am wrong.

Thanks all

The options you can use are:

plotOptions:{
    bar:{
        pointPadding: 0,
        groupPadding: 0,
    }
}

But you also need to not force your bar point width.

Remove:

series: {
            pointWidth: 20,

http://jsfiddle/d9f8b22x/

The API docs discuss how these options relate to each other:

http://api.highcharts./highcharts#plotOptions.column.pointPadding

What are you using 'pointWidth: 20' in series for ?? That is creating the problem.. Also you are giving the categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] even if the data es for only apples.. one solution would be to generate the categories dynamically.. say for example if data es only for apples push only apples in the categories array. Then after that you can use :

 _chart.setSize(width,height)

method to dynamically set the new height and width of the highchart. Also removing pointWidth will solve the problem ...

本文标签： javascriptWant to avoid spacing between each stacked bars in highchartsStack Overflow