diff --git a/docs/charts/polar.md b/docs/charts/polar.md
index f46eea3b0a4..ff5baf27195 100644
--- a/docs/charts/polar.md
+++ b/docs/charts/polar.md
@@ -94,7 +94,7 @@ These are the customisation options specific to Polar Area charts. These options
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
-| `startAngle` | `number` | `0` | Starting angle to draw arcs for the first item in a dataset. In degrees, 0 is at top.
+| `startAngle` | `number` | `-0.5 * Math.PI` | Starting angle to draw arcs for the first item in a dataset.
| `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.
diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js
index 160150e2644..33038aa8e81 100644
--- a/src/controllers/controller.polarArea.js
+++ b/src/controllers/controller.polarArea.js
@@ -30,7 +30,7 @@ defaults._set('polarArea', {
animateScale: true
},
- startAngle: 0,
+ startAngle: -0.5 * Math.PI,
legendCallback: function(chart) {
var text = [];
text.push('
');
@@ -110,12 +110,6 @@ 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,
@@ -126,7 +120,7 @@ module.exports = DatasetController.extend({
var me = this;
var dataset = me.getDataset();
var meta = me.getMeta();
- var start = getStartAngleRadians(me.chart.options.startAngle || 0);
+ var start = me.chart.options.startAngle || 0;
var starts = me._starts = [];
var angles = me._angles = [];
var arcs = meta.data;
@@ -179,7 +173,7 @@ module.exports = DatasetController.extend({
var centerX = scale.xCenter;
var centerY = scale.yCenter;
- var datasetStartAngle = getStartAngleRadians(opts.startAngle);
+ var datasetStartAngle = 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]);
diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js
index e5faf0cb0fe..fd11bd58be6 100644
--- a/src/scales/scale.radialLinear.js
+++ b/src/scales/scale.radialLinear.js
@@ -423,12 +423,17 @@ module.exports = LinearScaleBase.extend({
},
getIndexAngle: function(index) {
- var angleMultiplier = (Math.PI * 2) / getValueCount(this);
- var startAngle = this.chart.options && this.chart.options.startAngle ?
- this.chart.options.startAngle :
- 0;
+ var me = this;
+ var angleMultiplier = (Math.PI * 2) / getValueCount(me);
+ var startAngle = me.chart.options && me.chart.options.startAngle
+ ? me.chart.options.startAngle
+ : 0;
+
+ var startAngleRadians = (me.chart.config.type === 'polarArea')
+ ? startAngle + Math.PI * 0.5
+ : helpers.toRadians(startAngle);
- return index * angleMultiplier + helpers.toRadians(startAngle);
+ return index * angleMultiplier + startAngleRadians;
},
getDistanceFromCenterForValue: function(value) {
diff --git a/test/fixtures/controller.polarArea/angle-lines.json b/test/fixtures/controller.polarArea/angle-lines.json
new file mode 100644
index 00000000000..01474c028d6
--- /dev/null
+++ b/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
+ }
+ }
+ }
+ }
+}
diff --git a/test/fixtures/controller.polarArea/angle-lines.png b/test/fixtures/controller.polarArea/angle-lines.png
new file mode 100644
index 00000000000..3890d7cb64a
Binary files /dev/null and b/test/fixtures/controller.polarArea/angle-lines.png differ
diff --git a/test/specs/controller.polarArea.tests.js b/test/specs/controller.polarArea.tests.js
index 19ce1dab550..d439251fa4f 100644
--- a/test/specs/controller.polarArea.tests.js
+++ b/test/specs/controller.polarArea.tests.js
@@ -172,7 +172,7 @@ describe('Chart.controllers.polarArea', function() {
showLines: true,
legend: false,
title: false,
- startAngle: 90, // default is 0
+ startAngle: 0, // default is -0.5 * Math.PI
elements: {
arc: {
backgroundColor: 'rgb(255, 0, 0)',