Add polar area start angle setting

diff --git a/docs/06-Polar-Area-Chart.md b/docs/06-Polar-Area-Chart.md
index 3b94b731837b78b0813ef48e50bb4dc505ee443b..df982dc66b6025b8e72fc93d18f3ff1cab92c4f5 100644 (file)
--- a/docs/06-Polar-Area-Chart.md
+++ b/docs/06-Polar-Area-Chart.md
@@ -76,6 +76,7 @@ These are the customisation options specific to Polar Area charts. These options
 
 Name | Type | Default | Description
 --- | --- | --- | ---
+startAngle | Number | -0.5 * Math.PI | Sets the starting angle for the first item in a dataset
 scale | Object | [See Scales](#scales) and [Defaults for Radial Linear Scale](#scales-radial-linear-scale) | Options for the one scale used on the chart. Use this to style the ticks, labels, and grid.
 *scale*.type | String |"radialLinear" | As defined in ["Radial Linear"](#scales-radial-linear-scale).
 *scale*.lineArc | Boolean | true | When true, lines are circular.

diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js
index 086ef5972defedf09aba209ec6065c0bca94c7b7..9870546245bcebe5b5ad25ac18577aa8cc8aa913 100644 (file)
--- a/src/controllers/controller.polarArea.js
+++ b/src/controllers/controller.polarArea.js
@@ -20,6 +20,7 @@ module.exports = function(Chart) {
                        animateScale: true
                },
 
+               startAngle: -0.5 * Math.PI,
                aspectRatio: 1,
                legendCallback: function(chart) {
                        var text = [];
@@ -154,9 +155,10 @@ module.exports = function(Chart) {
                                }
                        }
 
-                       var negHalfPI = -0.5 * Math.PI;
+                       //var negHalfPI = -0.5 * Math.PI;
+                       var datasetStartAngle = opts.startAngle;
                        var distance = arc.hidden ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]);
-                       var startAngle = (negHalfPI) + (circumference * visibleCount);
+                       var startAngle = datasetStartAngle + (circumference * visibleCount);
                        var endAngle = startAngle + (arc.hidden ? 0 : circumference);
 
                        var resetRadius = animationOpts.animateScale ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]);
@@ -173,8 +175,8 @@ module.exports = function(Chart) {
                                        y: centerY,
                                        innerRadius: 0,
                                        outerRadius: reset ? resetRadius : distance,
-                                       startAngle: reset && animationOpts.animateRotate ? negHalfPI : startAngle,
-                                       endAngle: reset && animationOpts.animateRotate ? negHalfPI : endAngle,
+                                       startAngle: reset && animationOpts.animateRotate ? datasetStartAngle : startAngle,
+                                       endAngle: reset && animationOpts.animateRotate ? datasetStartAngle : endAngle,
                                        label: getValueAtIndexOrDefault(labels, index, labels[index])
                                }
                        });

diff --git a/test/controller.polarArea.tests.js b/test/controller.polarArea.tests.js
index 9d9b0881231ee2ca46326f27d6719170e48a7246..6ed0726e0fde88136de13bc86a602a552520022e 100644 (file)
--- a/test/controller.polarArea.tests.js
+++ b/test/controller.polarArea.tests.js
@@ -159,6 +159,52 @@ describe('Polar area controller tests', function() {
                }));
        });
 
+       it('should update elements with start angle from options', function() {
+               var chart = window.acquireChart({
+                       type: 'polarArea',
+                       data: {
+                               datasets: [{
+                                       data: [10, 15, 0, -4],
+                                       label: 'dataset2'
+                               }],
+                               labels: ['label1', 'label2', 'label3', 'label4']
+                       },
+                       options: {
+                               showLines: true,
+                               startAngle: 0, // default is -0.5 * Math.PI
+                               elements: {
+                                       arc: {
+                                               backgroundColor: 'rgb(255, 0, 0)',
+                                               borderColor: 'rgb(0, 255, 0)',
+                                               borderWidth: 1.2
+                                       }
+                               }
+                       }
+               });
+
+               var meta = chart.getDatasetMeta(0);
+               expect(meta.data.length).toBe(4);
+
+               [       { o: 156, s:              0, e: 0.5 * Math.PI },
+                       { o: 211, s:  0.5 * Math.PI, e:       Math.PI },
+                       { o:  45, s:        Math.PI, e: 1.5 * Math.PI },
+                       { o:   0, s:  1.5 * Math.PI, e: 2.0 * Math.PI }
+               ].forEach(function(expected, i) {
+                       expect(meta.data[i]._model.x).toBeCloseToPixel(256);
+                       expect(meta.data[i]._model.y).toBeCloseToPixel(272);
+                       expect(meta.data[i]._model.innerRadius).toBeCloseToPixel(0);
+                       expect(meta.data[i]._model.outerRadius).toBeCloseToPixel(expected.o);
+                       expect(meta.data[i]._model.startAngle).toBe(expected.s);
+                       expect(meta.data[i]._model.endAngle).toBe(expected.e);
+                       expect(meta.data[i]._model).toEqual(jasmine.objectContaining({
+                               backgroundColor: 'rgb(255, 0, 0)',
+                               borderColor: 'rgb(0, 255, 0)',
+                               borderWidth: 1.2,
+                               label: chart.data.labels[i]
+                       }));
+               });
+       });
+
        it('should handle number of data point changes in update', function() {
                var chart = window.acquireChart({
                        type: 'polarArea',