更改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

将options属性传递给Doughnut组件。

import React from "react";
import { Doughnut } 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"]
      }
    ]
  };

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

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

工作代码- https://codesandbox.io/s/wandering-snowflake-b7tgd?file=/src/tickets.js