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:

/

And here is the code I am using:

$('#output-chart').highcharts({
        chart: { type: 'column' },
        title: { text: null },
        xAxis: { categories: ['Column 1', 'Column 2', 'Column 3', 'Column 4'] },
        yAxis: { allowDecimals: false, min: 0, labels: { format: '£{value}' }, title: { text: ''} },
        plotOptions: { column: { stacking: 'normal'}, series: { pointWidth: 50, pointPadding: 0, groupPadding: 0} },
        series: [{
            name: 'Product 1 Element 1',
            data: [0, 100 - 125, 100 - 150, 100 - 175],
            stack: 'Item1'                
        }, {
            name: 'Product 1 Element 2',
            data: [100, 125, 150, 175],
            stack: 'Item1'                          
        }, {
            name: 'Product 2 Element 1',
            data: [0, 100 - 125, 100 - 150, 100 - 175],
            stack: 'Item2'                            
        }, {
            name: 'Product 2 Element 2',
            data: [100, 125, 150, 175],
            stack: 'Item2'                    
        }]
    });

So, there are two bars in each column and I want to put those two bars right against each other but still have a gap between the columns.

I hope that makes sense!

Any help would be very much appreciated.

Many thanks

G.

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

And here is the code I am using:

$('#output-chart').highcharts({
        chart: { type: 'column' },
        title: { text: null },
        xAxis: { categories: ['Column 1', 'Column 2', 'Column 3', 'Column 4'] },
        yAxis: { allowDecimals: false, min: 0, labels: { format: '£{value}' }, title: { text: ''} },
        plotOptions: { column: { stacking: 'normal'}, series: { pointWidth: 50, pointPadding: 0, groupPadding: 0} },
        series: [{
            name: 'Product 1 Element 1',
            data: [0, 100 - 125, 100 - 150, 100 - 175],
            stack: 'Item1'                
        }, {
            name: 'Product 1 Element 2',
            data: [100, 125, 150, 175],
            stack: 'Item1'                          
        }, {
            name: 'Product 2 Element 1',
            data: [0, 100 - 125, 100 - 150, 100 - 175],
            stack: 'Item2'                            
        }, {
            name: 'Product 2 Element 2',
            data: [100, 125, 150, 175],
            stack: 'Item2'                    
        }]
    });

So, there are two bars in each column and I want to put those two bars right against each other but still have a gap between the columns.

I hope that makes sense!

Any help would be very much appreciated.

Many thanks

G.

• javascript
• highcharts

2 Answers 2

If you want to have to bars together, but also have padding between pair of them you need to set only pointPadding and don't change pointWidth. See: http://jsfiddle/Fusher/FpKjQ/16/

you can use groupPadding: 0.1 then it will e much closer.