Data visualization in ReactJs with ChartJs

Question

I am new in reactjs. Currently I'm developing an app which shows json COVID-19 api data into visualization using chartjs. I tried this from yesterday but I can't show the visual data.

Here is my code

App Component

import React, { useState, useEffect } from "react";
import axios from "axios";

import Chart from "./Chart";

const App = () => {
  const [state, setState] = useState({});
  const [loading, setLoading] = useState(true);
  const [chart, setChart] = useState({});

  useEffect(() => {
    getData("italy");
    setChart({
      labels: ["Cases", "Deaths", "Recovered"],
      datasets: [
        {
          label: "cases",
          data: [state.cases]
        },
        {
          label: "deaths",
          data: [state.deaths]
        },
        {
          label: "recovered",
          data: [state.recovered]
        }
      ]
    });
  }, []);

  const getData = async country => {
    try {
      const res = await axios.get(
        `https://corona.lmao.ninja/v2/historical/${country}`
      );
      setLoading(false);
      setState(res.data.timeline);
    } catch (error) {
      console.log(error.response);
    }
  };

  return (
    <div>
      {!loading
        ? console.log(
            "cases",
            state.cases,
            "deaths",
            state.deaths,
            "recovered",
            state.recovered
          )
        : null}

      {!loading ? <Chart chart={chart} /> : "loading failed"}
    </div>
  );
};

export default App;

And Here is Chart Component

import React from "react";

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

const Chart = ({chart}) => {

  return (
    <div>
      <Line
        data={chart}
        height={300}
        width={200}
        options={{
          maintainAspectRatio: false,
          title: {
            display: true,
            text: "Covid-19",
            fontSize: 25
          },
          legend: {
            display: true,
            position: "top"
          }
        }}
      />
    </div>
  );
};

export default Chart;

If I open browser and dev tools it look likes this

I want to visualize the data like this

Here is codeSandBox.io

your sandbox isnt responding. Mind creating one here codesandbox.io — joy08
– joy08, Commented Mar 30, 2020 at 15:40

joy08 · Accepted Answer · 2020-03-30 17:11:48Z

1

Looks like data property within dataset takes only array of numbers. I have simplifies your code using class based component. It will help you get started.

https://codesandbox.io/s/react-chartjs-2-example-mzh9o

 setChartData = () => {
    let { data } = this.state;
    let chartData = {
      labels: ["Cases", "Deaths", "Recovered"],
      datasets: [
        {
          label: "cases",
          data: Object.values(data.cases)
        },
        {
          label: "deaths",
          data: Object.values(data.deaths)
        },
        {
          label: "recovered",
          data: Object.values(data.recovered)
        }
      ]
    };
    this.setState({
      chart: chartData
    });
  };

answered Mar 30, 2020 at 17:11

joy08

9,6729 gold badges43 silver badges81 bronze badges

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

Collectives™ on Stack Overflow

Data visualization in ReactJs with ChartJs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related