Hy guys, I am currently working on stocks data and trying to create a candlestick chart. The issue I am facing is that I am saving OHLC data in different arrays respectively as well as Date in an an array as well. while plotting the graph only one candle is showing up and whole data is been generating in one candle , I wanna know what would be the logic or any way that I can create multiple candles with it the data dynamically.

Following are snippets from code and its result;

highPrice = [];
lowPrice = [];
openRate = [];
closeRate = [];
volume = [];
marketCap = [];
ohlc = [];
date = [];

seriesData = [];
$.ajax({
  type: "get",
  url: "data.json",
  success: function (json) {
    $.each(json, function (k, data) {
      highPrice.push(data.High);
      openRate.push(data.Open);
      lowPrice.push(data.Low);
      closeRate.push(data.Close);
      volume.push(data.Volume);
      marketCap.push(data.Marketcap);

      date.push(data.Date);
     
    });
  },
});

var options2 = {
  series: [
    {
      x: date,
      y: [openRate, highPrice, lowPrice, closeRate],
    },
  ],
  chart: {
    type: "candlestick",
    height: 290,
    id: "candles",
    toolbar: {
      autoSelected: "pan",
      show: false,
    },
    zoom: {
      enabled: false,
    },
  },
  plotOptions: {
    candlestick: {
      colors: {
        upward: "#3C90EB",
        downward: "#DF7D46",
      },
    },
  },
  xaxis: {
    type: "datetime",
  },
};

var chart2 = new ApexCharts(document.querySelector("#chart2"), options2);
chart2.render();

the giant candle

the data showing candle