react-chartjs-2 options prop not working as expected

Question

I am using react-chartjs-2 to build a line chart and none of the options that I have specified in the options prop tend to work.

Here is my code:

import React, { useState, useEffect } from "react";
// import Chart from "chart.js";
import { Line } from "react-chartjs-2";
import moment from "moment";

export default function CardLineChartRN(props) {

  const [deviceMsgs, setDeviceMsgs] = useState(null);

  useEffect(() => {
    getMsg();
   }, []);

  const getMsg = async () => {
    // To get Today's data

    const todaysDate = moment().format("YYYY-MM-DD");

    try {
      const response = await fetch("http://localhost:8000/APICALL", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          // Authorization: `Bearer ${auth.token}`,
        },
        body: JSON.stringify({
          name: props.name,
          date: todaysDate,
        }),
      });

      const res = await response.json();

      if (response.ok) {
        console.log("Resp recieved", res.msg);
        setDeviceMsgs(res.msg);
      } else {
        console.log("No devices=====>", res.msg);
        setDeviceMsgs(null);
      }
    } catch (e) {
      console.log("Error fetching ", e);
    }
  };


  return (
    <div>
      <Line
        data={{
          // labels: ['01:20', '01:30', '01:40', '01:50', '01:55', '01:58'],
          labels:
            deviceMsgs && deviceMsgs.length > 0
              ? deviceMsgs.map((deviceMsg) => deviceMsg.time)
              : [""],
          datasets: [
            {
              label: "demo",
              data:
                deviceMsgs && deviceMsgs.length > 0
                  ? deviceMsgs.map(
                      (deviceMsg) => deviceMsg.msg[0].val
                    )
                  : [""], 
              backgroundColor: "rgba(255,192,203 ,0.6)",
              borderColor: "red",
              borderWidth: 1,
              fill: true,
              borderWidth: 3,
            },
          ],
        }}
        height={400}
        width={1500}
        options={{
          maintainAspectRatio: false,
          repsonsive: true,

          animation: {
            duration: 0,
          },
          scales: {
            xAxes: [
              {
                ticks: { display: false },
                gridLines: {
                  display: false,
                  drawBorder: false,
                },
              },
            ],
            yAxes: [
              {
                ticks: { display: false },
                stacked: true,
                ticks: {
                  beginAtZero: true,
                },
                gridLines: {
                  display: false,
                  drawBorder: false,
                },
              },
            ],
          },
          legend: {
            display: false,
          },
          tooltips: {
            enabled: false,
          },
        }}
      />
    </div>
  );
}

I have noticed that only the animation options work and others don't. Like I don't want to show the legend in my chart but even after setting it to false it still shows up.

Answer 1

I had the same issue; in line with the latest chart js documentation the options should be within a further plugins section - see documentation here https://www.chartjs.org/docs/latest/configuration/title.html

Answer 2

Downgrade your react-chartjs-2 version to "2" if it is "3".Its worked for me.