From 7ec99c38c1b41b16cf7cad433569af56c2544d63 Mon Sep 17 00:00:00 2001
From: Jukka Kurkela <jukka.kurkela@gmail.com>
Date: Mon, 8 Mar 2021 20:36:54 +0200
Subject: [PATCH] Move startAngle to scale options (#8593)

---
 docs/docs/axes/radial/linear.mdx          |  1 +
 docs/docs/charts/polar.mdx                |  1 -
 docs/docs/getting-started/v3-migration.md |  1 +
 src/controllers/controller.polarArea.js   | 11 +++--------
 src/scales/scale.radialLinear.js          |  9 ++++-----
 test/specs/controller.polarArea.tests.js  |  6 +++++-
 test/specs/scale.radialLinear.tests.js    |  8 +++++---
 7 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/docs/docs/axes/radial/linear.mdx b/docs/docs/axes/radial/linear.mdx
index 47c57291f85..0dcd6caaada 100644
--- a/docs/docs/axes/radial/linear.mdx
+++ b/docs/docs/axes/radial/linear.mdx
@@ -21,6 +21,7 @@ Namespace: `options.scales[scaleId]`
 | `angleLines` | `object` | | Angle line configuration. [more...](#angle-line-options)
 | `beginAtZero` | `boolean` | `false` | if true, scale will include 0 if it is not already included.
 | `pointLabels` | `object` | | Point label configuration. [more...](#point-label-options)
+| `startAngle` | `number` | `0` | Starting angle of the scale. In degrees, 0 is at top.
 
 <CommonAll />
 
diff --git a/docs/docs/charts/polar.mdx b/docs/docs/charts/polar.mdx
index e1644fbd8e3..a640c882d73 100644
--- a/docs/docs/charts/polar.mdx
+++ b/docs/docs/charts/polar.mdx
@@ -112,7 +112,6 @@ 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.
 | `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/docs/docs/getting-started/v3-migration.md b/docs/docs/getting-started/v3-migration.md
index 8803957ad06..9068d9fe6e4 100644
--- a/docs/docs/getting-started/v3-migration.md
+++ b/docs/docs/getting-started/v3-migration.md
@@ -101,6 +101,7 @@ A number of changes were made to the configuration options passed to the `Chart`
 * `scales.[x/y]Axes.zeroLine*` options of axes were removed. Use scriptable scale options instead.
 * The dataset option `steppedLine` was removed. Use `stepped`
 * The chart option `showLines` was renamed to `showLine` to match the dataset option.
+* The chart option `startAngle` was moved to `radial` scale options.
 * To override the platform class used in a chart instance, pass `platform: PlatformClass` in the config object. Note that the class should be passed, not an instance of the class.
 * `aspectRatio` defaults to 1 for doughnut, pie, polarArea, and radar charts
 * `TimeScale` does not read `t` from object data by default anymore. The default property is `x` or `y`, depending on the orientation. See [data structures](../general/data-structures.md) for details on how to change the default.
diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js
index ec09716a830..408ca22aa44 100644
--- a/src/controllers/controller.polarArea.js
+++ b/src/controllers/controller.polarArea.js
@@ -1,12 +1,6 @@
 import DatasetController from '../core/core.datasetController';
 import {toRadians, PI} from '../helpers/index';
 
-function getStartAngleRadians(deg) {
-  // radialLinear scale draws angleLines using startAngle. 0 is expected to be at top.
-  // Here we adjust to standard unit circle used in drawing, where 0 is at right.
-  return toRadians(deg) - 0.5 * PI;
-}
-
 export default class PolarAreaController extends DatasetController {
 
   constructor(chart, datasetIndex) {
@@ -51,7 +45,7 @@ export default class PolarAreaController extends DatasetController {
     const scale = me._cachedMeta.rScale;
     const centerX = scale.xCenter;
     const centerY = scale.yCenter;
-    const datasetStartAngle = getStartAngleRadians(opts.startAngle);
+    const datasetStartAngle = scale.getIndexAngle(0) - 0.5 * PI;
     let angle = datasetStartAngle;
     let i;
 
@@ -198,7 +192,8 @@ PolarAreaController.overrides = {
       },
       pointLabels: {
         display: false
-      }
+      },
+      startAngle: 0
     }
   }
 };
diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js
index 88034634e2f..cb1cdb63d8d 100644
--- a/src/scales/scale.radialLinear.js
+++ b/src/scales/scale.radialLinear.js
@@ -368,11 +368,8 @@ export default class RadialLinearScale extends LinearScaleBase {
   }
 
   getIndexAngle(index) {
-    const chart = this.chart;
-    const angleMultiplier = TAU / chart.data.labels.length;
-    const options = chart.options || {};
-    const startAngle = options.startAngle || 0;
-
+    const angleMultiplier = TAU / this.getLabels().length;
+    const startAngle = this.options.startAngle || 0;
     return _normalizeAngle(index * angleMultiplier + toRadians(startAngle));
   }
 
@@ -564,6 +561,8 @@ RadialLinearScale.defaults = {
     circular: false
   },
 
+  startAngle: 0,
+
   // label settings
   ticks: {
     // Boolean - Show a backdrop to the scale label
diff --git a/test/specs/controller.polarArea.tests.js b/test/specs/controller.polarArea.tests.js
index 46c9eb612b7..459d60e9696 100644
--- a/test/specs/controller.polarArea.tests.js
+++ b/test/specs/controller.polarArea.tests.js
@@ -160,7 +160,11 @@ describe('Chart.controllers.polarArea', function() {
           legend: false,
           title: false,
         },
-        startAngle: 90, // default is 0
+        scales: {
+          r: {
+            startAngle: 90, // default is 0
+          }
+        },
         elements: {
           arc: {
             backgroundColor: 'rgb(255, 0, 0)',
diff --git a/test/specs/scale.radialLinear.tests.js b/test/specs/scale.radialLinear.tests.js
index 955a0353a6d..68ed3224949 100644
--- a/test/specs/scale.radialLinear.tests.js
+++ b/test/specs/scale.radialLinear.tests.js
@@ -31,6 +31,8 @@ describe('Test the radial linear scale', function() {
         circular: false
       },
 
+      startAngle: 0,
+
       ticks: {
         color: Chart.defaults.color,
         showLabelBackdrop: true,
@@ -500,6 +502,7 @@ describe('Test the radial linear scale', function() {
       options: {
         scales: {
           r: {
+            startAngle: 15,
             pointLabels: {
               callback: function(value, index) {
                 return index.toString();
@@ -507,7 +510,6 @@ describe('Test the radial linear scale', function() {
             }
           }
         },
-        startAngle: 15
       }
     });
 
@@ -521,7 +523,7 @@ describe('Test the radial linear scale', function() {
       expect(radToNearestDegree(chart.scales.r.getIndexAngle(i))).toBe(15 + (slice * i));
     }
 
-    chart.options.startAngle = 0;
+    chart.scales.r.options.startAngle = 0;
     chart.update();
 
     for (var x = 0; x < 5; x++) {
@@ -569,7 +571,7 @@ describe('Test the radial linear scale', function() {
       textAlign: ['right', 'right', 'left', 'left', 'left'],
       y: [82, 366, 506, 319, 53]
     }].forEach(function(expected) {
-      chart.options.startAngle = expected.startAngle;
+      scale.options.startAngle = expected.startAngle;
       chart.update();
 
       scale.ctx = window.createMockContext();