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/