Polar area: align start angle with angleLines

docs/charts/polar.md

@@ -101,7 +101,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.
 
@@ -110,6 +110,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;
 ```

docs/getting-started/v3-migration.md

@@ -32,6 +32,7 @@ Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released
 
 ### Options
 
+* `Polar area` `startAngle` option is now consistent with `Radar`, 0 is at top and value is in degrees. Default is changed from `-½π` to  `0`.
 * `scales.[x/y]Axes` arrays were removed. Scales are now configured directly to `options.scales` object with the object key being the scale Id.
 * `scales.[x/y]Axes.barPercentage` was moved to dataset option `barPercentage`
 * `scales.[x/y]Axes.barThickness` was moved to dataset option `barThickness`

src/controllers/controller.polarArea.js

@@ -32,7 +32,7 @@ defaults._set('polarArea', {
 		}
 	},
 
-	startAngle: -0.5 * Math.PI,
+	startAngle: 0,
 	legendCallback: function(chart) {
 		var list = document.createElement('ul');
 		var data = chart.data;
@@ -106,6 +106,12 @@ defaults._set('polarArea', {
 	}
 });
 
+function getStartAngleRadians(deg) {
+	// radialLinear 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.math.toRadians(deg) - 0.5 * Math.PI;
+}
+
 module.exports = DatasetController.extend({
 
 	dataElementType: elements.Arc,
@@ -138,13 +144,10 @@ module.exports = DatasetController.extend({
 	},
 
 	update: function(mode) {
-		var me = this;
-		var meta = me._cachedMeta;
-		var arcs = meta.data;
-
-		me._updateRadius();
+		const arcs = this._cachedMeta.data;
 
-		me.updateElements(arcs, 0, mode);
+		this._updateRadius();
+		this.updateElements(arcs, 0, mode);
 	},
 
 	/**
@@ -175,7 +178,7 @@ module.exports = DatasetController.extend({
 		const scale = chart.scales.r;
 		const centerX = scale.xCenter;
 		const centerY = scale.yCenter;
-		const datasetStartAngle = opts.startAngle || 0;
+		const datasetStartAngle = getStartAngleRadians(opts.startAngle);
 		let angle = datasetStartAngle;
 		let i;
 

src/helpers/helpers.math.js

@@ -83,11 +83,11 @@ export const sign = Math.sign ?
 	};
 
 export function toRadians(degrees) {
-	return degrees * (Math.PI / 180);
+	return degrees * (PI / 180);
 }
 
 export function toDegrees(radians) {
-	return radians * (180 / Math.PI);
+	return radians * (180 / PI);
 }
 
 /**
@@ -118,8 +118,8 @@ export function getAngleFromPoint(centrePoint, anglePoint) {
 
 	var angle = Math.atan2(distanceFromYCenter, distanceFromXCenter);
 
-	if (angle < (-0.5 * Math.PI)) {
-		angle += 2.0 * Math.PI; // make sure the returned angle is in the range of (-PI/2, 3PI/2]
+	if (angle < (-0.5 * PI)) {
+		angle += TAU; // make sure the returned angle is in the range of (-PI/2, 3PI/2]
 	}
 
 	return {

src/scales/scale.radialLinear.js

@@ -2,7 +2,7 @@
 
 import defaults from '../core/core.defaults';
 import helpers from '../helpers/index';
-import {isNumber, toDegrees} from '../helpers/helpers.math';
+import {isNumber, toDegrees, toRadians, _normalizeAngle} from '../helpers/helpers.math';
 import LinearScaleBase from './scale.linearbase';
 import Ticks from '../core/core.ticks';
 
@@ -157,7 +157,7 @@ function fitWithPointLabels(scale) {
 
 		// Add quarter circle to make degree 0 mean top of circle
 		var angleRadians = scale.getIndexAngle(i);
-		var angle = toDegrees(angleRadians) % 360;
+		var angle = toDegrees(angleRadians);
 		var hLimits = determineLimits(angle, pointPosition.x, textSize.w, 0, 180);
 		var vLimits = determineLimits(angle, pointPosition.y, textSize.h, 90, 270);
 
@@ -380,14 +380,11 @@ class RadialLinearScale extends LinearScaleBase {
 
 	getIndexAngle(index) {
 		var chart = this.chart;
-		var angleMultiplier = 360 / chart.data.labels.length;
+		var angleMultiplier = Math.PI * 2 / chart.data.labels.length;
 		var options = chart.options || {};
 		var startAngle = options.startAngle || 0;
 
-		// Start from the top instead of right, so remove a quarter of the circle
-		var angle = (index * angleMultiplier + startAngle) % 360;
-
-		return (angle < 0 ? angle + 360 : angle) * Math.PI * 2 / 360;
+		return _normalizeAngle(index * angleMultiplier + toRadians(startAngle));
 	}
 
 	getDistanceFromCenterForValue(value) {

test/fixtures/controller.polarArea/angle-lines.json

@@ -0,0 +1,35 @@
+{
+	"threshold": 0.05,
+    "config": {
+        "type": "polarArea",
+        "data": {
+            "labels": ["A", "B", "C", "D", "E"],
+            "datasets": [{
+                "data": [11, 16, 21, 7, 10],
+                "backgroundColor": [
+                    "rgba(255, 99, 132, 0.8)",
+                    "rgba(54, 162, 235, 0.8)",
+                    "rgba(255, 206, 86, 0.8)",
+                    "rgba(75, 192, 192, 0.8)",
+                    "rgba(153, 102, 255, 0.8)",
+                    "rgba(255, 159, 64, 0.8)"
+                ]
+            }]
+		},
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scale": {
+				"display": true,
+				"angleLines": {
+					"display": true,
+					"color": "#000"
+				},
+				"ticks": {
+					"display": false
+				}
+            }
+        }
+    }
+}

test/specs/controller.polarArea.tests.js

@@ -156,7 +156,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)',

test/specs/scale.radialLinear.tests.js

@@ -535,7 +535,7 @@ describe('Test the radial linear scale', function() {
 			scale.ctx.getCalls().filter(function(x) {
 				return x.name === 'setTextAlign';
 			}).forEach(function(x, i) {
-				expect(x.args[0]).toBe(expected.textAlign[i]);
+				expect(x.args[0]).withContext('startAngle: ' + expected.startAngle + ', tick: ' + i).toBe(expected.textAlign[i]);
 			});
 
 			scale.ctx.getCalls().filter(function(x) {