Блог

Я не могу изменить положение метки на нижнее в 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>
  );
}
  

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

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

Передать 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

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

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

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

Для элемента sticky установлен параметр align-self: auto (по умолчанию); Для элемента sticky установлен параметр align-self: stretch. Если у липкого элемента есть align-self: автоустановка: в этом случае значение align-self будет вычисляться как значение родительского элемента align-items . Итак,

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

Если для липкого элемента установлен параметр align-self: stretch:

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

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