如何调整react-chartjs-2图例位置为底部并修改图标为圆角样式

解决方法 #

你当前遇到配置不生效的核心原因是：3.x及以上版本的react-chartjs-2底层依赖Chart.js v3+，该版本起图例配置需要嵌套在options.plugins字段下，而非放在options根节点。如果是4.x及以上版本，还需要手动注册Legend插件才能正常渲染图例。
要将图例图标改为圆形，只需在legend.labels配置中开启usePointStyle: true即可。

修改后的完整代码如下：

import "./styles.css";
import React from "react";
import { Bar } from "react-chartjs-2";
// 导入Chart核心和所需组件、插件
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';

// 注册所需模块
ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

const data = [
  {
    label: "a",
    data: [56, 23, 55, 56, 57]
  },
  {
    label: "b",
    data: [22, 17, 32, 47, 62]
  },
  {
    label: "c",
    data: [46, 73, 25, 76, 27]
  }
];

const App = () => {
  const CHART_COLORS = ["#e35b2c", "#e77235", "#eb8a40"];

  const list = data.map((d, index) => {
    return {
      label: d.label,
      backgroundColor: CHART_COLORS[index],
      data: d.data,
      stack: 1
    };
  });

  // 修正后的配置
  const options = {
    plugins: {
      legend: {
        position: "bottom",
        labels: {
          usePointStyle: true, // 开启点样式，默认渲染为圆形
          pointWidth: 12 // 可自定义圆形图标大小，不需要可删除
        }
      }
    }
  };

  return (
    <>
      <div className="App">
        <Bar
          data={{
            labels: ["block1", "block2", "block3"],
            datasets: list
          }}
          width={100}
          height={50}
          options={options}
        />
      </div>
    </>
  );
};

export default App;

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