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.
– I wrestled a bear once., Commented Jan 9, 2017 at 18:26
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
– Satki, Commented Jan 9, 2017 at 18:52
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.
– I wrestled a bear once., Commented Jan 9, 2017 at 19:00
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
– Satki, Commented Jan 9, 2017 at 19:08
Correction - section in brackets should read: (with the container div height adjusted automatically to fit the chart in). — Satki
– Satki, Commented Jan 9, 2017 at 19:19

Satki · Accepted Answer · 2017-01-09 19:55:59Z

1

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.

answered Jan 9, 2017 at 19:55

Satki

1095 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ellisan Over a year ago

This is not the answer tho. Yes the container will size up to its parent but the chart within will not

Collectives™ on Stack Overflow

Remove Chart.js chart padding

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related