CODEWITHSUNDEEP
javascripthighcharts
Neil
Neil

Reputation: 2519

Highcharts: Remove padding around column chart

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.net/kMVB5/16/

Upvotes: 2

Views: 8126

Answers (4)

Vinay Sharma
Vinay Sharma

Reputation: 335

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

plotOptions: {
   series: {
      groupPadding: 0
   }
}

Check this jsfiddle

Upvotes: 1

Paweł Fus
Paweł Fus

Reputation: 45079

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

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

Upvotes: 3

Stephanie Yang
Stephanie Yang

Reputation: 262

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.

Upvotes: -1

Hige
Hige

Reputation: 144

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

Upvotes: 0

Related Questions