如何修改react-chartjs-2中Doughnut图表下方文本的颜色

你可以通过配置图表的options属性，针对图例（即你截图中图表下方的文字）的文字颜色进行设置，具体实现如下：

1. 核心配置代码 #

在你的Doughnut组件中，通过plugins.legend.labels配置项直接将文字颜色设为白色：

import { Doughnut } from 'react-chartjs-2';
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';

// 注册必要的Chart.js组件
ChartJS.register(ArcElement, Tooltip, Legend);

const MyDoughnutChart = () => {
  const data = {
    labels: ['标签A', '标签B', '标签C'],
    datasets: [
      {
        data: [25, 45, 30],
        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
      },
    ],
  };

  const options = {
    plugins: {
      legend: {
        labels: {
          // 将图例文字设置为白色
          color: '#FFFFFF',
          // 可选：如需调整字体大小、粗细等，可在此扩展配置
          // font: {
          //   size: 14,
          //   weight: 'bold'
          // }
        },
      },
    },
  };

  return <Doughnut data={data} options={options} />;
};

export default MyDoughnutChart;

2. 补充：若需调整提示框文字颜色 #

如果你的图表提示框（tooltip）文字也需要适配深色背景，可在options中补充tooltip的颜色配置：

const options = {
  plugins: {
    legend: {
      labels: {
        color: '#FFFFFF',
      },
    },
    tooltip: {
      // 设置提示框标题和内容文字为白色
      titleColor: '#FFFFFF',
      bodyColor: '#FFFFFF',
    },
  },
};

注意事项 #

• 确保chart.js与react-chartjs-2版本兼容，不同版本的配置项可能存在细微差异；
• 若图表还有其他自定义文本，可根据对应插件的配置项调整color属性即可。

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