Doughnut controller needs to obey chart area size

diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js
index e6992814dab7a162487433849c4d6032b87b53f2..0efb57fbb970a21bb3248fc085c2568b13f144e6 100644 (file)
--- a/src/controllers/controller.doughnut.js
+++ b/src/controllers/controller.doughnut.js
@@ -129,8 +129,9 @@
                },
 
                update: function update(reset) {
+                       var minSize = Math.min(this.chart.chartArea.right - this.chart.chartArea.left, this.chart.chartArea.bottom - this.chart.chartArea.top);
 
-                       this.chart.outerRadius = Math.max((helpers.min([this.chart.chart.width, this.chart.chart.height]) / 2) - this.chart.options.elements.arc.borderWidth / 2, 0);
+                       this.chart.outerRadius = Math.max((minSize / 2) - this.chart.options.elements.arc.borderWidth / 2, 0);
                        this.chart.innerRadius = Math.max(this.chart.options.cutoutPercentage ? (this.chart.outerRadius / 100) * (this.chart.options.cutoutPercentage) : 1, 0);
                        this.chart.radiusLength = (this.chart.outerRadius - this.chart.innerRadius) / this.getVisibleDatasetCount();
 
@@ -147,9 +148,12 @@
                        }, this);
                },
                updateElement: function(arc, index, reset) {
+                       var centerX = (this.chart.chartArea.left + this.chart.chartArea.right) / 2;
+                       var centerY = (this.chart.chartArea.top + this.chart.chartArea.bottom) / 2;
+
                        var resetModel = {
-                               x: this.chart.chart.width / 2,
-                               y: this.chart.chart.height / 2,
+                               x: centerX,
+                               y: centerY,
                                startAngle: Math.PI * -0.5, // use - PI / 2 instead of 3PI / 2 to make animations better. It means that we never deal with overflow during the transition function
                                circumference: (this.chart.options.animation.animateRotate) ? 0 : this.calculateCircumference(this.getDataset().data[index]),
                                outerRadius: (this.chart.options.animation.animateScale) ? 0 : this.outerRadius,
@@ -164,8 +168,8 @@
 
                                // Desired view properties
                                _model: reset ? resetModel : {
-                                       x: this.chart.chart.width / 2,
-                                       y: this.chart.chart.height / 2,
+                                       x: centerX,
+                                       y: centerY,
                                        circumference: this.calculateCircumference(this.getDataset().data[index]),
                                        outerRadius: this.outerRadius,
                                        innerRadius: this.innerRadius,

diff --git a/test/controller.doughnut.tests.js b/test/controller.doughnut.tests.js
index 29811e1117b4a66837921d9b242ef73f943e5ee9..34ecd1949163dcbccf64837ff261eecf78be10d4 100644 (file)
--- a/test/controller.doughnut.tests.js
+++ b/test/controller.doughnut.tests.js
@@ -62,9 +62,11 @@ describe('Doughnut controller tests', function() {
 
        it ('Should reset and update elements', function() {
                var chart = {
-                       chart: {
-                               width: 100,
-                               height: 200,
+                       chartArea: {
+                               left: 0,
+                               top: 0,
+                               right: 100,
+                               bottom: 200,
                        },
                        data: {
                                datasets: [{
@@ -228,9 +230,11 @@ describe('Doughnut controller tests', function() {
 
        it ('should draw all arcs', function() {
                var chart = {
-                       chart: {
-                               width: 100,
-                               height: 200,
+                       chartArea: {
+                               left: 0,
+                               top: 0,
+                               right: 100,
+                               bottom: 200,
                        },
                        data: {
                                datasets: [{
@@ -275,9 +279,11 @@ describe('Doughnut controller tests', function() {
 
        it ('should set the hover style of an arc', function() {
                var chart = {
-                       chart: {
-                               width: 100,
-                               height: 200,
+                       chartArea: {
+                               left: 0,
+                               top: 0,
+                               right: 100,
+                               bottom: 200,
                        },
                        data: {
                                datasets: [{
@@ -354,9 +360,11 @@ describe('Doughnut controller tests', function() {
 
        it ('should unset the hover style of an arc', function() {
                var chart = {
-                       chart: {
-                               width: 100,
-                               height: 200,
+                       chartArea: {
+                               left: 0,
+                               top: 0,
+                               right: 100,
+                               bottom: 200,
                        },
                        data: {
                                datasets: [{