# Json data visualization in Reactjs with chartjs

**URL:** <https://forum.freecodecamp.org/t/json-data-visualization-in-reactjs-with-chartjs/366099>\
**Category:** General\
**Created:** [March 31, 2020, 12:07pm UTC](https://forum.freecodecamp.org/t/json-data-visualization-in-reactjs-with-chartjs/366099 "2020-03-31T12:07:01Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![hanzlah](https://avatars.discourse-cdn.com/v4/letter/h/4da419/32.png) [@hanzlah](https://forum.freecodecamp.org/u/hanzlah)\
**Post date:** [March 31, 2020, 12:07pm UTC](https://forum.freecodecamp.org/t/json-data-visualization-in-reactjs-with-chartjs/366099/1 "2020-03-31T12:07:01Z")

</div>

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

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

 ![Screenshot from 2020-03-31 17-09-34](https://global.discourse-cdn.com/freecodecamp/original/3X/7/b/7b996616ddcff07b724ef58d5635298386f35a90.png)

**And Here is [codeSandBox.io](https://codesandbox.io/s/beautiful-neumann-53lh8)**

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [March 31, 2020, 12:07pm UTC](https://forum.freecodecamp.org/t/json-data-visualization-in-reactjs-with-chartjs/366099/2 "2020-03-31T12:07:56Z")

</div>

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](http://www.freecodecamp.com/forum/t/forum-code-formatting/25574) 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.

![markdown_Forums](https://sea3.discourse-cdn.com/freecodecamp/uploads/default/original/3X/4/b/4b9a26f0c243380dd84935f4e29b92e3ecee8d05.gif)

---

<div class="post-metadata">

**Author:** ![hanzlah](https://avatars.discourse-cdn.com/v4/letter/h/4da419/32.png) [@hanzlah](https://forum.freecodecamp.org/u/hanzlah)\
**Post date:** [March 31, 2020, 2:01pm UTC](https://forum.freecodecamp.org/t/json-data-visualization-in-reactjs-with-chartjs/366099/3 "2020-03-31T14:01:06Z")

</div>

i just fix this by change the following code

```auto
in app.js

labels: [Object.keys(res.data.timeline.cases)]
to
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.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 7:00pm UTC](https://forum.freecodecamp.org/t/json-data-visualization-in-reactjs-with-chartjs/366099/4 "2021-06-01T19:00:31Z")

</div>