diff --git a/docs/01-Chart-Configuration.md b/docs/01-Chart-Configuration.md index d88ddc736..472f17433 100644 --- 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 2641856c5..952ec88f5 100644 --- 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 0e103d2bd..657d84d15 100644 --- 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 = this.chart.width !== newWidth || this.chart.height !== newHeight; + var sizeChanged = chart.width !== newWidth || chart.height !== newHeight; - if (!sizeChanged) - return this; - - 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); + if (!sizeChanged) { + return me; } - 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() {