Open FalconHex opened 3 years ago
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 }, }
@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?
@ArshWalker refer this numeral http://numeraljs.com/ , try to change the yAxes to y to y: { gridLines: { display: false, },
likeso
i faced the same issue try updating typescript and then re-install react-chart-js
//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 (
); }
export default LineGraph;
@ArshWalker if you are able to solve the issue can you plz share the solution
legend of graph can't be hidden even after adding : legend: { display: false, },
in options