Chartjs-How to remove paddings in Bar chart? (Chart.JS)

by

1👍

✅

The x scale left and right paddings are calculated in the calculateXLabelRotation. If you have only these kind of charts you could simply replace this function to return no padding, like below

var originalCalculateXLabelRotation = Chart.Scale.prototype.calculateXLabelRotation
Chart.Scale.prototype.calculateXLabelRotation = function () {
    originalCalculateXLabelRotation.apply(this, arguments);
    this.xScalePaddingRight = 0;
    this.xScalePaddingLeft = 0;
}

Fiddle – http://jsfiddle.net/ov9p5qhz/

Note that there is still some spacing on the left and right – that comes from your barValueSpacing: 4 option.

If you have other charts on the page that you don’t want to keep separate, use Chart.noConflict()

Leave a comment