Polar area: startAngle in degrees, 0 at top.

docs/charts/polar.md

@@ -70,6 +70,7 @@ All these values, if `undefined`, fallback to the associated [`elements.arc.*`](
 ### Border Alignment
 
 The following values are supported for `borderAlign`.
+
 * `'center'` (default)
 * `'inner'`
 
@@ -93,7 +94,7 @@ These are the customisation options specific to Polar Area charts. These options
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
-| `startAngle` | `number` | `-0.5 * Math.PI` | Starting angle to draw arcs for the first item in a dataset.
+| `startAngle` | `number` | `0` | Starting angle to draw arcs for the first item in a dataset. In degrees, 0 is at top.
 | `animation.animateRotate` | `boolean` | `true` | If true, the chart will animate in with a rotation animation. This property is in the `options.animation` object.
 | `animation.animateScale` | `boolean` | `true` | If true, will animate scaling the chart from the center outwards.
 
@@ -102,6 +103,7 @@ These are the customisation options specific to Polar Area charts. These options
 We can also change these defaults values for each PolarArea type that is created, this object is available at `Chart.defaults.polarArea`. Changing the global options only affects charts created after the change. Existing charts are not changed.
 
 For example, to configure all new polar area charts with `animateScale = false` you would do:
+
 ```javascript
 Chart.defaults.polarArea.animation.animateScale = false;
 ```

src/controllers/controller.polarArea.js

@@ -30,7 +30,7 @@ defaults._set('polarArea', {
 		animateScale: true
 	},
 
-	startAngle: -0.5 * Math.PI,
+	startAngle: 0,
 	legendCallback: function(chart) {
 		var text = [];
 		text.push('<ul class="' + chart.id + '-legend">');
@@ -110,6 +110,12 @@ defaults._set('polarArea', {
 	}
 });
 
+function getStartAngleRadians(deg) {
+	// radianLinear scale draws angleLines using startAngle. 0 is excepted to be at top.
+	// Here we adjust to standard unit circle used in drawing, where 0 is at right.
+	return helpers.toRadians(deg) - 0.5 * Math.PI;
+}
+
 module.exports = DatasetController.extend({
 
 	dataElementType: elements.Arc,
@@ -120,7 +126,7 @@ module.exports = DatasetController.extend({
 		var me = this;
 		var dataset = me.getDataset();
 		var meta = me.getMeta();
-		var start = me.chart.options.startAngle || 0;
+		var start = getStartAngleRadians(me.chart.options.startAngle || 0);
 		var starts = me._starts = [];
 		var angles = me._angles = [];
 		var arcs = meta.data;
@@ -173,8 +179,7 @@ module.exports = DatasetController.extend({
 		var centerX = scale.xCenter;
 		var centerY = scale.yCenter;
 
-		// var negHalfPI = -0.5 * Math.PI;
-		var datasetStartAngle = opts.startAngle;
+		var datasetStartAngle = getStartAngleRadians(opts.startAngle);
 		var distance = arc.hidden ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]);
 		var startAngle = me._starts[index];
 		var endAngle = startAngle + (arc.hidden ? 0 : me._angles[index]);

src/scales/scale.radialLinear.js

@@ -428,10 +428,7 @@ module.exports = LinearScaleBase.extend({
 			this.chart.options.startAngle :
 			0;
 
-		var startAngleRadians = startAngle * Math.PI * 2 / 360;
-
-		// Start from the top instead of right, so remove a quarter of the circle
-		return index * angleMultiplier + startAngleRadians;
+		return index * angleMultiplier + helpers.toRadians(startAngle);
 	},
 
 	getDistanceFromCenterForValue: function(value) {

test/specs/controller.polarArea.tests.js

@@ -172,7 +172,7 @@ describe('Chart.controllers.polarArea', function() {
 				showLines: true,
 				legend: false,
 				title: false,
-				startAngle: 0, // default is -0.5 * Math.PI
+				startAngle: 90, // default is 0
 				elements: {
 					arc: {
 						backgroundColor: 'rgb(255, 0, 0)',