CODEWITHSUNDEEP
javascripthighcharts
Sayem Khan
Sayem Khan

Reputation: 560

Highcharts - change group padding and column width on category axis

I have a simple column chart that I would like to have 0 groupPadding for so that the columns are close next to each other, but I also want the width of each column (pointWidth) to be only 50 pixels.

This is for the x-axis, which has category labels. Here's my code: http://jsfiddle.net/2pVkd/

    $('#container').highcharts({
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr']
    },

    plotOptions: {
        series: {
            // pointWidth: 50,
            groupPadding: 0
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2]
    }]
});

The problem though is whenever I set pointWidth as 50 along with 0 groupPadding, there's a huge space between the columns so that it spans the entire axis, how can I prevent this from happening?

Thanks

Upvotes: 1

Views: 8119

Answers (2)

Ryan Erb
Ryan Erb

Reputation: 838

You can mess around with the width of the chart if you do not want to add in blank columns, this will make the whole thing thinner though. Or you can do what jlbriggs suggested, what ever works better for your requirements.

chart: {
            type: 'column',
            width: 300
        },

http://jsfiddle.net/2pVkd/3/

Upvotes: 2

jlbriggs
jlbriggs

Reputation: 17800

There is no direct option, as the chart will attempt to fill the plot area with the available data.

2 methods you can use:

1) fill in the rest of the categories, set an axis max:

example:

http://jsfiddle.net/2pVkd/2/

2) fill your data array with null values to fill the additional space

example:

http://jsfiddle.net/2pVkd/4/

Upvotes: 3

Related Questions