react-chartjs-2 如何设置图例在右侧并实现文本垂直显示？

要实现图例居右且文本垂直显示，核心是借助Chart.js的配置项自定义图例标签样式，以下是具体实现方案：

核心配置步骤 #

• 将图例位置设为右侧：在options.legend.position中设置为'right'
• 通过自定义标签生成逻辑，给图例文本添加旋转样式实现垂直显示
• 调整图例布局参数，确保垂直文本排版美观

完整代码示例 #

import React from 'react';
import { Bar } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';

Chart.register(...registerables);

const VerticalLegendChart = () => {
  const data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    datasets: [
      {
        label: '数据集1',
        data: [12, 19, 3, 5],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
      },
      {
        label: '数据集2',
        data: [2, 3, 20, 15],
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
      },
    ],
  };

  const options = {
    legend: {
      position: 'right', // 图例居右
      align: 'center', // 图例垂直方向居中对齐
      labels: {
        // 自定义标签生成函数，添加样式类
        generateLabels: (chart) => {
          return chart.data.datasets.map((dataset, index) => ({
            text: dataset.label,
            fillStyle: dataset.backgroundColor,
            strokeStyle: dataset.borderColor,
            lineWidth: dataset.borderWidth,
            className: 'vertical-legend-text',
          }));
        },
        padding: 20, // 增大标签间距，避免旋转后重叠
      },
    },
  };

  return (
    <div className="chart-container">
      <Bar data={data} options={options} />
      {/* 自定义CSS实现文本垂直 */}
      <style jsx>{`
        .vertical-legend-text {
          transform: rotate(90deg);
          white-space: nowrap;
          transform-origin: center center;
          margin: 10px 0;
        }
      `}</style>
    </div>
  );
};

export default VerticalLegendChart;

关键说明 #

• generateLabels方法：自定义每个图例标签的样式，通过添加vertical-legend-text类，方便用CSS控制文本旋转
• CSS旋转：transform: rotate(90deg)将文本转为垂直方向，transform-origin确保旋转中心正确，white-space: nowrap避免文本换行
• 布局调整：legend.labels.padding增大标签间距，legend.align: 'center'让图例在垂直方向居中，避免排版错乱

如果不想依赖CSS，也可以直接在generateLabels中通过配置文本旋转属性实现，但CSS方式更灵活易维护。

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