Chart.js bar chart is overflowing its containing element

Question

Chart.js

I can't get this stupid chart to stay in its container when padding has been applied to the container. It doesn't matter if the responsive option is set to true.

It also doesn't matter what I set box-sizing to. What's the purpose of the responsive option if not to fit it's container?

Solution 1

As with most CSS, the answer is to use another wrapper!

I had the same problem (and I'm using box sizing)

Just put one div around your canvas! (the divs will inherit the box sizing)

<div>
  <canvas></canvas>
</div>

Good luck

:)

Solution 2

This will solve the issue

Javascript:

new Chart(ctx).Line(data, {
    responsive:true,
    maintainAspectRatio: false
});

ES6

Chart.defaults.global.responsive = true;
Chart.defaults.global.maintainAspectRatio = false;