Как изменить положение легенды в chart.js-2?

я пытаюсь переместить легенды сверху вниз, но не могу переместить позицию Поскольку я изучаю диаграммы и пытаюсь реализовать их, чтобы реагировать, нужна помощь.

также мне нужно изменить размер кольцевой диаграммы (должен быть маленьким/тонким) и добавить текст c в центр

 import React from "react";
 import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
 import { Doughnut } from "react-chartjs-2";

 ChartJS.register(ArcElement, Tooltip, Legend);

 export const data = {
 labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
 datasets: [
 {
  label: "# of Votes",
  data: [12, 19, 3, 5, 2, 3],
  backgroundColor: [
    "rgba(255, 99, 132, 0.2)",
    "rgba(54, 162, 235, 0.2)",
    "rgba(255, 206, 86, 0.2)",
    "rgba(75, 192, 192, 0.2)",
    "rgba(153, 102, 255, 0.2)",
    "rgba(255, 159, 64, 0.2)",
  ],
  borderColor: [
    "rgba(255, 99, 132, 1)",
    "rgba(54, 162, 235, 1)",
    "rgba(255, 206, 86, 1)",
    "rgba(75, 192, 192, 1)",
    "rgba(153, 102, 255, 1)",
    "rgba(255, 159, 64, 1)",
  ],
  borderWidth: 1,
  Legend: {
    display: true,
    position: "bottom",
  },
  },
  ],
  };

  export function App() {
  return <Doughnut data = {data} />;
  }

Я попытался добавить postions = {legend:{position:"bottom"}}

также

const options = {
  legend: {
    labels: {
      padding: 20
    }
  }
};