#8854: Added percentage support for dataLabels.distance

highcharts · Apr 9, 2019 · 52cc62b · 52cc62b
1 parent eec0c71
commit 52cc62b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 20 deletions.
diff --git a/js/parts/PieSeries.js b/js/parts/PieSeries.js
@@ -138,8 +138,8 @@
  * @product highcharts
  *//**
  * The distance of the data label from the pie's edge. Negative numbers put the
- * data label on top of the pie slices. Connectors are only shown for data
- * labels outside the pie.
+ * data label on top of the pie slices. Can also be defined as a percentage of
+ * pie's radius. Connectors are only shown for data labels outside the pie.
  *
  * @see {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/pie-datalabels-distance/|Highcharts-Demo:}
  *      Data labels on top of the pie
@@ -732,21 +732,6 @@ seriesType('pie', 'line',
 
                 point = points[i];
 
-                // Used for distance calculation for specific point.
-                point.labelDistance = pick(
-                    (
-                        point.options.dataLabels &&
-                        point.options.dataLabels.distance
-                    ),
-                    labelDistance
-                );
-
-                // Saved for later dataLabels distance calculation.
-                series.maxLabelDistance = Math.max(
-                    series.maxLabelDistance || 0,
-                    point.labelDistance
-                );
-
                 // set start and end angle
                 start = startAngleRad + (cumulative * circ);
                 if (!ignoreHiddenPoint || point.visible) {
@@ -765,6 +750,28 @@ seriesType('pie', 'line',
                     end: Math.round(end * precision) / precision
                 };
 
+                // Used for distance calculation for specific point.
+                point.labelDistance = pick(
+                    (
+                        point.options.dataLabels &&
+                        point.options.dataLabels.distance
+                    ),
+                    labelDistance
+                );
+
+                // Compute point.labelDistance if it's defined as percentage
+                // of slice radius (#8854)
+                if (H.isString(point.labelDistance)) {
+                    point.labelDistance = point.shapeArgs.r *
+                      H.relativeLength(point.labelDistance, 1);
+                }
+
+                // Saved for later dataLabels distance calculation.
+                series.maxLabelDistance = Math.max(
+                    series.maxLabelDistance || 0,
+                    point.labelDistance
+                );
+
                 // The angle must stay within -90 and 270 (#2645)
                 angle = (end + start) / 2;
                 if (angle > 1.5 * Math.PI) {

diff --git a/samples/highcharts/plotoptions/pie-datalabels-distance/demo.js b/samples/highcharts/plotoptions/pie-datalabels-distance/demo.js
@@ -10,7 +10,7 @@ Highcharts.chart('container', {
     plotOptions: {
         pie: {
             dataLabels: {
-                distance: -30
+                distance: '-30%'
             }
         }
     },
@@ -24,10 +24,10 @@ Highcharts.chart('container', {
                 name: 'Chrome',
                 y: 3.1,
                 dataLabels: {
-                    distance: 30 // Individual distance
+                    distance: 30 // Individual distance (in px)
                 }
             },
             ['Other',    5.4]
         ]
     }]
-});
+});