CleverProgrammers / react-covid-tracker

202 stars 253 forks source link

LineGraph issue with legend #32

Open FalconHex opened 3 years ago

FalconHex commented 3 years ago

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

in options

Habki commented 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 }, }

ArshWalker commented 3 years ago

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

I want to change cases format to 100k 1M and date in a different format. Just like this..... (this was on 2.0.6) image The numeral is not changing the format? Do you know the changes in const options?

PramythR commented 3 years ago

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

nirmalyathakurta commented 3 years ago

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

Hariom-Singh786 commented 2 years ago

//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 && ( )}

); }

export default LineGraph;

shvmsh20 commented 2 years ago

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