how to map time with its respective data in chart

Question

I'm working on apexcharts. I managed to pass data in chart, but there seem to be issue with timestamps. I have two data i.e sender and receiver, each has its own timestamps. the graph's x-axis is based on the timestamps. but I don't know how to map the timestamp with its respective data. currently, the data in the graph are not showing right due to the timestamp issue. kindly help me to fix it. thanks in advance

here's my full code

const receiverData = [];
const senderData = [];
const timeData = [];

export default function GraphCard() {
  const [GraphData, setGraphData] = useState([])

  const showData = () => {
    axios.get('http://localhost:8006/api/v2/user/transactions').then(function (res) {

      var result = res.data.data;
      console.log(result)
      if (result.data) {
        setGraphData(result.data)
        for (const obj of result.data) {
          if (obj.role === 'Sender') {
            receiverData.push(obj.tokens)
            timeData.push(obj.date)
          }
          if (obj.role === 'Receiver') {
            senderData.push(obj.tokens)
            timeData.push(obj.date)
          }
        }
        console.log("Reciever", receiverData)
        console.log("Sender", senderData)
      }
      else {
        console.log('error')
      }
    })
  }



  const state = {
    series: [{
      color: '#000073',
      name: 'Received',
      data: receiverData.map((data) => (data))
    },
    {
      color: '#CA9026',
      name: 'Sent',
      data: senderData.map((data) => (data))
    }],


    options: {
      chart: {
        height: 280,
        type: 'area'
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        curve: 'smooth'
      },
      xaxis: {
        type: 'datetime',
        categories: timeData.map((data) =>(data))
      },
      yaxis: {
        type: ''
      },
      tooltip: {
        x: {
          format: 'dd/MM/yy HH:mm'
        },
      },
    },
  }

  useEffect(() => {
    showData()
  }, [])

  return (
    <Card >
      <CardContent display='flex' sx={{ flexDirection: 'column', }} >
        <Stack flexDirection='row' alignItems="center" gap={1}>
          < SsidChartOutlinedIcon sx={{ color: "text.secondary" }} />
          <Typography sx={{ fontSize: 15, fontWeight: 'bold' }} color="text.secondary" gutterBottom>
            Recent Transactions
          </Typography>
        </Stack>
        <div id="chart">
          <ReactApexChart options={state.options} series={state.series} type="area" height={280} />
        </div>
      </CardContent>
    </Card>
  );
}

Answer 1

On apex chart website, they have a case that is similar to yours:

series: [{
  data: [{ x: '05/06/2014', y: 54 }, { x: '05/08/2014', y: 17 } , ... , { x: '05/28/2014', y: 26 }]
}]

apexchart docs

To achieve this kind of objects, you can just do this:

const showData = () => {
axios.get('http://localhost:8006/api/v2/user/transactions').then(function (res) {

  var result = res.data.data;
  console.log(result)
  if (result.data) {
    setGraphData(result.data)
    for (const obj of result.data) {
      if (obj.role === 'Sender') {
        receiverData.push({x: obj.date.toString(), y: obj.tokens}) //date.toString() is not necessary if your date is already a string
        timeData.push(obj.date)
      }
      if (obj.role === 'Receiver') {
        senderData.push({x: obj.date.toString(), y: obj.tokens})
        timeData.push(obj.date)
      }
    }
    console.log("Reciever", receiverData)
    console.log("Sender", senderData)
  }
  else {
    console.log('error')
  }
})
}

And the rest should not need to be changed.