Add the ability to change font color per legend item (#8800)

chartjs · Apr 3, 2021 · 238bfa5 · 238bfa5
1 parent 74f1188
commit 238bfa5
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
    */