I have a Highcharts column chart that I want to be super minimal. Just the bars, no padding, no title, no labels, etc.

I've tried several settings with the api, however I can't seem to get rid of a aproximately 15px padding on the left and right sides of the graph I have built.

My chart settings are as follows:

    chart: {
        backgroundColor: 'transparent',
        borderWidth: 0,
        plotBackgroundColor: 'transparent',
        plotShadow: false,
        plotBorderWidth: 0,
        margin: 0,
        padding: 0,
        spacing: [0, 0, 0, 0]
    }

I thought the spacing set to 0 would have fixed the issue however it hasn't.

I have opened a fiddle here: /

I have a Highcharts column chart that I want to be super minimal. Just the bars, no padding, no title, no labels, etc.

I've tried several settings with the api, however I can't seem to get rid of a aproximately 15px padding on the left and right sides of the graph I have built.

My chart settings are as follows:

    chart: {
        backgroundColor: 'transparent',
        borderWidth: 0,
        plotBackgroundColor: 'transparent',
        plotShadow: false,
        plotBorderWidth: 0,
        margin: 0,
        padding: 0,
        spacing: [0, 0, 0, 0]
    }

I thought the spacing set to 0 would have fixed the issue however it hasn't.

I have opened a fiddle here: http://jsfiddle/kMVB5/16/

• javascript
• highcharts

4 Answers 4

Simply set minPadding and maxPadding to 0. See: http://jsfiddle/kMVB5/26/

    xAxis: {
        gridLineColor: 'transparent',
        gridLineWidth: 0,
        lineColor: 'transparent',
        lineWidth: 0,
        labels: {
            enabled: false
        },
        title: {
            enabled: false
        },
        tickWidth: 0,
        minPadding: 0,
        maxPadding: 0
    },

This will help to remove all left and right empty spaces.

plotOptions: {
   series: {
      groupPadding: 0
   }
}

Check this jsfiddle

In the xAxis section, within setOptions, you can add the element:

min: data[0]

That will set the minimum value in the xAxis to be the first element of your data array. You can take a look here

Hope it helps!

EDIT: Actually, that brings some issues. A better approach is to set min to 0 and max to data.length, with the pointInterval set to 1, like this

Regards

according to the fiddle you provide, I find a way to erase the 15px padding: in your css you have a

div {
       text-align: center;  
       padding: 15px;  
}

in the .graph-wapper class, just delete padding: 15px and it will be fixed.

Be careful this may cause other issues.