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

by

2👍

✅

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

1👍

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

Leave a comment