Enable pointStyle for doughnut, pie, and polar area charts (#9341)

* Enable pointStyle for doughnut, pie, and polar area charts

* Fix whitespace

diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js
index 0d4d135f2481825a212c4e2c94f2186ef499873c..20929bbe1f6f7d4be9784298b2e48c3dd47648d7 100644 (file)
--- a/src/controllers/controller.doughnut.js
+++ b/src/controllers/controller.doughnut.js
@@ -364,6 +364,8 @@ DoughnutController.overrides = {
         generateLabels(chart) {
           const data = chart.data;
           if (data.labels.length && data.datasets.length) {
+            const {labels: {pointStyle}} = chart.legend.options;
+
             return data.labels.map((label, i) => {
               const meta = chart.getDatasetMeta(0);
               const style = meta.controller.getStyle(i);
@@ -373,6 +375,7 @@ DoughnutController.overrides = {
                 fillStyle: style.backgroundColor,
                 strokeStyle: style.borderColor,
                 lineWidth: style.borderWidth,
+                pointStyle: pointStyle,
                 hidden: !chart.getDataVisibility(i),
 
                 // Extra data used for toggling the correct item

diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js
index 0c6fa0c99bdbd6e709d24c254e27f6e6ad7a9087..8a9a1b91e2d498997211d7a14eeeaeeca1cc9031 100644 (file)
--- a/src/controllers/controller.polarArea.js
+++ b/src/controllers/controller.polarArea.js
@@ -155,6 +155,8 @@ PolarAreaController.overrides = {
         generateLabels(chart) {
           const data = chart.data;
           if (data.labels.length && data.datasets.length) {
+            const {labels: {pointStyle}} = chart.legend.options;
+
             return data.labels.map((label, i) => {
               const meta = chart.getDatasetMeta(0);
               const style = meta.controller.getStyle(i);
@@ -164,6 +166,7 @@ PolarAreaController.overrides = {
                 fillStyle: style.backgroundColor,
                 strokeStyle: style.borderColor,
                 lineWidth: style.borderWidth,
+                pointStyle: pointStyle,
                 hidden: !chart.getDataVisibility(i),
 
                 // Extra data used for toggling the correct item

diff --git a/test/fixtures/plugin.legend/legend-doughnut-point-style.json b/test/fixtures/plugin.legend/legend-doughnut-point-style.json
new file mode 100644 (file)
index 0000000..6e644a3
--- /dev/null
+++ b/test/fixtures/plugin.legend/legend-doughnut-point-style.json
@@ -0,0 +1,29 @@
+{
+       "config": {
+               "type": "doughnut",
+               "data": {
+                       "labels": [""],
+                       "datasets": [{
+                               "data": [10],
+                               "backgroundColor": "#00ff00",
+                               "borderWidth": 0
+                       }]
+               },
+               "options": {
+                       "plugins": {
+                               "legend": {
+                                       "labels": {
+                                               "pointStyle": "triangle",
+                                               "usePointStyle": true
+                                       }
+                               }
+                       }
+               }
+       },
+       "options": {
+               "canvas": {
+                       "height": 256,
+                       "width": 512
+               }
+       }
+}

diff --git a/test/fixtures/plugin.legend/legend-doughnut-point-style.png b/test/fixtures/plugin.legend/legend-doughnut-point-style.png
new file mode 100644 (file)
index 0000000..b0b216b
Binary files /dev/null and b/test/fixtures/plugin.legend/legend-doughnut-point-style.png differ

diff --git a/test/specs/global.defaults.tests.js b/test/specs/global.defaults.tests.js
index b7fa9c8a27624893be80900ccdbacd29c53daeef..31b763b7eabdd02353336d43d343f99a56cbe214 100644 (file)
--- a/test/specs/global.defaults.tests.js
+++ b/test/specs/global.defaults.tests.js
@@ -103,7 +103,8 @@ describe('Default Configs', function() {
         index: 0,
         strokeStyle: '#000',
         textAlign: undefined,
-        lineWidth: 2
+        lineWidth: 2,
+        pointStyle: undefined
       }, {
         text: 'label2',
         fillStyle: 'green',
@@ -111,7 +112,8 @@ describe('Default Configs', function() {
         index: 1,
         strokeStyle: '#000',
         textAlign: undefined,
-        lineWidth: 2
+        lineWidth: 2,
+        pointStyle: undefined
       }, {
         text: 'label3',
         fillStyle: 'blue',
@@ -119,7 +121,8 @@ describe('Default Configs', function() {
         index: 2,
         strokeStyle: '#000',
         textAlign: undefined,
-        lineWidth: 2
+        lineWidth: 2,
+        pointStyle: undefined
       }];
       expect(chart.legend.legendItems).toEqual(expected);
     });
@@ -197,7 +200,8 @@ describe('Default Configs', function() {
         index: 0,
         strokeStyle: '#000',
         textAlign: undefined,
-        lineWidth: 2
+        lineWidth: 2,
+        pointStyle: undefined
       }, {
         text: 'label2',
         fillStyle: 'green',
@@ -205,7 +209,8 @@ describe('Default Configs', function() {
         index: 1,
         strokeStyle: '#000',
         textAlign: undefined,
-        lineWidth: 2
+        lineWidth: 2,
+        pointStyle: undefined
       }, {
         text: 'label3',
         fillStyle: 'blue',
@@ -213,7 +218,8 @@ describe('Default Configs', function() {
         index: 2,
         strokeStyle: '#000',
         textAlign: undefined,
-        lineWidth: 2
+        lineWidth: 2,
+        pointStyle: undefined
       }];
       expect(chart.legend.legendItems).toEqual(expected);
     });