изменить положение метки в 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

Answer 2

Тем, кто ищет решение для react-chartjs-2попробуй это:

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

Answer 3

Проверка того, не установлено ли свойство height для родителя:

Если для родительского элемента не задана высота, то у липкого элемента не будет области, к которой можно было бы прикрепиться при прокрутке. Это происходит потому, что липкий элемент предназначен для прилипания/прокрутки в пределах высоты контейнера. Проверка того, является ли родительский элемент флексбоксом

Если родителем закрепленного элемента является flexbox, необходимо проверить два сценария:

Sticky элемент имеет align-self: auto set (по умолчанию); Липкий элемент имеет набор align-self: stretch. Если Sticky Element имеет align-self: auto Set: В этом случае значение align-self будет вычисляться как значение родительского align-items. Так,

если у родителя есть набор align-items: normal (по умолчанию) или align-items: stretch, то это означает, что высота липкого элемента будет растягиваться, чтобы заполнить все доступное пространство. Это не оставит места для липкого элемента для прокрутки внутри родителя.

Если Sticky Element имеет align-self: stretch Set:

В этом случае липкий элемент будет растягиваться до высоты родительского элемента и не будет иметь области для прокрутки внутри.

Как сделать липкий элемент прокручиваемым внутри Flexbox: вы можете просто установить значение свойства align-self на align-self: flex-start. Это поместит липкий элемент в начало и не растянет его. Введите описание ссылки здесь.