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

* Enable pointStyle for doughnut, pie, and polar area charts * Fix whitespace
chartjs · Jul 1, 2021 · 3934935 · 3934935
1 parent 3a79032
commit 3934935
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
diff --git a/test/specs/global.defaults.tests.js b/test/specs/global.defaults.tests.js
@@ -103,23 +103,26 @@ describe('Default Configs', function() {
         index: 0,
         strokeStyle: '#000',
         textAlign: undefined,
-        lineWidth: 2
+        lineWidth: 2,
+        pointStyle: undefined
       }, {
         text: 'label2',
         fillStyle: 'green',
         hidden: false,
         index: 1,
         strokeStyle: '#000',
         textAlign: undefined,
-        lineWidth: 2
+        lineWidth: 2,
+        pointStyle: undefined
       }, {
         text: 'label3',
         fillStyle: 'blue',
         hidden: false,
         index: 2,
         strokeStyle: '#000',
         textAlign: undefined,
-        lineWidth: 2
+        lineWidth: 2,
+        pointStyle: undefined
       }];
       expect(chart.legend.legendItems).toEqual(expected);
     });
@@ -197,23 +200,26 @@ describe('Default Configs', function() {
         index: 0,
         strokeStyle: '#000',
         textAlign: undefined,
-        lineWidth: 2
+        lineWidth: 2,
+        pointStyle: undefined
       }, {
         text: 'label2',
         fillStyle: 'green',
         hidden: false,
         index: 1,
         strokeStyle: '#000',
         textAlign: undefined,
-        lineWidth: 2
+        lineWidth: 2,
+        pointStyle: undefined
       }, {
         text: 'label3',
         fillStyle: 'blue',
         hidden: false,
         index: 2,
         strokeStyle: '#000',
         textAlign: undefined,
-        lineWidth: 2
+        lineWidth: 2,
+        pointStyle: undefined
       }];
       expect(chart.legend.legendItems).toEqual(expected);
     });