react apex charts x axis labels and tool tip showing different times instead of actual PST time

Question

i am new to react js and

i am using react apex charts of chart type line and getting the data from backend in the form of json array and coming to the issue the data has time as key in UTC iso format and my web server/application time format is PST. for that i am converting to PST before feeding to the chart.

but instead of pst time chart giving other times as labels i am tried to check conversion but unable to find the issue.

this is my code:

import React, { useEffect, useState } from 'react';
import ReactApexChart from 'react-apexcharts';

const Dashboard = () => {
  const [last24HoursStats, setLast24HoursStats] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const jsonData = '[{"voiceCount":10,"smsCount":15,"updatedTime":null,"updatedTimeAsString":"2024-03-27T15:00:00Z"},{"voiceCount":5,"smsCount":5,"updatedTime":null,"updatedTimeAsString":"2024-03-27T14:00:00Z"}]';
        const jsonObject = JSON.parse(jsonData);
        if (jsonObject) {
          setLast24HoursStats(jsonObject);
        }
        last24HoursStats.map(item => {
          const pstTimeString = formatToPSTByDate(item.updatedTimeAsString);
          alert("UTC " + item.updatedTimeAsString + " GMT " + new Date(pstTimeString) + " PST " + pstTimeString);
        });
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
  }, [last24HoursStats]);

  const formatToPSTByDate = (utcDate) => {
    const date = new Date(utcDate);
    const options = {
      weekday: 'short',
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: 'numeric',
      minute: 'numeric',
      second: 'numeric',
      hour12: false,
      timeZone: 'America/Los_Angeles',
    };
    const formattedDate = date.toLocaleString('en-US', options);
    return formattedDate.replace(/,/g, '');
  }

  const transformedData = [
    {
      name: 'Voice',
      data: last24HoursStats.map(item => {
        const timestamp = new Date(formatToPSTByDate(item.updatedTimeAsString)).getTime();
        const count = item.voiceCount;
        return [timestamp, count];
      })
    },
    {
      name: 'SMS',
      data: last24HoursStats.map(item => {
        const timestamp = new Date(formatToPSTByDate(item.updatedTimeAsString)).getTime();
        const count = item.smsCount;
        return [timestamp, count];
      })
    }
  ];

  const last24HoursStatsChart = {
    series: transformedData.map(item => ({
      name: item.name,
      data: item.data,
    })),
    svOptions: {
      chart: {
        type: 'line',
        toolbar: {
          export: {
            csv: {
              filename: 'hourlyReqActivity',
              columnDelimiter: ';',
              headerCategory: 'Timestamp',
              dateFormatter: function (timestamp) {
                return new Date(timestamp);
              }
            },
            svg: {
              filename: 'ReqActivity',
            },
            png: {
              filename: 'ReqActivity',
            }
          },
        },
      },
      colors: ['#FFA500', '#0000FF'],
      dataLabels: {
        enabled: false,
      },
      stroke: {
        curve: 'smooth',
      },
      fill: {
        type: 'none',
      },
      legend: {
        show: true,
        position: 'bottom',
        horizontalAlign: 'center',
        offsetY: 8,
        markers: {
          width: 15,
          height: 15,
          radius: 2,
        },
        itemMargin: {
          horizontal: 10,
        },
      },
      xaxis: {
        type: 'datetime',
      },
      title: {
        text: 'Request Activity',
        align: 'center',
        style: {
          fontSize: '18px',
          fontWeight: 'bold',
          color: '#333',
        },
      },
    },
  };

  return (
    <div className="dashboard_lineChart">
      <ReactApexChart options={last24HoursStatsChart.svOptions} series={last24HoursStatsChart.series} type="line" height={300} />
    </div>
  );
};

export default Dashboard;

for the above data i am getting this conversion prints properly

UTC 2024-03-27T15:00:00Z GMT Wed Mar 27 2024 08:00:00 GMT+0530 (India Standard Time) PST 3/27/2024, 8:00:00 AM
UTC 2024-03-27T14:00:00Z GMT Wed Mar 27 2024 07:00:00 GMT+0530 (India Standard Time) PST 3/27/2024, 7:00:00 AM

but not getting why instead of plotting at 7 AM and 8:00 AM plotting at 1 : 00 AM and 3:00 AM of Mar 27

please help me how to get correct x axis labels and as well as tool tip not displaying proper x axis label

Thanks.