Move startAngle to scale options (#8593)

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 />
 

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.
 

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.

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
     }
   }
 };

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

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

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();