react-chartjs-2 options are not recognized for Bars

Question

I am trying to built a barchart component via "react-chartjs-2". I did pretty much paste my code from here: https://www.c-sharpcorner.com/article/create-different-charts-in-react-using-chart-js-library/. This is how it looks:

import React from 'react';
import {Bar} from "react-chartjs-2";

const BarChart = () => {
    const barChartData = {
      labels: ["October", "November", "December"],
      datasets: [
        {
          data: [8137119, 9431691, 10266674],
          label: "Infected People",
          borderColor: "#3333ff",
          backgroundColor: "#547db4",
          fill: true
        },
        {
          data: [1216410, 1371390, 1477380],
          label: "Deaths People",
          borderColor: "#ff3333",
          backgroundColor: "#f7813e",
          fill: true
        }
      ]
    };
  
    const barChart = (
      <Bar
        type="bar"
        width={130}
        height={50}
        options={{
          title: {
            display: true,
            text: "COVID-19 Cases of Last 3 Months",
            fontSize: 15
          },
          legend: {
            display: true, //Is the legend shown?
            position: "bottom" //Position of the legend.
          }
        }}
        data={barChartData}
      />
    );
    return barChart;
  };

export default BarChart

Everything seems to be working fine, besides the fact that the options prop is not being recognized by the code. Did anyone come across a similar issue and can help me out?

score 2 · Answer 1 · answered Mar 08 '22 at 15:14

Update options prop as bellow.

options = {{
        plugins: {
            title: {
              display: true,
              text: "COVID-19 Cases of Last 3 Months"
            },
           legend: { 
              display: true, 
              position: "bottom"
            }
        }      
    }}

react-chartjs-2 options are not recognized for Bars

1 Answers1