caught (in promise) TypeError: Cannot read properties of undefined (reading 'length')

[burgossrodrigo]

I have a code that turns a series data into OHLC data and i'm trying to plot it using apexchart.

This is an example of the data that is going through.

[
{
"open":1.6999999999999997e-9,
"high":1.6999999999999997e-9,
"low":1.6999999999999997e-9,
"close":1.6999999999999997e-9,
"timestamp":1679540493000
},
{
"open":1.6999999999999997e-9,
"high":1.6999999999999997e-9,
"low":1.6999999999999997e-9,
"close":1.6999999999999997e-9,
"timestamp":1679540596000
},
{
"open":1.6999999999999997e-9,
"high":1.6999999999999997e-9,
"low":1.6999999999999997e-9,
"close":1.6999999999999997e-9,
"timestamp":1679540794000
},
{
"open":1.6999999999999997e-9,
"high":1.6999999999999997e-9,
"low":1.6999999999999997e-9,
"close":1.6999999999999997e-9,
"timestamp":1679541018000
},
{
"open":1.6999999999999997e-9,
"high":1.6999999999999997e-9,
"low":1.6999999999999997e-9,
"close":1.6999999999999997e-9,
"timestamp":1679547479000
},
{
"open":1.6999999999999997e-9,
"high":1.6999999999999997e-9,
"low":1.6999999999999997e-9,
"close":1.6999999999999997e-9,
"timestamp":1679547611000
},
{
"open":1.6999999999999997e-9,
"high":1.6999999999999997e-9,
"low":1.6999999999999997e-9,
"close":1.6999999999999997e-9,
"timestamp":1679547678000
}

Yet i'm receiving this error:

caught (in promise) TypeError: Cannot read properties of undefined (reading 'length')
    at Function.value (apexcharts.common.js:6:1)
    at t.value (apexcharts.common.js:14:1)
    at t.create (apexcharts.common.js:6:1)
    at apexcharts.common.js:14:1
    at new Promise (<anonymous>)
    at t.value (apexcharts.common.js:14:1)
    at apexcharts.common.js:6:1
    at Array.forEach (<anonymous>)
    at apexcharts.common.js:6:1
    at new Promise (<anonymous>)
   

Here is my component:

    interface OhlcData {
  time: string;
  open: number;
  high: number;
  low: number;
  close: number;
}

interface Props {
  data: OhlcData[];
}

const CandleChart: React.FC<Props> = ({ data }) => {
  console.log(data)
const options: ApexOptions = {
  chart: {
    type: "candlestick",
    height: 350,
    id: "ohlc-chart",
    toolbar: {
      autoSelected: "zoom",
      show: false
    },
    zoom: {
      enabled: false
    }
  },
  xaxis: {
    type: 'datetime'
  },
  yaxis: {
    tooltip: {
      enabled: true
    }
  },
  plotOptions: {
    candlestick: {
      colors: {
        upward: "#4CAF50",
        downward: "#F44336"
      }
    }
  },
  series: [
    {
      data: data.map((d) => ({
        x: new Date(d.time).getTime(),
        y: [d.open, d.high, d.low, d.close]
      }))
    }
  ]
};
return data.length > 0 ? <Chart options={options} /> : <></>
};

Can someone give me a hint?

[coder-shanks]

if data is coming from the API response, you can use optional chaining on the last line - return data?.length > 0 ? <Chart options={options} /> : <></> OR return data && data.length > 0 ? <Chart options={options} /> : <></>

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.