How do we change the position of legend in chart.js-2 react

Question

i am trying to move the legends from top to bottom but not able to move the position Since i am learning charts and trying to implement it to react need some help

also i need to change the size of the doughnut chart(should be small/thin) and need to add c text at center

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

I tried adding postions={legend:{position:"bottom"}}

also

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

score 1 · Accepted Answer · answered May 07 '23 at 05:58

Assuming you're using Chart.js version 4.n, legend options need to be defined inside options.plugins.legend. The legend can be moved to the bottom of the chart through the position option as follows:

const options = {
  plugins: {
    legend: {
      labels: {
        position: 'bottom'
      }
    }
  }
};

score 1 · Answer 2 · answered Jun 27 '23 at 09:56

you already have data object.
you need options object. 

for example in Doughnut chart : 
const options = { 
  plugins: {
    tooltip: {
      titleFont: {
        size: 20
      },
      bodyFont: {
        size: 20
      },
   },
  legend: {
    display: true,
    responsive: true,
    position: "bottom",
    labels: {
      boxWidth: 36,
      padding: 40,
      font: {
        size: 34
      },
    },
    align: "center",
  },
}

in this example you can also change box size, styles toolltip, set padding, font size ... 

<Doughnut data={data} options={options} />;

How do we change the position of legend in chart.js-2 react

2 Answers2