Not Updating recovered data, error in Api itself

Good

Anyone know why my chart like this? I want to make the latest data on the right side.
Thank you.

I seem to have a hard time adjusting the line chart to accommodate for mobile use or the cards for 4k. Any suggestions?

picture examples below:

Hi, I am getting invalid date on cards and also I found undefine in date buttom of line chart and also when i hover on the line chart.
That i am missing?

On the live site the line chart's date axis is displayed from right to left instead of being displayed left to right as shown below :

hey, so im tryying to implement this solution but i cant seem to figure out how to make the charts larger
here's chart.jsx

`import React, {useState, useEffect } from 'react';
import {fetchDailyData} from '../../api';
import { Line, Bar } from 'react-chartjs-2';

import styles from './Chart.module.css';

const Chart = ({data:{confirmed, recovered, deaths}, country}) => {
const [dailyData, setDailyData] =useState([]);

useEffect( () => {
	const fetchAPI = async () => {
		setDailyData(await fetchDailyData());
	}

	fetchAPI();
}, [])

const barChart = (
	confirmed
		? (
			<Bar 
			 	data = {{
					labels: ['Infetados','Recuperados','Mortes'],
					datasets: [{
						label: 'Pessoas',
						backgroundColor: [
							'rgba(0,0,255,0.5)',
							'rgba(0,255,0,0.5)',
							'rgba(255,0,0,0.5)',
						],
					data : [confirmed.value, recovered.value, deaths.value]
					}]
				 }}
				options= {{
					legend: {display: false},
					title: {display: true, text: `Estado atual em ${country}`},
				}}
			/>
		) : null
)

const lineChart = (
	dailyData.length
		? (
		<Line 
		data={{
			labels: dailyData.map(({ date })=> date),
			datasets: [ {
				data: dailyData.map(({confirmed})=>confirmed),
				label: 'Infetados',
				borderColor: '#3333ff',
				fill: true,
			}, {
				data: dailyData.map(({deaths}) => deaths),
				label: 'Mortos',
				borderColor: 'red',
				backgroundColor: 'red',
				fill: true,
			} ],
		}} 
	/>) : null
);

return (
	<div className={styles.container} >
		{country ? barChart : lineChart} 
	</div>
	)

}

export default Chart;`

here's Chart.module.css

.containter { display: flex; justify-content: center; width: 85%; }

hope you can help me , thanks for the amazing work man !

Can anybody pls help with this...

This Api - "https://covid19.mathdro.id/api" is not working.

The existing public API will continue to work until May 2021, but will only include data until March 7, 2021.
The problem is about the second api, which is represented in the charts

and line graph is not showing in starting time after sellecting country name it is showing bar graph only how to remove line graph

Hello! I am following through your tutorial on this tracker, but decided to use a different API as practice on consuming different kinds of datasets. I seem to have hit a wall though when it comes to handling data in fetchDailyData() in index.js, and also retrieving this data in a similar way as you to be used in the Line Chart.
I am using the following API path for fetchDailyData (global):https://corona.lmao.ninja/docs/?urls.primaryName=version%202.0.0#/JHUCSSE/get_v2_historical_all

My code is below:

index.js

export const fetchDailyData = async () => {


  try {
      const { data } = await axios.get(`${url}/historical/all`);
      
      
      const labels = Object.keys(data.cases);
      const cases = labels.map((name) => data.cases[name]);
      const deaths = labels.map((name) => data.deaths[name]);
      const recovered = labels.map((name) => data.recovered[name]);
      
      
      
      
  } catch (error) {
    return error;
    
  }
}

Chart.jsx

import React, {useState, useEffect} from 'react';

import { Line, Bar } from 'react-chartjs-2';

import {fetchDailyData} from '../../api';

import styles from './Chart.module.css';


const Chart = () => {
    const [dailyData, setDailyData]= useState([]);

    useEffect(() => {
        const fetchAPI = async () => {
             setDailyData(await fetchDailyData());
        }

        
        fetchAPI();
    });


    const lineChart = (
       <Line


        />
    );

    return(
        <div className = {styles.container}>
            {lineChart}

        </div>
    );
};

export default Chart;

First of all let me thank you, for sharing this valuable knowledge
I coded along with you and everything went well for the first couple of minutes. However in the end I´m getting the following error:

