Treat negative values in doughnut charts as positive (#5165)

diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js
index 6028602c47244ef76f7fb3399d078d4e4c13bac7..f7b36e989a99f7e2ee0e3c55f7cdd7107bf2834e 100644 (file)
--- a/src/controllers/controller.doughnut.js
+++ b/src/controllers/controller.doughnut.js
@@ -273,7 +273,7 @@ module.exports = function(Chart) {
                calculateCircumference: function(value) {
                        var total = this.getMeta().total;
                        if (total > 0 && !isNaN(value)) {
-                               return (Math.PI * 2.0) * (value / total);
+                               return (Math.PI * 2.0) * (Math.abs(value) / total);
                        }
                        return 0;
                },

diff --git a/test/specs/controller.doughnut.tests.js b/test/specs/controller.doughnut.tests.js
index 85e382ac3f90b8ec3ac469d619bb66073cd49395..a4d6526c912bbfe83a218b934dabb271abe1dee8 100644 (file)
--- a/test/specs/controller.doughnut.tests.js
+++ b/test/specs/controller.doughnut.tests.js
@@ -205,6 +205,46 @@ describe('Chart.controllers.doughnut', function() {
                });
        });
 
+       it('should treat negative values as positive', function() {
+               var chart = window.acquireChart({
+                       type: 'doughnut',
+                       data: {
+                               datasets: [{
+                                       data: [-1, -3]
+                               }],
+                               labels: ['label0', 'label1']
+                       },
+                       options: {
+                               legend: false,
+                               title: false,
+                               cutoutPercentage: 50,
+                               rotation: Math.PI,
+                               circumference: Math.PI * 0.5,
+                               elements: {
+                                       arc: {
+                                               backgroundColor: 'rgb(255, 0, 0)',
+                                               borderColor: 'rgb(0, 0, 255)',
+                                               borderWidth: 2
+                                       }
+                               }
+                       }
+               });
+
+               var meta = chart.getDatasetMeta(0);
+
+               expect(meta.data.length).toBe(2);
+
+               // Only startAngle, endAngle and circumference should be different.
+               [
+                       {c: Math.PI / 8, s: Math.PI, e: Math.PI + Math.PI / 8},
+                       {c: 3 * Math.PI / 8, s: Math.PI + Math.PI / 8, e: Math.PI + Math.PI / 2}
+               ].forEach(function(expected, i) {
+                       expect(meta.data[i]._model.circumference).toBeCloseTo(expected.c, 8);
+                       expect(meta.data[i]._model.startAngle).toBeCloseTo(expected.s, 8);
+                       expect(meta.data[i]._model.endAngle).toBeCloseTo(expected.e, 8);
+               });
+       });
+
        it ('should draw all arcs', function() {
                var chart = window.acquireChart({
                        type: 'doughnut',