LineGraph issue with legend

[FalconHex]

legend of graph can't be hidden even after adding :
legend: {
display: false,
},

in options

[Habki]

From chart.js version 3.x onwards: legend, title and tooltip namespaces are moved from options to options.plugins.
const options = { plugins:{ legend: { display: false }, }

[ArshWalker]

@Habki Hey, could please help me with this.
My graph is like this after moving options to options.plugins.

I want to change cases format to 100k 1M and date in a different format.
Just like this..... (this was on 2.0.6)

The numeral is not changing the format?
Do you know the changes in const options?

[PramythR]

@ArshWalker refer this numeral http://numeraljs.com/ , try to change the yAxes to y to y: { gridLines: { display: false, },
likeso

[nirmalyathakurata]

i faced the same issue try updating typescript and then re-install react-chart-js

[Hariom-Singh786]

//this code is not working help me someone///////////
//// please ///please ///please

import React, { useState, useEffect } from "react";
import { Line } from "react-chartjs-2";
import numeral from "numeral";

const options = {
legend: {
display: false,
},
elements: {
point: {
radius: 0,
},
},
maintainAspectRatio: false,
tooltips: {
mode: "index",
intersect: false,
callbacks: {
label: function (tooltipItem, data) {
return numeral(tooltipItem.value).format("+0,0");
},
},
},
scales: {
xAxes: [
{
type: "time",
time: {
format: "MM/DD/YY",
tooltipFormat: "ll",
},
},
],
yAxes: [
{
gridLines: {
display: false,
},
ticks: {
// Include a dollar sign in the ticks
callback: function (value, index, values) {
return numeral(value).format("0a");
},
},
},
],
},
};

const buildChartData = (data, casesType) => {
let chartData = [];
let lastDataPoint;
for (let date in data.cases) {
if (lastDataPoint) {
let newDataPoint = {
x: date,
y: data[casesType][date] - lastDataPoint,
};
chartData.push(newDataPoint);
}
lastDataPoint = data[casesType][date];
}
return chartData;
};

function LineGraph({ casesType }) {
const [data, setData] = useState({});

useEffect(() => {
const fetchData = async () => {
await fetch("https://disease.sh/v3/covid-19/historical/all?lastdays=120")
.then((response) => {
return response.json();
})
.then((data) => {
let chartData = buildChartData(data, casesType);
setData(chartData);
console.log(chartData);
// buildChart(chartData);
});
};

fetchData();

}, [casesType]);

return (

{data?.length > 0 && (
<Line
data={{
datasets: [
{
backgroundColor: "rgba(204, 16, 52, 0.5)",
borderColor: "#CC1034",
data: data,
},
],
}}
options={options}
/>
)}

);
}

export default LineGraph;

[shvmsh20]

@ArshWalker if you are able to solve the issue can you plz share the solution