如何在Chart.js中将饼图的图例标签文本换行？

你遇到的问题核心在于Chart.js默认图例是用Canvas绘制的，而非普通DOM元素，所以直接设置display:block这类CSS样式不会生效。下面提供两种可行的解决方法：

方法一：利用Chart.js内置的换行支持（Canvas图例） #

通过自定义图例标签生成函数，将需要换行的文本替换为\n，再配合行高配置实现换行：

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

ChartJS.register(ArcElement, Tooltip, Legend);

const data = {
  labels: ['很长很长的标签文本需要换行显示', '第二个长标签', '第三个标签'],
  datasets: [
    {
      data: [30, 40, 30],
      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
    },
  ],
};

const options = {
  legend: {
    labels: {
      font: { size: 12 },
      lineHeight: 1.5, // 调整行高适配换行后的间距
      // 自定义标签生成逻辑
      generateLabels: (chart) => {
        return chart.data.labels.map((label, index) => {
          // 示例：按空格拆分文本实现换行，可根据需求自定义拆分规则
          const wrappedLabel = label.split(' ').join('\n');
          return {
            text: wrappedLabel,
            fillStyle: chart.data.datasets[0].backgroundColor[index],
            strokeStyle: chart.data.datasets[0].backgroundColor[index],
            lineWidth: 1,
          };
        });
      },
    },
  },
};

export default function PieChart() {
  return <Pie data={data} options={options} />;
}

方法二：切换为HTML图例（DOM元素渲染，更灵活） #

开启Chart.js的HTML图例模式，此时图例由DOM元素构成，可直接用CSS控制换行：

const options = {
  legend: {
    useHTML: true, // 开启HTML图例
    labels: {
      font: { size: 12 },
      // 自定义HTML模板，通过CSS实现自动换行
      template: '<div style="margin: 4px 0;">' +
        '<span style="display: inline-block; width: 12px; height: 12px; border-radius: 50%; background-color: %color%; margin-right: 8px;"></span>' +
        '<span style="max-width: 100px; word-wrap: break-word; line-height: 1.5;">%text%</span>' +
      '</div>',
      // 若需要手动拆分标签，可配合generateLabels返回带<br>的文本
      generateLabels: (chart) => {
        return chart.data.labels.map((label, index) => {
          // 示例：在指定位置插入换行符<br>
          const wrappedLabel = label.replace('需要', '<br>需要');
          return {
            text: wrappedLabel,
            fillStyle: chart.data.datasets[0].backgroundColor[index],
          };
        });
      },
    },
  },
};

关键说明 #

• Canvas图例模式：适合简单换行需求，无需额外CSS，但样式定制能力有限。
• HTML图例模式：完全基于DOM，支持所有CSS样式，适合复杂的排版需求，可结合MUI的styled或sx属性统一调整样式，保证与项目UI兼容。

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