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

Question

Is it possible to remove paddings inside bar chart?

<canvas id="weeksChartFallout" width="660" height="200"></canvas> var falloutArray = [12, 24, 20, 15, 18, 20, 22, 10, 10, 12, 14, 10, 16, 16]; var dataWeeksFallouts = { labels: ["16.02", "17.02", "18.02", "19.02", "20.02", "21.02", "22.02", "23.02", "24.02", "25.02", "26.02", "27.02", "28.02", "01.03"], datasets: [ { label: "Fallouts", fillColor: "rgba(63,107,245,0.67)", data: falloutArray } ] }; var fc = document.getElementById('weeksChartFallout').getContext('2d'); window.weeksChartFallout = new Chart(fc).Bar(dataWeeksFallouts,{ barShowStroke : false, barValueSpacing : 4, //distance between bars barValueWidth: 20, scaleShowLabels: false, scaleFontColor: "transparent", tooltipEvents: [] });

I mean space between first bar and left line and, especially space between last Bar and end of the chart (screenshot).

Here is my Fiddle

potatopeelings · Accepted Answer · 2015-06-24 14:07:27Z

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()

man, you are genius!!! And one more time you rescue me ^) And how I should use 'Chart.noConflict()' in right way? Should i put this in every chart except last one(the chart where I want to kill paddings)?
Just realized you don't actually need to use Chart.noConflict. You can actually do if (this.ctx.canvas.id == 'weeksChartFallout') { this.xScalePaddingRight = 0; this.xScalePaddingLeft = 0; } after originalCalculateXLabelRotation.apply(this, arguments);
@potatopeelings thank you, thank you! I have been trying to mix stacked bar and line charts with different x-axis rotation - perfect solution!

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related