chart is not displaying api data. i am using this api : https://api.apify.com/v2/key-value-stores/toDWvRj1JpTXiM8FF/records/LATEST?disableRedirect=true

[mayanksinha9]

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;```

[mayanksinha9]

import axios from 'axios';

const url='https://api.apify.com/v2/key-value-stores/toDWvRj1JpTXiM8FF/records/LATEST?disableRedirect=true';

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

return {activeCases,recovered,deaths,lastUpdatedAtApify};
}
catch(error){

}

}

export const fetchRegionData= async()=>{ try{ const{data}=await axios.get(${url}/regionData); const modifiedData=data.map((regionData)=>({ totalInfected:regionData.totalInfected, recovered:regionData.recovered, deceased:regionData.deceased, }));

return modifiedData; }

catch(error){

}

}``

[Suryakumar007]

Hi, kindly provide a github link to your code or the error information so that we can identify where it is breaking.