如何为react-chartjs-2柱状图图例设置静态自定义颜色

当你使用react-chartjs-2构建柱状图，且dataset的backgroundColor为颜色数组时，图例默认会取数组第一个颜色。要手动指定静态图例颜色，可通过Chart.js的图例自定义回调实现，以下是具体方案：

方法一：全局自定义所有图例颜色 #

通过options.legend.labels.generateLabels回调函数，覆盖默认的图例项生成逻辑，直接设置固定颜色：

import { Bar } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';

// 注册必要的Chart.js组件
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);

const chartOptions = {
  legend: {
    labels: {
      generateLabels: (chart) => {
        // 获取默认生成的图例项
        const defaultLabels = chart.defaults.plugins.legend.labels.generateLabels(chart);
        // 遍历修改每个图例的填充色和边框色为固定绿色
        return defaultLabels.map(label => ({
          ...label,
          fillStyle: 'green',
          strokeStyle: 'green'
        }));
      }
    }
  }
};

const chartData = {
  labels: ['项目1', '项目2', '项目3'],
  datasets: [
    {
      type: 'bar',
      label: '业务数据',
      data: [45, 28, 62],
      borderColor: '#ddd',
      backgroundColor: ['var(--color-orange)', 'var(--color-blue)', 'var(--color-purple)'],
      yAxisID: 'y',
    }
  ]
};

export default function CustomLegendBarChart() {
  return <Bar options={chartOptions} data={chartData} />;
}

方法二：针对特定数据集指定图例颜色 #

如果图表包含多个数据集，只需给指定数据集的图例设置静态颜色，可在回调中通过图例文本或数据集索引判断：

generateLabels: (chart) => {
  const defaultLabels = chart.defaults.plugins.legend.labels.generateLabels(chart);
  return defaultLabels.map(label => {
    // 匹配目标数据集的标签文本，设置固定颜色
    if (label.text === '业务数据') {
      return {
        ...label,
        fillStyle: 'green',
        strokeStyle: 'green'
      };
    }
    // 其他数据集保持默认颜色
    return label;
  });
}

原理说明 #

Chart.js默认通过数据集的backgroundColor数组第一个元素生成图例颜色，generateLabels回调允许我们完全自定义图例项的样式、颜色等属性，从而实现脱离数据集颜色的静态图例色设置。

内容的提问来源于stack exchange，提问作者Tarek Hammami