change label position in react-chartjs-3

Question

I'm unable to change the position of the label to bottom in react-chart.js3. It's now displaying on the top of the chart.

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

Those who looking for solution for react-chartjs-2 try this:

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

Answer 2

Checking if height Property Is Not Set on Parent:

If the parent element has no height set then the sticky element won't have any area to stick to when scrolling. This happens because the sticky element is meant to stick/scroll within the height of a container. Checking if a Parent Element Is a Flexbox

If sticky element's parent is a flexbox, there are two scenarios to check for:

The sticky element has align-self: auto set (which is the default); The sticky element has align-self: stretch set. If the Sticky Element Has align-self: auto Set: In this case the value of align-self would compute to the parent's align-items value. So,

if the parent has align-items: normal (which is the default) or align-items: stretch set, then it means the height of the sticky element would stretch to fill the entire available space. This would leave no room for the sticky element to scroll within the parent.

If the Sticky Element Has align-self: stretch Set:

In this case, the sticky element would stretch to the height of the parent, and would not have any area to scroll within.

How to Make Sticky Element Scrollable Within a Flexbox: You could simply set the value of the align-self property to align-self: flex-start. This would put the sticky element at the start and won't stretch it.enter link description here

Answer 3

Pass options props to the Doughnut component.

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>
  );
}

Working code - https://codesandbox.io/s/wandering-snowflake-b7tgd?file=/src/tickets.js