Rechart biaxial line chart not rendering

JavaScript
1

Hi,
I am using function components with hooks and I am fetching 3 pieces of data related to covid-19 such as date, confirmed cases, and deaths and then storing this data in this component. I would like to plot biaxial line chart with X-axis represented by the date, and the two lines representing confirmed cases and deaths occurred in that specific date. After successfully storing the data I am transforming it into array and then passing it to chart component as an array of object. However, the data is shown on the screen but lines are not rendered. Any help would be highly appreciated.

import React, { useEffect, useState } from "react";
import { fetchDailyData } from "../../api";

import classes from './Chart.css';
import { BarChart, Bar, CartesianGrid, XAxis, YAxis,Tooltip,Legend } from 'recharts';
import {
  LineChart,
  Line,
} from "recharts";

const Chart = ({data:{confirmed,deaths,recovered},country}) => {

    const [dailyData,setDailyData]= useState([]);

    useEffect(()=> {
        const fetchApi = async() => {
            setDailyData(await fetchDailyData());
        }

        fetchApi();
    },[])

const data = [
  {
    name: dailyData.map(({ date }) => new Date(date).toLocaleDateString()),
    confirmed: dailyData.map((data) => data.confirmed),
    deaths:dailyData.map((data) => data.deaths)
  }
 
];


      
    return (
       <div className={classes.container}>
         <LineChart width={730} height={250} data={data}
                margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Line type="monotone" dataKey="confirmed" stroke="#0095FF" />
                <Line type="monotone" dataKey="deaths" stroke="#0095FF" />
          </LineChart>
       </div>
    )
}
    
export default Chart;
2

I think you will have to provide a live example with the data.

I don’t know the lib but I’m not so sure the dataKey values can be an array. I would think you would map the dailyData and return the array of objects with the properties you need and not map inside the single object literal you have.

const data = dailyData.map(data => ...return the object with the properties you want)
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.