I use an API from Financial Modeling Prep to get the financial data, and I loop through the time series data in a descending order to display the candles. However, i got an issue with the volume data, as it is not being shown as expected.

import { createChart } from "lightweight-charts";
import { useEffect, useRef } from "react";
import "./styles.css";

export default function App() {
  const chartContainerRef = useRef();
  const chart = useRef();

  useEffect(() => {
    chart.current = createChart(chartContainerRef.current, {
      width: chartContainerRef.current.clientWidth,
      height: 500, //"300px", //chartContainerRef.current.clientHeight,
    });

    const candleSeries = chart.current.addCandlestickSeries();
    const volumeSeries = chart.current.addHistogramSeries();

    fetch(
      `https://financialmodelingprep.com/api/v3/historical-price-full/AAPL?apikey=5GMEedr6gtyupYBz7MXYBUOzfRUNcpDm`
    )
      .then((res) => res.json())
      .then((getData) => getData["historical"])
      .then((data) => {
        var dps = [];
        var volumeData = [];
        for (var i = data.length - 1; i > 0; i--) {
          dps.push({
            time: data[i].date,
            open: data[i].open,
            high: data[i].high,
            low: data[i].low,
            close: data[i].close,
          });
          volumeData.push({
            time: data[i].date,
            volume: data[i].volume,
          });
        }
        candleSeries.setData(dps);
        volumeSeries.setData(volumeData);
      });
  }, []);

  return (
    <div className="App">
      <div
        ref={chartContainerRef}
        className="chart-container"
        // style={{ height: "100%" }}
      />
    </div>
  );
}

Full code in codesandbox