Responsive Chart overflowing when padded added

[corysimmons]

Doesn't matter what box-sizing I use on the containing element. Any ideas?

[corysimmons]

Side question: is there any way to get rid of the lines in the bg or make them meet ends flushly instead of like this +

[omgaunicorn]

For your side question: use the option "scaleShowGridLines: false" to get rid of the bg lines, if you don't want either lines or labels, use "showScale: false".

I was the same issue with the overflowing chart, but check out #56 , nnnick's answer worked for me on Chrome, FF and Safari, if I get it to work on IE9, I'll post later.

[corysimmons]

 width: 100% !important
    max-width: 800px
    height: auto !important

did the trick thanks!

[nnnick]

Yeah don't do that - I suspect it'll break tooltips the Chart is scaled via CSS.

Chart.js doesn't attempt to calculate sizing on a container elements with padding, so when box-sizing: border-box is set, clientWidth is inclusive of the padding.

A way simpler fix for this is to wrap your canvas in a div without any padding.

[corysimmons]

@nnnick Works, thanks

[lackneets]

I have same problem on IE edge, but Chrome is ok

Finally figured out it caused by Chart.helpers.getStyle not return exact pixels

I am going to overwrite the helper methods for fixing my project

Chart.helpers.getMaximumWidth = function(domNode) {
  var container = domNode.parentNode;
  var paddingLeft = parseInt(document.defaultView.getComputedStyle(container, null).paddingLeft, 10);
  var paddingRight = parseInt(document.defaultView.getComputedStyle(container, null).paddingRight, 10);
  var w = container.clientWidth - paddingLeft - paddingRight;
  var cw = Chart.helpers.getConstraintWidth(domNode);
  return isNaN(cw)? w : Math.min(w, cw);
};
Chart.helpers.getMaximumHeight = function(domNode) {
  var container = domNode.parentNode;
  var paddingTop = parseInt(document.defaultView.getComputedStyle(container, null).paddingTop, 10);
  var paddingBottom = parseInt(document.defaultView.getComputedStyle(container, null).paddingDown, 10);
  var h = container.clientHeight - paddingTop - paddingBottom;
  var ch = Chart.helpers.getConstraintHeight(domNode);
  return isNaN(ch)? h : Math.min(h, ch);
};

FYI.