Chart.js: Not respecting parent size

[woutrbe]

I've noticed a few issues / posts about this already, but I can't seem to find a simple solution.

Why, in the following example doesn't Chart.js respect the width and height of its parent div? http://codepen.io/woutr_be/pen/EKdqrE

This is rather annoying as my charts need to be flexible and I can't always maintain a fixed width and height.

I can force the canvas to maintain it by using CSS, but this will resize the canvas without redrawing it.

[panzarino]

Adding max-width: and max-height: to the CSS of the div should stop it from expanding.

[woutrbe]

@zachpanz88 Did you see the example I provided? That does already contain max-width and max-height, it doesn't stop it from expanding. Could you provide an example with your solution? (If it's different from the example)

[panzarino]

It appears to respect the max-width and max-height on your example, so I am not sure what the problem is. It may have something to do with angular.

[woutrbe]

@zachpanz88 I don't quite understand, .chart-holder is set to width: 800px; height: 200px, the div directly inside it has max-width: 100%; max-height: 100%. The chart however is 800px by 400px.

I've created a non-angular example that has te same problem: http://codepen.io/woutr_be/pen/BKGovq
Parent div is set to a fixed width and height, the chart however is bigger.

[panzarino]

@woutrbe Setting the height and width of the canvas in addition to the max-height and max-width of the surrounding div will fix your issue.

Example: https://jsfiddle.net/2s034Lzw/1/

[tyjhart]

What is the solution when you can't set the height / width of the canvas statically? I can't set it statically when designing for desktop displays, tablets, mobile phones, etc. I have max-height and max-width of the parent div set, and the div is the correct size on-screen, but in my case the chart is almost exactly twice the parent div width when it goes wrong. I am not on a Retina display or anything like that, just on standard hi-def displays.

In the screenshot you can see two graphs, both of which are in parent divs set to 50% screen width (ends up being 750.422px). The parent divs render nicely, side-by-side on the screen. But inside those divs the charts end up being 1501px wide. This occurs every few times the screen is loaded, it doesn't happen all the time. I'd say two out of three screen loads the graphs render nicely inside their parent divs.

When it does go wrong, and I open the developer console in Chrome (which shifts the screen size), the graphs re-render perfectly without me doing anything else. Same thing happens in the latest version of Firefox.

[woutrbe]

@zachpanz88 I think my issue is related to using a flexible width but a fixed height, as you can see here: https://jsfiddle.net/2s034Lzw/14/

When using width: 100%; andheight: 120px`, the height is never respected by the cart.
I'm building an SPA, so it's quite common to not be aware of the width or height.

[SeanJM]

Can confirm it is with the width set to '100%' and a height set to a fixed amount.

[Rachit200]

I am also facing the same issue, waiting eagerly for the fix.

[etimberg]

@woutrbe the issue was the the responsive and maintainAspectRatio settings were in the wrong location in the config object. I fix the settings and updated your fiddle to the latest version (v2.1.6) which fixes the ever growing canvas problem.

The results are: https://jsfiddle.net/aodghgy8/1/
The canvas maintains its original height no matter the width.

[caleb-allen]

I solved the issue by wrapping it in a <div>

[Boufel]

@caleb-allen, Thanks, also worked for me.

[simonbrunel]

Linking this comment for reference.

[eveevans]

Wrapping div with max-width kind of solve the issue

[mattkwiecien]

If you're using flex (like I was) you need to specify min-width on the div container around the canvas. This allows the container to flex properly and the canvas resize.

[Flixbox]

I solved it by setting maintainAspectRatio to false in the options section, in addition to changing the size of the parent div.

[binDongKim]

Setting maintainAspectRatio to false saved me.

[Finesse]

The automatic resize doesn't work if the canvas has a value for the animation CSS property

[ariccio-learn-co-alternate]

It really should complain in the console or something that it can't resize with the maintainAspectRatio value set to true. Would've save me a whole lot of time!