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: /

    $('#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

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

• javascript
• highcharts

2 Answers 2

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/2pVkd/2/

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

example:

http://jsfiddle/2pVkd/4/

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/2pVkd/3/