Why is chart.js canvas not respecting the padding of the container element?

javascript html css canvas chart.js
Hawk picture Hawk · Jan 27, 2015 · Viewed 50.2k times · Source

I am using Chart.js with a simple line chart but the width and height properties calculated by Chart.js seem to be based on the total width and height of the parent element ignoring padding.

JSFiddle

The second container and child shows the behaviour I am expecting. Is this a bug with how Chart.js calculates the width and height of the canvas or am I making a styling mistake?

Answer

gwg picture gwg · Aug 19, 2015

I also needed a responsive canvas and had this issue. This was my fix:

<div>
    <canvas id="chart"></canvas>
</div>

Since Chart.js scales the canvas to the width of the container, ignoring the padding, I just wrapped the canvas in a div. The div scales to the container with padding, respecting the padding, and then the responsive Chart.js canvas scales to the div.

Related questions

How to draw polygons on an HTML5 canvas?

I need to know how to draw polygons on a canvas. Without using jQuery or anything like that.

Read More
HTML5 Canvas Resize (Downscale) Image High Quality?

I use html5 canvas elements to resize images im my browser. It turns out that the quality is very low. I found this: Disable Interpolation when Scaling a <canvas> but it does not help to increase the quality. …

Read More
make canvas as wide and as high as parent

i would like to make a rectangular canvas to simulate a progress bar but it seems when i set the width and height of a canvas to 100%, it doesn't really make it as high and as wide as parent please …

Read More