I have multiple arrays of data from an API that come in and I need to apply the [1] of the array on the line and the [0] on the axis of my chart
DATA SET
31) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)]
0: (2) [1631491200000, 83567686530.87027]
1: (2) [1631577600000, 77370641706.12778]
2: (2) [1631664000000, 76881051804.16806]
3: (2) [1631750400000, 79647419225.17595]
4: (2) [1631836800000, 77800286104.44485]
5: (2) [1631923200000, 75633602743.40773]
6: (2) [1632009600000, 75942505891.08444]
7: (2) [1632096000000, 73534559243.04233]
8: (2) [1632182400000, 66467363740.22289]
9: (2) [1632268800000, 63007572370.16917]
10: (2) [1632355200000, 71610128886.36876]
11: (2) [1632441600000, 74492626868.77536]
12: (2) [1632528000000, 74002539819.03792]
13: (2) [1632614400000, 74201342932.3685]
14: (2) [1632700800000, 72357770423.4004]
15: (2) [1632787200000, 68586122051.51538]
16: (2) [1632873600000, 65557023880.654594]
17: (2) [1632960000000, 65835114804.1442]
18: (2) [1633046400000, 67871265795.13519]
my attempt I tried .map and it was crashing my site. I'm thinking maybe I need to make a for loop in market_cap[1] something along those lines
<LineChart
margin={{ right: 70 }}
width={420}
height={170}
data={marketcap}
>
<Line
dataKey={marketcap[1]}
type="monotone"
stroke=" #10b981"
activeDot={{ r: 8 }}
/>
The data format of recharts is an array of objects, example from documentation:
[
{
"name": "Page A",
"uv": 4000,
"pv": 2400,
"amt": 2400
},
...
]
So you should do something like this:
const marketcap = yourData.map(item=>({x: item[0], line: item[1]}))
...
<LineChart
margin={{ right: 70 }}
width={420}
height={170}
data={marketcap}
>
<Line
dataKey="line"
type="monotone"
stroke=" #10b981"
activeDot={{ r: 8 }}
/>
<XAxis dataKey="x" />
</LineChart>