Remove Chart.js chart padding

Question

See this codepen:

I've set the canvas width to 100%, and padding to 0, but there seems to be some intrinsic padding at work in chart.js. I've had a look through the documentation but I can't see any references to padding other than things like label padding.

I've tried editing it through the CSS, but that doesn't seem to be causing the problem.

canvas {
  width:100%;
  height: auto;
  margin:0;
  padding:0;
}

So its probably a javascript canvas rendering parameter issue.

Having no control over this padding makes designing a usable responsive site a complete pain.

If there isn't a solution to this, does anyone have any suggestions for alternative javascript charting packages that are good for responsive sites?

I have experience with d3, but that seems like overkill for a simple pie chart.

removing 5 whole pixels of padding is not the solution for creating a responsive template. why would you wan tot graphic to go all the way to the edge that would look awful. — I wrestled a bear once.
Not really the question I was asking. The chart that Chart.js generates width is actually something like 50% of the canvas width. I want to know if there is a way to increase the chart width to 90% of the canvas width or something. Its not really a CSS question I suppose, probably more to do with the canvas rendering functions. Will edit question. — Satki
you cannot put a circle in a wide rectangle and expect it to go all the way to the edge. that isn;t how circles work. generally, they are round. however if you shrink the window the legend does go pretty much all the way to the edges. — I wrestled a bear once.
But what's happening in chart.js that's stopping the circle from going all the way to the edge? I mean, I haven't specified a fixed height of the containing rectangle anywhere. Ideally I want the chart to have the same width of a container div (with the chart height adjusted automatically to fit), and then size the width of that container div responsively. — Satki
Correction - section in brackets should read: (with the container div height adjusted automatically to fit the chart in). — Satki

Satki Satki · Accepted Answer · 2017-01-09T19:55:59

Found the answer - pretty easy one, just set the canvas height and width attributes (NOT CSS parameters) to the required aspect ratio and then it resizes automatically, whilst maintaining the ratio.

Remove Chart.js chart padding

1 Answers