更改react-chartjs-3中的标签位置

Question

我无法将标签的位置更改为react-chart-js3 中的底部。它现在显示在图表的顶部。

import React, { useState, useEffect } from "react";
import { Doughnut, Line, Pie } from "react-chartjs-3";

export default function UserDashboard() {
  const DoughData = {
    labels: ["Red", "Green", "Yellow"],
    datasets: [
      {
        data: [300, 50, 100],
        backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
        hoverBackgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
      },
    ],
  };

  return (
    <div>
      <Doughnut data={DoughData} />
    </div>
  );
}

Answer 1

那些寻找解决方案的人可以react-chartjs-2尝试以下方法：

const options = {
  responsive: true,
  plugins: {
    legend: {
      display: true,
      position: "bottom"
    },
  },
};