Add a way to know when a resize occurs.

diff --git a/docs/01-Chart-Configuration.md b/docs/01-Chart-Configuration.md
index d88ddc7369899848f10961737ab7f9184b528937..472f1743312b33a626233699c536adfc1488929c 100644 (file)
--- a/docs/01-Chart-Configuration.md
+++ b/docs/01-Chart-Configuration.md
@@ -72,6 +72,7 @@ maintainAspectRatio | Boolean | true | Maintain the original canvas aspect ratio
 events | Array[String] | `["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"]` | Events that the chart should listen to for tooltips and hovering
 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.
 
 ### Title Configuration
 

diff --git a/docs/09-Advanced.md b/docs/09-Advanced.md
index 2641856c547e7be863f2636a6142dc9170ed2e25..952ec88f51badf944de859ff347487165fde3980 100644 (file)
--- a/docs/09-Advanced.md
+++ b/docs/09-Advanced.md
@@ -381,6 +381,9 @@ Plugins will be called at the following times
 * End of update (before render occurs)
 * Start of draw
 * End of draw
+* Before datasets draw
+* After datasets draw
+* Resize
 * Before an animation is started
 
 Plugins should derive from Chart.PluginBase and implement the following interface
@@ -389,6 +392,8 @@ Plugins should derive from Chart.PluginBase and implement the following interfac
        beforeInit: function(chartInstance) { },
        afterInit: function(chartInstance) { },
 
+       resize: function(chartInstance, newChartSize) { },
+
        beforeUpdate: function(chartInstance) { },
        afterScaleUpdate: function(chartInstance) { }
        afterUpdate: function(chartInstance) { },

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index 0e103d2bdb45127f0eaeeb9c1dbdd952069126df..657d84d15413786480b76d7175a0c2c17b5c2922 100644 (file)
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -76,26 +76,39 @@ module.exports = function(Chart) {
                },
 
                resize: function resize(silent) {
-                       var canvas = this.chart.canvas;
-                       var newWidth = helpers.getMaximumWidth(this.chart.canvas);
-                       var newHeight = (this.options.maintainAspectRatio && isNaN(this.chart.aspectRatio) === false && isFinite(this.chart.aspectRatio) && this.chart.aspectRatio !== 0) ? newWidth / this.chart.aspectRatio : helpers.getMaximumHeight(this.chart.canvas);
+                       var me = this;
+                       var chart = me.chart;
+                       var canvas = chart.canvas;
+                       var newWidth = helpers.getMaximumWidth(canvas);
+                       var aspectRatio = chart.aspectRatio;
+                       var newHeight = (me.options.maintainAspectRatio && isNaN(aspectRatio) === false && isFinite(aspectRatio) && aspectRatio !== 0) ? newWidth / aspectRatio : helpers.getMaximumHeight(canvas);
+
+                       var sizeChanged = chart.width !== newWidth || chart.height !== newHeight;
+
+                       if (!sizeChanged) {
+                               return me;
+                       }
 
-                       var sizeChanged = this.chart.width !== newWidth || this.chart.height !== newHeight;
+                       canvas.width = chart.width = newWidth;
+                       canvas.height = chart.height = newHeight;
 
-                       if (!sizeChanged)
-                               return this;
+                       helpers.retinaScale(chart);
 
-                       canvas.width = this.chart.width = newWidth;
-                       canvas.height = this.chart.height = newHeight;
+                       // Notify any plugins about the resize
+                       var newSize = { width: newWidth, height: newHeight };
+                       Chart.pluginService.notifyPlugins('resize', [me, newSize]);
 
-                       helpers.retinaScale(this.chart);
+                       // Notify of resize
+                       if (me.options.onResize) {
+                               me.options.onResize(me, newSize);
+                       }
 
                        if (!silent) {
-                               this.stop();
-                               this.update(this.options.responsiveAnimationDuration);
+                               me.stop();
+                               me.update(me.options.responsiveAnimationDuration);
                        }
 
-                       return this;
+                       return me;
                },
 
                ensureScalesHaveIDs: function ensureScalesHaveIDs() {