allow to not insert iframe before canvas

docs/01-Chart-Configuration.md

@@ -84,6 +84,7 @@ events | Array[String] | `["mousemove", "mouseout", "click", "touchstart", "touc
 onClick | Function | null | Called if the event is of type 'mouseup' or 'click'. Called in the context of the chart and passed an array of active elements
 legendCallback | Function | ` function (chart) { }` | Function to generate a legend. Receives the chart object to generate a legend from. Default implementation returns an HTML string.
 onResize | Function | null | Called when a resize occurs. Gets passed two arguemnts: the chart instance and the new size.
+insertIframe | Boolean | true | Inserts iframe before the canvas to handle parent container resize events. Disabling this options will disable resizing chart automatically, useful for shadow DOM (react, elm, etc.)
 
 ### Title Configuration
 

docs/09-Advanced.md

@@ -64,6 +64,16 @@ myLineChart.resize();
 // => returns 'this' for chainability
 ```
 
+**Note!** In case you used `insertIframe = false` config option, you responsible for resizing charts manually, e.g.:
+
+```javascript
+window.onresize = function() {
+    for (var i in Chart.instances) {
+        Chart.instances[i].chart.controller.resize();
+    }
+};
+```
+
 #### .clear()
 
 Will clear the chart canvas. Used extensively internally between animation frames, but you might find it useful.

src/core/core.js

@@ -52,11 +52,13 @@ module.exports = function() {
 		me.controller = new Chart.Controller(me);
 
 		// Always bind this so that if the responsive state changes we still work
-		helpers.addResizeListener(context.canvas.parentNode, function() {
-			if (me.controller && me.controller.config.options.responsive) {
-				me.controller.resize();
-			}
-		});
+		if (me.controller.config.options.insertIframe) {
+			helpers.addResizeListener(context.canvas.parentNode, function() {
+				if (me.controller && me.controller.config.options.responsive) {
+					me.controller.resize();
+				}
+			});
+		}
 
 		return me.controller ? me.controller : me;
 
@@ -67,6 +69,7 @@ module.exports = function() {
 		global: {
 			responsive: true,
 			responsiveAnimationDuration: 0,
+			insertIframe: true,
 			maintainAspectRatio: true,
 			events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
 			hover: {