CODEWITHSUNDEEP
javascriptjquerychartschart.js
corysimmons
corysimmons

Reputation: 7675

Chart.js bar chart is overflowing its containing element

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?

Upvotes: 8

Views: 15963

Answers (2)

Shripad Bhat
Shripad Bhat

Reputation: 2443

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;

Upvotes: 9

neaumusic
neaumusic

Reputation: 10464

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

:)

Upvotes: 15

Related Questions