Merge pull request #2947 from chartjs/fix/524

Add polar area start angle setting

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.

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,
+					startAngle: reset && animationOpts.animateRotate ? datasetStartAngle : startAngle,
-					endAngle: reset && animationOpts.animateRotate ? negHalfPI : endAngle,
+					endAngle: reset && animationOpts.animateRotate ? datasetStartAngle : endAngle,
 					label: getValueAtIndexOrDefault(labels, index, labels[index])
 				}
 			});

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',