score:1

Accepted answer

the official documentation states (link):

points

the coordinates of all the points in the line, usually calculated internally.

format:

[{x: 12, y: 12, value: 240}]

to pass the array you've provided you need to transform the array a bit. you can do this with:

const data = array.map(x => ({pv: x}));

return (
  <linechart data={data}>
    <line type="monotone" datakey="pv" stroke="#8884d8" />
  </linechart>
);

obviously left out a lot of things here, but you can probably leave the coordinates themselves out since you are likely drawing on a cartesian plane. the coordinates will be calculated automatically - just pass the values.

here, the line will select the pv key from your dataset, and draw them.

snippet derived from: http://recharts.org/en-us/api/linechart

score:1

you need to provide an array of objects as data

const array = [0, 0, 1, 2, 454, 3];
const data = array.map((value,index)=>({index,value}))

and then

<linechart width={600} height={300} data={data}>
   <xaxis datakey="index"/>
   <yaxis/>
   <line  datakey="value" stroke="#8884d8" activedot={{r: 8}}/>
</linechart>

demo at https://jsfiddle.net/mxgkwszq/1/

score:3

for anyone who want to use the data array as is, without array map function. providing a function to datakey prop is your answer:


    const data= [0, 0, 1, 2, 454, 3];

    <linechart width={500} height={300} data={data}>
      <cartesiangrid strokedasharray="3 3" />
      <yaxis datakey={(v) => v} />
      <line type="monotone" datakey={v=>v} stroke="#8884d8" />
    </linechart>

in case you want to provide more data such as xaxis tick names, tooltip legend, you should use the map function and add other properties.


Related Query

More Query from same tag