0

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:

browser image

And this is codeSandBox

3
  • 2
    This is a duplicate of your preceding question Data Visualization in ReactJs with ChartJs Commented Apr 16, 2020 at 11:14
  • 2
    It looks like you asked a question, adjusted the code a bit, copy and pasted the descriptive text into a new question, and then pasted the new code. Since the questions are identical they must be treated as duplicates. Commented Apr 16, 2020 at 11:16
  • 1
    Incidentally, "not working plz help me" is a good way to get any question closed. It is not a useful problem report. Please use real English words, don't beg, state what you are trying to do, what actually happened, and what you think the problem might be. A good rule is, if you find yourself saying "it does not work", remove it from the question and describe instead what you mean by that. Commented Apr 16, 2020 at 11:17

1 Answer 1

2

In your App.js file under setChart({ .. }),

Change:

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

to:

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

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

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;

Forked Sandbox

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.