Add resizeDelay option

docs/docs/configuration/responsive.md

@@ -21,6 +21,7 @@ Namespace: `options`
 | `maintainAspectRatio` | `boolean` | `true` | Maintain the original canvas aspect ratio `(width / height)` when resizing.
 | `aspectRatio` | `number` | `2` | Canvas aspect ratio (i.e. `width / height`, a value of 1 representing a square canvas). Note that this option is ignored if the height is explicitly defined either as attribute or via the style.
 | `onResize` | `function` | `null` | Called when a resize occurs. Gets passed two arguments: the chart instance and the new size.
+| `resizeDelay` | `number` | `0` | Delay the resize update by give amount of milliseconds. This can ease the resize process by debouncing update of the elements.
 
 ## Important Note
 

src/core/core.controller.js

@@ -122,6 +122,7 @@ class Chart {
     this.attached = false;
     this._animationsDisabled = undefined;
     this.$context = undefined;
+    this._resizeTimer = undefined;
 
     // Add the chart instance to the global namespace
     instances[me.id] = me;
@@ -242,7 +243,15 @@ class Chart {
     callCallback(options.onResize, [newSize], me);
 
     if (me.attached) {
-      me.update('resize');
+      const delay = options.resizeDelay || 0;
+      const resizeUpdate = () => me.update('resize');
+      if (delay) {
+        clearTimeout(me._resizeTimer);
+        me._resizeTimer = setTimeout(resizeUpdate, delay);
+        me.render();
+      } else {
+        resizeUpdate();
+      }
     }
   }