Json data visualization in Reactjs with chartjs

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(() => {
  }, []);

  const getData = async () => {
    try {
      const res = await axios.get(

        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) {

  return (
      <Chart data={chart} />

export default App;

and Here is Chart Component

import React from "react";
import { Line } from "react-chartjs-2";

const Chart = ({ 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

And Here is codeSandBox.io

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.


i just fix this by change the following code

in app.js

labels: [Object.keys(res.data.timeline.cases)]
labels: Object.keys(res.data.timeline.cases)

As i already receiving the data as a string array, and can directly assign Object.keys(res.data.timeline.cases) to labels key.

1 Like