CODEWITHSUNDEEP
reactjsrecharts
kinkajou
kinkajou

Reputation: 3728

Rechart line is not visible

I am trying to plot line chart in reactjs using rechart. All component is visible except line. I am doing something wrong?

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


export default function Chart() {
    const data = [
        {
          name: '9 AM',
          amt: 2400
        },
        {
          name: '10 AM',
          amt: 2210,
        },
        {
          name: '11 AM',
          amt: 2290,
        },
        {
          name: '12 PM',
          amt: 2000,
        },
        {
          name: '13 PM',
          amt: 2181,
        },
        {
          name: '14 PM',
          amt: 2500,
        },
        {
          name: '15 PM',
          amt: 2100,
        },
      ];
    return (
        <div className="chart">
            <h3 className="chartTitle">Tickets</h3>
            <ResponsiveContainer width="100%" aspect={4 / 1}>
                <LineChart data={data}>
                  <XAxis dataKey="name"  stroke="#5550bd"/>
                  <Line type="monotone" datakey="amt" stroke="#82ca9d" activeDot={{ r: 8 }} strokeWidth={3}/>                 
                </LineChart> 
            </ResponsiveContainer>
        </div>
    )
}

Upvotes: 0

Views: 1282

Answers (1)

Jigarb1992
Jigarb1992

Reputation: 848

K should be capital in dataKey

<Line type="monotone" dataKey="amt" stroke="#82ca9d" activeDot={{ r: 8 }} strokeWidth={3}/>

Upvotes: 3

Related Questions