Add centerPointLabels option for linear radial scale

src/controllers/controller.polarArea.js

@@ -205,7 +205,8 @@ PolarAreaController.overrides = {
         circular: true
       },
       pointLabels: {
-        display: false
+        display: false,
+        polarChartLabel: true
       },
       startAngle: 0
     }

src/scales/scale.radialLinear.js

@@ -1,10 +1,10 @@
 import defaults from '../core/core.defaults';
 import {_longestText, renderText} from '../helpers/helpers.canvas';
-import {HALF_PI, isNumber, TAU, toDegrees, toRadians, _normalizeAngle} from '../helpers/helpers.math';
+import {HALF_PI, isNumber, TAU, toDegrees, toRadians, _normalizeAngle, PI} from '../helpers/helpers.math';
 import LinearScaleBase from './scale.linearbase';
 import Ticks from '../core/core.ticks';
 import {valueOrDefault, isArray, isFinite, callback as callCallback, isNullOrUndef} from '../helpers/helpers.core';
-import {createContext, toFont, toPadding} from '../helpers/helpers.options';
+import {toFont, toPadding} from '../helpers/helpers.options';
 
 function getTickBackdropHeight(opts) {
   const tickOpts = opts.ticks;
@@ -133,12 +133,13 @@ function buildPointLabelItems(scale, labelSizes, padding) {
   const opts = scale.options;
   const tickBackdropHeight = getTickBackdropHeight(opts);
   const outerDistance = scale.getDistanceFromCenterForValue(opts.ticks.reverse ? scale.min : scale.max);
+  const additionalAngle = opts.pointLabels.polarChartLabel ? PI / valueCount : 0;
 
   for (let i = 0; i < valueCount; i++) {
     // Extra pixels out for some label spacing
     const extra = (i === 0 ? tickBackdropHeight / 2 : 0);
-    const pointLabelPosition = scale.getPointPosition(i, outerDistance + extra + padding[i]);
-    const angle = toDegrees(scale.getIndexAngle(i));
+    const pointLabelPosition = scale.getPointPosition(i, outerDistance + extra + padding[i], {additionalAngle});
+    const angle = toDegrees(pointLabelPosition.angle + HALF_PI);
     const size = labelSizes[i];
     const y = yForAngle(pointLabelPosition.y, size.h, angle);
     const textAlign = getTextAlignForAngle(angle);
@@ -265,7 +266,7 @@ function numberOrZero(param) {
 }
 
 function createPointLabelContext(parent, index, label) {
-  return createContext(parent, {
+  return Object.assign(Object.create(parent), {
     label,
     index,
     type: 'pointLabel'
@@ -404,8 +405,8 @@ export default class RadialLinearScale extends LinearScaleBase {
     }
   }
 
-  getPointPosition(index, distanceFromCenter) {
-    const angle = this.getIndexAngle(index) - HALF_PI;
+  getPointPosition(index, distanceFromCenter, {additionalAngle = 0} = {}) {
+    const angle = this.getIndexAngle(index) - HALF_PI + additionalAngle;
     return {
       x: Math.cos(angle) * distanceFromCenter + this.xCenter,
       y: Math.sin(angle) * distanceFromCenter + this.yCenter,
@@ -618,7 +619,10 @@ RadialLinearScale.defaults = {
     },
 
     // Number - Additionl padding between scale and pointLabel
-    padding: 5
+    padding: 5,
+
+    // Boolean - if true, center point labels to slices in polar chart
+    polarChartLabel: false
   }
 };
 

test/specs/scale.radialLinear.tests.js

@@ -48,7 +48,8 @@ describe('Test the radial linear scale', function() {
           size: 10
         },
         callback: defaultConfig.pointLabels.callback,
-        padding: 5
+        padding: 5,
+        polarChartLabel: false
       }
     });
 
@@ -590,4 +591,58 @@ describe('Test the radial linear scale', function() {
       });
     });
   });
+
+  it('should correctly get the point positions in polar area graph', function() {
+    var chart = window.acquireChart({
+      type: 'polarArea',
+      data: {
+        datasets: [{
+          data: [10, 5, 0, 25, 78]
+        }],
+        labels: ['label1', 'label2', 'label3', 'label4', 'label5']
+      },
+      options: {
+        scales: {
+          r: {
+            pointLabels: {
+              display: true,
+              padding: 5
+            },
+            ticks: {
+              display: false,
+            }
+          }
+        }
+      }
+    });
+
+    const PI = Math.PI;
+    const lavelNum = 5;
+    const padding = 5;
+    const pointLabelItems = chart.scales.r._pointLabelItems;
+    const additionalAngle = PI / lavelNum;
+    const opts = chart.scales.r.options;
+    const outerDistance = chart.scales.r.getDistanceFromCenterForValue(opts.ticks.reverse ? chart.scales.r.min : chart.scales.r.max);
+    const tickBackdropHeight = 0;
+    const yForAngle = function(y, h, angle) {
+      if (angle === 90 || angle === 270) {
+        y -= (h / 2);
+      } else if (angle > 270 || angle < 90) {
+        y -= h;
+      }
+      return y;
+    };
+    const toDegrees = function(radians) {
+      return radians * (180 / PI);
+    };
+
+    for (var i = 0; i < 5; i++) {
+      const extra = (i === 0 ? tickBackdropHeight / 2 : 0);
+      const pointLabelItem = pointLabelItems[i];
+      const pointPosition = chart.scales.r.getPointPosition(i, outerDistance + extra + padding, {additionalAngle});
+      expect(pointLabelItem.x).toBe(pointPosition.x);
+      expect(pointLabelItem.y).toBe(yForAngle(pointPosition.y, 12, toDegrees(pointPosition.angle + PI / 2)));
+    }
+
+  });
 });