How to display charts in react js

Question

https://www.youtube.com/watch?v=khJlrj3Y6Ls I am following this tutorial

here in there is a page on which chart data is shown, I want to display a duplicate line chart called "linechart2" just below the linechart..

this is my index.js of chart file

import React, { useState, useEffect } from "react";
import { Line, Bar } from "react-chartjs-2";

import { fetchDailyData } from "../../api";

import styles from "./Chart.module.css";

const Chart = ({ data: { confirmed, recovered, deaths }, country }) => {
  const [dailyData, setDailyData] = useState({});

  useEffect(() => {
    const fetchMyAPI = async () => {
      const initialDailyData = await fetchDailyData();

      setDailyData(initialDailyData);
    };

    fetchMyAPI();
  }, []);

  const barChart = confirmed ? (
    <Bar
      data={{
        labels: ["Infected", "Recovered", "Deaths"],
        datasets: [
          {
            label: "People",
            backgroundColor: [
              "rgba(0, 0, 255, 0.5)",
              "rgba(0, 255, 0, 0.5)",
              "rgba(255, 0, 0, 0.5)",
            ],
            data: [confirmed.value, recovered.value, deaths.value],
          },
        ],
      }}
      options={{
        legend: { display: false },
        title: { display: true, text: `Current state in ${country}` },
      }}
    />
  ) : null;

  const lineChart = dailyData[0] ? (
    <Line
      data={{
        labels: dailyData.map(({ date }) => date),
        datasets: [
          {
            data: dailyData.map((data) => data.confirmed),
            label: "Infected",
            borderColor: "#3333ff",
            fill: true,
          },
          {
            data: dailyData.map((data) => data.deaths),
            label: "Deaths",
            borderColor: "red",
            backgroundColor: "rgba(255, 0, 0, 0.5)",
            fill: true,
          },
        ],
      }}
    />
  ) : null;
  const lineChart2 = dailyData[0] ? (
    <Line
      data={{
        labels: dailyData.map(({ date }) => date),
        datasets: [
          {
            data: dailyData.map((data) => data.confirmed),
            label: "Infected",
            borderColor: "#3333ff",
            fill: true,
          },
          {
            data: dailyData.map((data) => data.deaths),
            label: "Deaths",
            borderColor: "red",
            backgroundColor: "rgba(255, 0, 0, 0.5)",
            fill: true,
          },
        ],
      }}
    />
  ) : null;
  return (
    <div className={styles.container}>{country ? barChart : lineChart}</div>
  );
};

export default Chart;

I want to display a copy of lineChart just below it,I have tried writing it in the return fucntion

 return (
            <div className={styles.container}>{country ? barChart : lineChart}</div>
            <div className={styles.container}>{lineChart2}</div>
          );

please show what you have tried so far

Derviş Kayımbaşıoğlu
– Derviş Kayımbaşıoğlu

2020-04-23 18:25:46 +00:00
Commented Apr 23, 2020 at 18:25 — Derviş Kayımbaşıoğlu
– Derviş Kayımbaşıoğlu, Commented Apr 23, 2020 at 18:25
I edited it, I need to display linechart2

rawrstar
– rawrstar

2020-04-23 18:29:04 +00:00
Commented Apr 23, 2020 at 18:29 — rawrstar
– rawrstar, Commented Apr 23, 2020 at 18:29

Derviş Kayımbaşıoğlu · Accepted Answer · 2020-04-23 18:32:06Z

2

you can have only one root div inside return (). Try encapsulating divs with React.Fragment

return (
     <React.Fragment>
        <div className={styles.container}>{country ? barChart : lineChart}</div>
        <div className={styles.container}>{lineChart2}</div>
     </React.Fragment>
      );

answered Apr 23, 2020 at 18:32

Derviş Kayımbaşıoğlu

30.9k4 gold badges55 silver badges79 bronze badges

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

Collectives™ on Stack Overflow

How to display charts in react js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related