Chart.js Options doesn’t work in React.js

I’m trying to position legend on right of my chart but options doesn’t work…

import { Chart } from 'react-chartjs-2';
import 'chart.js/auto';

const data = {
  labels: [
    'Red',
    'Green',
    'Yellow'
],
datasets: [{
  data: [700, 50, 100],
  backgroundColor: [
  '#FF6384',
  '#36A2EB',
  '#FFCE56'
  ],
  hoverBackgroundColor: [
  '#FF6384',
  '#36A2EB',
  '#FFCE56'
  ],
  
}]

};

const TestimonialSection = () => {
  return( 
  <div id="chart">
     <Chart type="doughnut" data={data} options={{legend: {position: 'right'}}}/>
  </div>
  )
}

export default TestimonialSection

I just wrote this file and chart show up, only things that doesn’t work is options. Also checked dependency and all look good

Answer

for the latest version this is the object structure you must do.

options = {
  plugins: {
    legend: {
      display: false,
      position: right,
      ...

   },
  }
}

Advertisement

Answer