RECHARTS having trouble applying data to my chart-CodePudding

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 }}
        />

CodePudding user response：

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>