TypeError: countries.map is not a function
19 | return (
20 |
21 | <NativeSelect defaultValue="" onChange={(e) => handleCountrychange(e.target.value)}>

22 | Global
| ^ 23 | {countries.map((country, i) => {country})}
24 |
25 |

hi sir
i have face this problem about last three days but i failed to solve this
please say something about this error

GITHUB id :
https://github.com/Muhammad-Tayyab1

I keep getting a TypeError: Cannot read property 'length' of undefined when I run the code. This is my Chart.js:
`import React, {useState, useEffect } from 'react';
import {fetchDailyData} from '../api'
import { Line, Bar } from 'react-chartjs-2';
import styles from './Chart.module.css';

const Chart = () => {
const [dailyData, setDailyData] = useState({});

useEffect (() => {
    const fetchAPI = async () => {
        setDailyData(await fetchDailyData());
    }
    
    fetchAPI();
}, []);

const lineChart = (
    dailyData.length
        ? (
        <Line 
        data={{
            labels: dailyData.map(({ date }) => date),
            datasets: [{
                data: dailyData.map(({ confirmed }) => confirmed),
                label: 'Infected',
                borderColor: '#3333ff',
                fill: true,
            }, {
                data: dailyData.map(({ deaths }) => deaths),
                label: 'Deaths',
                borderColor: 'red',
                backgroundColor: 'rgba(255, 0, 0, 0.5)',
                fill: true,
            }],
        }}
    />) : null
);

return(
    <div className={styles.container}>
        {lineChart}
    </div>
);

}

export default Chart;And here is my index.js:import axios from 'axios';

const url = 'https://covid19.mathdro.id/api'

export const fetchData = async () => {
try {
const {data : {confirmed, recovered, deaths, lastUpdate}} = await axios.get(url);

    return {confirmed, recovered, deaths, lastUpdate};
} catch(error) {

}

}

export const fetchDailyData = async () => {
try {
const { data } = await axios.get('${url}/daily');

    const modifiedData = data.map((dailyData) => ({
        confirmed: dailyData.confirmed.total,
        deaths: dailyData.deaths.total,
        date: dailyData.reportDate,
    }));
    return modifiedData;
} catch(error) {

}

}`

If you've encountered an error while working on the Chart.js file :
Uncaught Error: "category" is not a registered scale.
just add this import in your file :
import { Chart as ChartJS } from 'chart.js/auto'
and it will fix your issue.

Source

after selecting countries from option I am getting this error

After working on fetchDailyData I am getting this error.

React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
in Chart (at App.js:24)
in div (at App.js:22)
in App (at src/index.js:6)

import React,{useState,useEffect} from 'react';
import { fetchRegionData } from '../../api';

import {Line,Bar} from 'react-chartjs-2';

import styles from './Chart.module.css';

const Chart=()=>{
const[regionData,setRegionData]=useState([]);

useEffect(()=>{
    const fetchAPI=async()=>{
        setRegionData(await fetchRegionData());
    }

    console.log(regionData);

    fetchAPI();
});

const lineChart=(
(
<Line
data={{
labels: regionData && regionData.map(({region})=>region),
datasets:[{
data: regionData&&regionData.map(({totalInfected})=>totalInfected),
label:'Infected',
borderColor:'#3333ff',
fill:true,
},{
data: regionData&&regionData.map(({recovered})=>recovered),
label:'Recovered',
borderColor:'green',
fill:true,
},{
data: regionData&&regionData.map(({deceased})=>deceased),
label:'Deaths',
borderColor:'red',
fill:true,
}],
}}
/>)
);

return(
    <div className={styles.container} >
        {lineChart}
    </div>
)

}

export default `Chart;```

Chart.jsx

import React, {useState, useEffect} from 'react';
import { fetchDailyData } from '../../api';
import { Line, Bar } from 'react-chartjs-2';
import styles from './Chart.module.css';

`
const Chart = () => {
const [dailyData, setDailyData] = useState([]);

useEffect(() => {
    const fetchApi = async () => {
        setDailyData(await fetchDailyData());
    }

    fetchApi();
});

console.log("dailyData: ", dailyData);

const lineChart = (
    dailyData.length
    ?  (   
        <Line  data={{
        labels: dailyData.map(({date}) => date), 
        datasets: [{
            data: dailyData.map(({ confirmed }) => confirmed),
            label: 'Infected',
            borderColor: '#3333fff',
            fill: true,
        },{
            data: dailyData.map(({ deaths }) => deaths),
            label: 'Deaths',
            borderColor: 'red',
            backgroundColor: 'rgba(255, 0, 0, 0.5)',
            fill: true,
        }]
    }} />) : null

);

return(
   <div className={ styles.container }>
       {lineChart}
   </div>
)

}

export default Chart;
`

When I open Corona virus website so this website is breaking and it's giving the below error.

Please fix this issue.

when i disconnect the internet i get this do not know why see here.