From bcea9bfad3f00c900d390d1fa9091e308952ee72 Mon Sep 17 00:00:00 2001
From: Alex Kovalevych <alexkovalevych@gmail.com>
Date: Mon, 19 Sep 2016 15:10:07 +0300
Subject: [PATCH] allow to not insert iframe before canvas - to be able to work
 with shadow DOM.

---
 docs/01-Chart-Configuration.md |  1 +
 docs/09-Advanced.md            | 10 ++++++++++
 src/core/core.js               | 13 ++++++++-----
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/docs/01-Chart-Configuration.md b/docs/01-Chart-Configuration.md
index 43e762ba408..36f6a5efaf4 100644
--- a/docs/01-Chart-Configuration.md
+++ b/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
 
diff --git a/docs/09-Advanced.md b/docs/09-Advanced.md
index 3a361bcfff3..ff0a1c98680 100644
--- a/docs/09-Advanced.md
+++ b/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.
diff --git a/src/core/core.js b/src/core/core.js
index 577db878e16..99e4eebcbcb 100755
--- a/src/core/core.js
+++ b/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: {