diff --git a/docs/configuration/legend.md b/docs/configuration/legend.md index 252a38909a2..e1ff2cbf869 100644 --- a/docs/configuration/legend.md +++ b/docs/configuration/legend.md @@ -90,6 +90,9 @@ Items passed to the legend `onClick` function are the ones returned from `labels // Fill style of the legend box fillStyle: Color, + // Text color + fontColor: Color, + // If true, this item represents a hidden dataset. Label will be rendered with a strike-through effect hidden: boolean, diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js index 30f2507d675..e1d3c65c1d6 100644 --- a/src/plugins/plugin.legend.js +++ b/src/plugins/plugin.legend.js @@ -300,8 +300,6 @@ export class Legend extends Element { ctx.textAlign = rtlHelper.textAlign('left'); ctx.textBaseline = 'middle'; ctx.lineWidth = 0.5; - ctx.strokeStyle = fontColor; // for strikethrough effect - ctx.fillStyle = fontColor; // render in correct colour ctx.font = labelFont.string; const {boxWidth, boxHeight, itemHeight} = getBoxSize(labelOpts, fontSize); @@ -381,6 +379,10 @@ export class Legend extends Element { const lineHeight = itemHeight + padding; me.legendItems.forEach((legendItem, i) => { + // TODO: Remove fallbacks at v4 + ctx.strokeStyle = legendItem.fontColor || fontColor; // for strikethrough effect + ctx.fillStyle = legendItem.fontColor || fontColor; // render in correct colour + const textWidth = ctx.measureText(legendItem.text).width; const textAlign = rtlHelper.textAlign(legendItem.textAlign || (legendItem.textAlign = labelOpts.textAlign)); const width = boxWidth + (fontSize / 2) + textWidth; @@ -631,7 +633,7 @@ export default { // lineWidth : generateLabels(chart) { const datasets = chart.data.datasets; - const {labels: {usePointStyle, pointStyle, textAlign}} = chart.legend.options; + const {labels: {usePointStyle, pointStyle, textAlign, color}} = chart.legend.options; return chart._getSortedDatasetMetas().map((meta) => { const style = meta.controller.getStyle(usePointStyle ? 0 : undefined); @@ -640,6 +642,7 @@ export default { return { text: datasets[meta.index].label, fillStyle: style.backgroundColor, + fontColor: color, hidden: !meta.visible, lineCap: style.borderCapStyle, lineDash: style.borderDash, diff --git a/test/specs/plugin.legend.tests.js b/test/specs/plugin.legend.tests.js index 7f0c26f604f..701b07a82a0 100644 --- a/test/specs/plugin.legend.tests.js +++ b/test/specs/plugin.legend.tests.js @@ -62,6 +62,7 @@ describe('Legend block tests', function() { expect(chart.legend.legendItems).toEqual([{ text: 'dataset1', fillStyle: '#f31', + fontColor: '#666', hidden: false, lineCap: undefined, lineDash: undefined, @@ -76,6 +77,7 @@ describe('Legend block tests', function() { }, { text: 'dataset2', fillStyle: 'rgba(0,0,0,0.1)', + fontColor: '#666', hidden: true, lineCap: undefined, lineDash: undefined, @@ -90,6 +92,7 @@ describe('Legend block tests', function() { }, { text: 'dataset3', fillStyle: 'rgba(0,0,0,0.1)', + fontColor: '#666', hidden: false, lineCap: undefined, lineDash: undefined, @@ -135,6 +138,7 @@ describe('Legend block tests', function() { expect(chart.legend.legendItems).toEqual([{ text: 'dataset1', fillStyle: '#f31', + fontColor: '#666', hidden: false, lineCap: 'round', lineDash: [2, 2], @@ -149,6 +153,7 @@ describe('Legend block tests', function() { }, { text: 'dataset2', fillStyle: 'rgba(0,0,0,0.1)', + fontColor: '#666', hidden: true, lineCap: 'butt', lineDash: [], @@ -163,6 +168,7 @@ describe('Legend block tests', function() { }, { text: 'dataset3', fillStyle: 'rgba(0,0,0,0.1)', + fontColor: '#666', hidden: false, lineCap: 'butt', lineDash: [], @@ -215,6 +221,7 @@ describe('Legend block tests', function() { expect(chart.legend.legendItems).toEqual([{ text: 'dataset3', fillStyle: 'rgba(0,0,0,0.1)', + fontColor: '#666', hidden: false, lineCap: 'butt', lineDash: [], @@ -229,6 +236,7 @@ describe('Legend block tests', function() { }, { text: 'dataset2', fillStyle: 'rgba(0,0,0,0.1)', + fontColor: '#666', hidden: true, lineCap: 'butt', lineDash: [], @@ -243,6 +251,7 @@ describe('Legend block tests', function() { }, { text: 'dataset1', fillStyle: '#f31', + fontColor: '#666', hidden: false, lineCap: 'round', lineDash: [2, 2], @@ -300,6 +309,7 @@ describe('Legend block tests', function() { expect(chart.legend.legendItems).toEqual([{ text: 'dataset1', fillStyle: '#f31', + fontColor: '#666', hidden: false, lineCap: undefined, lineDash: undefined, @@ -314,6 +324,7 @@ describe('Legend block tests', function() { }, { text: 'dataset3', fillStyle: 'rgba(0,0,0,0.1)', + fontColor: '#666', hidden: false, lineCap: undefined, lineDash: undefined, @@ -370,6 +381,7 @@ describe('Legend block tests', function() { expect(chart.legend.legendItems).toEqual([{ text: 'dataset3', fillStyle: 'rgba(0,0,0,0.1)', + fontColor: '#666', hidden: false, lineCap: 'butt', lineDash: [], @@ -384,6 +396,7 @@ describe('Legend block tests', function() { }, { text: 'dataset2', fillStyle: 'rgba(0,0,0,0.1)', + fontColor: '#666', hidden: true, lineCap: 'butt', lineDash: [], @@ -398,6 +411,7 @@ describe('Legend block tests', function() { }, { text: 'dataset1', fillStyle: '#f31', + fontColor: '#666', hidden: false, lineCap: 'round', lineDash: [2, 2], @@ -529,6 +543,7 @@ describe('Legend block tests', function() { expect(chart.legend.legendItems).toEqual([{ text: 'dataset1', fillStyle: '#f31', + fontColor: '#666', hidden: false, lineCap: undefined, lineDash: undefined, @@ -571,6 +586,7 @@ describe('Legend block tests', function() { expect(chart.legend.legendItems).toEqual([{ text: 'dataset1', fillStyle: 'rgb(50, 0, 0)', + fontColor: '#666', hidden: false, lineCap: undefined, lineDash: undefined, @@ -628,6 +644,7 @@ describe('Legend block tests', function() { expect(chart.legend.legendItems).toEqual([{ text: 'dataset1', fillStyle: 'rgba(0,0,0,0.1)', + fontColor: '#666', hidden: false, lineCap: undefined, lineDash: undefined, @@ -642,6 +659,7 @@ describe('Legend block tests', function() { }, { text: 'dataset2', fillStyle: '#f31', + fontColor: '#666', hidden: false, lineCap: undefined, lineDash: undefined, @@ -700,6 +718,7 @@ describe('Legend block tests', function() { expect(chart.legend.legendItems).toEqual([{ text: 'dataset1', fillStyle: 'rgba(0,0,0,0.1)', + fontColor: '#666', hidden: false, lineCap: undefined, lineDash: undefined, @@ -714,6 +733,7 @@ describe('Legend block tests', function() { }, { text: 'dataset2', fillStyle: '#f31', + fontColor: '#666', hidden: false, lineCap: undefined, lineDash: undefined, diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts index d6f0d300937..709b2034bb4 100644 --- a/types/index.esm.d.ts +++ b/types/index.esm.d.ts @@ -2002,6 +2002,12 @@ export interface LegendItem { */ fillStyle?: Color; + /** + * Font color for the text + * Defaults to LegendOptions.labels.color + */ + fontColor?: Color; + /** * If true, this item represents a hidden dataset. Label will be rendered with a strike-through effect */