Sync Doughnut chart legend options to legend plugin (#12096)

Fixes #12060

Author: bojidar-bg

src/controllers/controller.doughnut.js

@@ -91,22 +91,25 @@ export default class DoughnutController extends DatasetController {
         labels: {
           generateLabels(chart) {
             const data = chart.data;
+            const {labels: {pointStyle, textAlign, color, useBorderRadius, borderRadius}} = chart.legend.options;
             if (data.labels.length && data.datasets.length) {
-              const {labels: {pointStyle, color}} = chart.legend.options;
-
               return data.labels.map((label, i) => {
                 const meta = chart.getDatasetMeta(0);
                 const style = meta.controller.getStyle(i);
 
                 return {
                   text: label,
                   fillStyle: style.backgroundColor,
-                  strokeStyle: style.borderColor,
                   fontColor: color,
+                  hidden: !chart.getDataVisibility(i),
+                  lineDash: style.borderDash,
+                  lineDashOffset: style.borderDashOffset,
+                  lineJoin: style.borderJoinStyle,
                   lineWidth: style.borderWidth,
+                  strokeStyle: style.borderColor,
+                  textAlign: textAlign,
                   pointStyle: pointStyle,
-                  hidden: !chart.getDataVisibility(i),
-
+                  borderRadius: useBorderRadius && (borderRadius || style.borderRadius),
                   // Extra data used for toggling the correct item
                   index: i
                 };

test/specs/global.defaults.tests.js

@@ -14,36 +14,81 @@ describe('Default Configs', function() {
         },
       });
 
-      var expected = [{
-        text: 'label1',
-        fillStyle: 'red',
+      var expectedCommon = {
         fontColor: '#666',
         hidden: false,
-        index: 0,
         strokeStyle: '#000',
         textAlign: undefined,
         lineWidth: 2,
-        pointStyle: undefined
+        pointStyle: undefined,
+        lineDash: [],
+        lineDashOffset: 0,
+        lineJoin: undefined,
+        borderRadius: undefined,
+      };
+
+      var expected = [{
+        text: 'label1',
+        fillStyle: 'red',
+        index: 0,
+        ...expectedCommon,
       }, {
         text: 'label2',
         fillStyle: 'green',
-        fontColor: '#666',
-        hidden: false,
         index: 1,
-        strokeStyle: '#000',
-        textAlign: undefined,
-        lineWidth: 2,
-        pointStyle: undefined
+        ...expectedCommon,
       }, {
         text: 'label3',
         fillStyle: 'blue',
+        index: 2,
+        ...expectedCommon,
+      }];
+      expect(chart.legend.legendItems).toEqual(expected);
+    });
+
+    it('should return correct legend label objects with border radius', function() {
+      var chart = window.acquireChart({
+        type: 'doughnut',
+        data: {
+          labels: ['label1'],
+          datasets: [{
+            data: [10],
+            backgroundColor: ['red'],
+            borderWidth: 2,
+            borderColor: '#000',
+            borderDash: [1, 2, 3],
+            borderDashOffset: 1,
+            borderJoinStyle: 'miter',
+            borderRadius: 3,
+          }]
+        },
+        options: {
+          plugins: {
+            legend: {
+              labels: {
+                useBorderRadius: true,
+                borderRadius: 5,
+                textAlign: 'left',
+              }
+            }
+          }
+        }
+      });
+
+      var expected = [{
+        text: 'label1',
+        fillStyle: 'red',
+        index: 0,
         fontColor: '#666',
         hidden: false,
-        index: 2,
         strokeStyle: '#000',
-        textAlign: undefined,
+        textAlign: 'left',
         lineWidth: 2,
-        pointStyle: undefined
+        pointStyle: undefined,
+        lineDash: [1, 2, 3],
+        lineDashOffset: 1,
+        lineJoin: 'miter',
+        borderRadius: 5
       }];
       expect(chart.legend.legendItems).toEqual(expected);
     });