Remove padding from chartist.js charts

Question

I would like to have my chartist charts on my website with no padding from left or right. I am using chartPadding: 0 as advised on several websites, but that did not really help. There is still too much air from the left or right border.

Here is jsFiddle. Help would be great!

var chart = Chartist.Bar('.ct-chart', {
  labels: ['1.58', '2.58', '4.58', '5.2', '3.1'],
  series: [
    [12, 9, 7, 8, 5],
    [2, 1, 3.5, 7, 3],
    [1, 3, 4, 5, 6]
  ]
}, {
  showPoint: true,
  showLine: true,
  fullWidth: true,
  showLabel: false,
  axisX: {
    showGrid: false,
    showLabel: true,
    offset: 50
  },
  axisY: {
    showGrid: false,
    showLabel: false,
    offset: 0
  },
  chartPadding: 0,
  low: 0
});

// Listening for draw events that get emitted by the Chartist chart
chart.on('draw', function(data) {
  // If the draw event was triggered from drawing a point on the line chart
  if(data.type === 'label' && data.axis === 'x') {
    
    // We just offset the label X position to be in the middle between the current and next axis grid
    data.element.attr({
      dx: data.x + data.space / 2
    });
  }
});

<link href="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.css" rel="stylesheet"/>
<script src="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.js"></script>
<div class="ct-chart"></div>

Answer 1

You can put negative values to the chartPadding property, but that would not give you the effect you are aiming for.

As you render the chart in a normal div the default width value is set to 100%. What you can do as a work around is to restrict the width, so there is less space for the svg. This will affect the padding on the left/right.

Here the updated fiddle - https://jsfiddle.net/zeq3da7p/3/