i am new in reactjs currently i’m developing an app which shows json COVID-19 api data into visualiztion using chartjs i tried this from yesterday but i cant show the visual data. please help me. Here is my code
My App Component
import React, { useState, useEffect } from "react";
import axios from "axios";
import Chart from "./Chart";
const App = () => {
const [chart, setChart] = useState({});
useEffect(() => {
getData();
}, []);
const getData = async () => {
try {
const res = await axios.get(
`https://corona.lmao.ninja/v2/historical/pakistan`
);
setChart({
labels: [Object.keys(res.data.timeline.cases)],
datasets: [
{
label: "Covid-19",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: Object.values(res.data.timeline.cases)
}
]
});
} catch (error) {
console.log(error.response);
}
};
return (
<div>
<Chart data={chart} />
</div>
);
};
export default App;
and Here is Chart Component
import React from "react";
import { Line } from "react-chartjs-2";
const Chart = ({ data }) => {
console.log(data);
return <Line data={data} options={{ responsive: true, height: '600px', width: "600px" }} />;
};
export default Chart;
and here is screenshot of browser it shows the values on x and y axis but dosent
visualize
And Here is codeSandBox.io