From: Bojidar Marinov Date: Fri, 11 Jul 2025 19:52:33 +0000 (+0300) Subject: Sync Doughnut chart legend options to legend plugin (#12096) X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=beb77e475b41c726dacc0b4899640a237a409b29;p=thirdparty%2FChart.js.git Sync Doughnut chart legend options to legend plugin (#12096) Fixes #12060 --- diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js index ff358df90..904dd8eb1 100644 --- a/src/controllers/controller.doughnut.js +++ b/src/controllers/controller.doughnut.js @@ -91,9 +91,8 @@ 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); @@ -101,12 +100,16 @@ export default class DoughnutController extends DatasetController { 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 }; diff --git a/test/specs/global.defaults.tests.js b/test/specs/global.defaults.tests.js index fb82e9f3d..c551270fd 100644 --- a/test/specs/global.defaults.tests.js +++ b/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); });