CODEWITHSUNDEEP
reactjsrecharts
Jgarnie
Jgarnie

Reputation: 489

recharts Line chart not rendering

I am using recharts library in my project, I am trying to display the example from the documentation but I am having a hard timetrying to make it work, I am using a react functional component and I am sending the data from the parent component:

<LineChartPastYears data={exampleData}></LineChartPastYears>

my LineChartPastYears component, that is supposed to render the chart is not displaying it for a reason I dont manage to understand:

import React, {useState, useEffect} from 'react'

import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts'

const LineChartPastYears = data => {
  const [newData, setNewData] = useState([])
  console.log(data)
  useEffect(() => {
    setNewData(data.data)
  }, [data])
  return (
    <div>
      <ResponsiveContainer width="100%" height="100%">
        <LineChart
          width={500}
          height={300}
          data={newData}
          margin={{
            top: 5,
            right: 30,
            left: 20,
            bottom: 5,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Legend />
          <Line
            type="monotone"
            dataKey="pv"
            stroke="#8884d8"
            activeDot={{r: 8}}
          />
          <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
        </LineChart>
      </ResponsiveContainer>
    </div>
  )
}
export default LineChartPastYears

the console.log after the function declaration is showing the data correctly arriving to the component,

the data I am sending is

const exampleData = [
    {
      name: 'Page A',
      uv: 4000,
      pv: 2400,
      amt: 2400,
    },
    {
      name: 'Page B',
      uv: 3000,
      pv: 1398,
      amt: 2210,
    },
    {
      name: 'Page C',
      uv: 2000,
      pv: 9800,
      amt: 2290,
    },
    {
      name: 'Page D',
      uv: 2780,
      pv: 3908,
      amt: 2000,
    },
    {
      name: 'Page E',
      uv: 1890,
      pv: 4800,
      amt: 2181,
    },
    {
      name: 'Page F',
      uv: 2390,
      pv: 3800,
      amt: 2500,
    },
    {
      name: 'Page G',
      uv: 3490,
      pv: 4300,
      amt: 2100,
    },
  ]

does anyone came accross the same issue?

Upvotes: 2

Views: 8331

Answers (1)

Jgarnie
Jgarnie

Reputation: 489

well, finally I found what was the issue with the chart, I will post it in case someone else rans into the same issue, basically you have to specify property 'aspect' instead of height in the responsiveContainer:

<ResponsiveContainer width="100%" aspect={3}>

Upvotes: 18

Related Questions