Even better responsive sizing

chartjs · Jun 16, 2015 · 8d1f280 · 8d1f280
1 parent 63530ba
commit 8d1f280
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 7 deletions.
diff --git a/Chart.js b/Chart.js
@@ -1213,7 +1213,8 @@
 		Chart.instances[this.id] = this;
 
 		if (this.options.responsive) {
-			this.resize();
+			// Silent resize before chart draws
+			this.resize(true);
 		}
 
 		this.initialize.call(this);
@@ -1255,7 +1256,7 @@
 			return this;
 		},
 
-		resize: function resize() {
+		resize: function resize(silent) {
 			this.stop();
 			var canvas = this.chart.canvas,
 				newWidth = helpers.getMaximumWidth(this.chart.canvas),
@@ -1266,6 +1267,10 @@
 
 			helpers.retinaScale(this.chart);
 
+			if (!silent) {
+				this.update(this.options.responsiveAnimationDuration);
+			}
+
 			return this;
 		},
 
@@ -1635,7 +1640,6 @@
 					// Cascade the resize event down to the chart.
 					if (instance.options.responsive) {
 						instance.resize();
-						instance.update(Chart.defaults.global.responsiveAnimationDuration);
 					}
 				});
 			}, 16);

diff --git a/Chart.min.js b/Chart.min.js
diff --git a/src/core/core.controller.js b/src/core/core.controller.js
@@ -31,7 +31,8 @@
 		Chart.instances[this.id] = this;
 
 		if (this.options.responsive) {
-			this.resize();
+			// Silent resize before chart draws
+			this.resize(true);
 		}
 
 		this.initialize.call(this);
@@ -73,7 +74,7 @@
 			return this;
 		},
 
-		resize: function resize() {
+		resize: function resize(silent) {
 			this.stop();
 			var canvas = this.chart.canvas,
 				newWidth = helpers.getMaximumWidth(this.chart.canvas),
@@ -84,6 +85,10 @@
 
 			helpers.retinaScale(this.chart);
 
+			if (!silent) {
+				this.update(this.options.responsiveAnimationDuration);
+			}
+
 			return this;
 		},
 

diff --git a/src/core/core.responsive.js b/src/core/core.responsive.js
@@ -20,7 +20,6 @@
 					// Cascade the resize event down to the chart.
 					if (instance.options.responsive) {
 						instance.resize();
-						instance.update(Chart.defaults.global.responsiveAnimationDuration);
 					}
 				});
 			}, 16);