Multiple Line Chart Tooltip getting time and Xaxis time does not match.

[ashifnadaf8788]

I am Using this code but in Xaxis time not updated and red line not showing as per time. after added value for blue line its updated properlly. please suggest how to fix it.

please check the below screenshot.

renderChart(parsedMessage: any): void {
console.log(parsedMessage, "hello");
if (parsedMessage && parsedMessage.active_bidders) {
const activeBidders = parsedMessage.active_bidders;
const labels = Object.keys(activeBidders);

  const seriesData = labels.map(label => {
    const sortedBids = activeBidders[label].sort((a, b) => {
      const [hoursA, minutesA] = a.time.split(':');
      const [hoursB, minutesB] = b.time.split(':');
      const timeA = new Date(0, 0, 0, parseInt(hoursA), parseInt(minutesA)).getTime();
      const timeB = new Date(0, 0, 0, parseInt(hoursB), parseInt(minutesB)).getTime();
      return timeA - timeB;
    });

    return {
      name: label,
      data: sortedBids.map(bid => bid.bid)
    };
  });

  const currentTime = new Date().getTime();

  const xAxisValues = labels.reduce((acc, label) => {
    return acc.concat(activeBidders[label].map(bid => bid.time));
  }, []);

  const timeDateObjects = xAxisValues.map(time => {
    const [timeWithoutMeridiem, meridiem] = time.split(' ');
    const [hours, minutes] = timeWithoutMeridiem.split(':').map(Number);

    let hours24 = hours;
    if (meridiem === 'PM' && hours !== 12) {
      hours24 += 12;
    } else if (meridiem === 'AM' && hours === 12) {
      hours24 = 0;
    }

    const currentDate = new Date();
    return new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(), hours24, minutes);
  });

  const options = {
    series: seriesData,
    chart: {
      height: 350,
      type: 'line',
      animations: {
        enabled: true,
        easing: 'linear',
        dynamicAnimation: {
          speed: 1000
        }
      },
      toolbar: {
        show: false
      },
      zoom: {
        enabled: false
      }
    },
    colors: ['#007bff', '#dc3545', '#ffc107'],
    dataLabels: {
      enabled: false
    },
    stroke: {
      curve: 'straight'
    },
    title: {
      text: 'Bid History',
      align: 'left'
    },
    xaxis: {
      type: 'datetime',
      categories: timeDateObjects.map(date => date.getTime()),
      labels: {
        formatter: function (val) {
          return new Date(val).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        }
      }
    },
    yaxis: {
      title: {
        text: 'Bid Amount'
      }
    },
    tooltip: {
      enabled: true,
      custom: function ({ series, seriesIndex, dataPointIndex }) {
        const bidderName = labels[seriesIndex];
        const bidAmount = series[seriesIndex][dataPointIndex];
        const time = activeBidders[bidderName][dataPointIndex].time;
        const formattedTime = time;
        return `<div>
              <span>${bidderName}</span><br>
              <span>Bid Amount: ${bidAmount}</span><br>
              <span>Time: ${formattedTime}</span>
            </div>`;
      }
    }
  }

  const chartElement = document.querySelector('#chart');
  if (chartElement) {
    if (this.chart) {
      this.chart.destroy();
    }
    this.chart = new ApexCharts(chartElement, options);
    this.chart.render();
  } else {
    console.error("Chart element not found in the DOM.");
  }
} else {
  console.error("Parsed message or active bidders are undefined.");
}

}