Merge pull request #2694 from chartjs/fix/2689

Add a way to know when a resize occurs.

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
 

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) { },

src/core/core.controller.js

@@ -76,26 +76,39 @@ module.exports = function(Chart) {
 		},
 
 		resize: function resize(silent) {
-			var canvas = this.chart.canvas;
+			var me = this;
-			var newWidth = helpers.getMaximumWidth(this.chart.canvas);
+			var chart = me.chart;
-			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 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 = this.chart.width !== newWidth || this.chart.height !== newHeight;
+			var sizeChanged = chart.width !== newWidth || chart.height !== newHeight;
 
-			if (!sizeChanged)
+			if (!sizeChanged) {
-				return this;
+				return me;
-
-			canvas.width = this.chart.width = newWidth;
-			canvas.height = this.chart.height = newHeight;
-
-			helpers.retinaScale(this.chart);
-
-			if (!silent) {
-				this.stop();
-				this.update(this.options.responsiveAnimationDuration);
 			}
 
-			return this;
+			canvas.width = chart.width = newWidth;
+			canvas.height = chart.height = newHeight;
+
+			helpers.retinaScale(chart);
+
+			// Notify any plugins about the resize
+			var newSize = { width: newWidth, height: newHeight };
+			Chart.pluginService.notifyPlugins('resize', [me, newSize]);
+
+			// Notify of resize
+			if (me.options.onResize) {
+				me.options.onResize(me, newSize);
+			}
+
+			if (!silent) {
+				me.stop();
+				me.update(me.options.responsiveAnimationDuration);
+			}
+
+			return me;
 		},
 
 		ensureScalesHaveIDs: function ensureScalesHaveIDs() {