CODEWITHSUNDEEP
javascriptjqueryhtmlcsshighcharts
rolnn
rolnn

Reputation: 938

Highcharts padding issue

I am trying to make a column chart with no padding on the sides.

What options do I have to add to my highcharts configuration?

This jsfiddle is my current attempt:

$('#container').highcharts
  series: [{
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
      }]
  credits:
    enabled: off
  legend:
    enabled: off
  exporting:
    enabled: off
  title:
    text: null
  chart:
    margin: [0,0,0,0]
    type: 'column'
  plotOptions:
    column:
      groupPadding: 0
      pointPadding: 0
      borderWidth : 0
      stacking: 'normal'
   xAxis:
      title:
        text: null
      labels:
        enabled: off
   yAxis:
      title:
        text: null
      labels:
        enabled: off
      gridLineWidth: 0
      minorGridLineWidth: 0

enter image description here

Upvotes: 0

Views: 488

Answers (3)

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You can set minPadding/maxPadding as 0 on the xAxis.

http://jsfiddle.net/ytfYe/3/

Upvotes: 0

Ivan Chau
Ivan Chau

Reputation: 1435

For CoffeeScript

Under xAxis, add

    min: 0.05
    max: 11

For Javascript,

Under xAxis, add

    min: 0.05,
    max: 11,

P.S. Adjust max according to your needs.

DEMO: http://jsfiddle.net/ytfYe/2/

Ref: Highcharts Remove Space across the x-Axis

tag: bar column left right spacing remove

Upvotes: 1

Buck Doyle
Buck Doyle

Reputation: 6397

I don’t know why the margin is there despite you setting it zero, but I got rid of it with this:

margin: [0,-5,0,-5]

Upvotes: 0

Related Questions