I am new in reactjs. Currently I'm developing an app which shows json COVID-19 api data into visualization using chartjs but it not visualize the data. I tried everything but it not working.
Here is my source code.
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/spain'
);
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 this 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;
When I open browser it shows the values on X and Y axis but not visualize it. This is my browser image:
And this is codeSandBox
