I am using an API from Financial Modelling Prep, and I managed to get the daily historical prices as well as the volume data to be displayed on the chart, but the volume doesn’t appear in the chart.

I have built the volume with the following properties, lineWidth = 2, priceFormat = volume, overlay = true.

function Chart() {
    const log = console.log;
    const chartContainerRef = useRef();
    
    const { id } = useParams();

    const apiKey = 'yfmtiz4PGwIlCalGtRjsLcrQ9rF6NAHt'
  
    useEffect(() => {
        const chart = createChart(chartContainerRef.current, {
            width: chartContainerRef.current.clientWidth,
            height: 300,
            timeScale: {
            timeVisible: true,
            secondsVisible: false,
            },
        });

        const candleSeries = chart.addCandlestickSeries();
        const volumeSeries = chart.addHistogramSeries({
          lineWidth: 2,
          priceFormat: {
            type: "volume"
          },
          overlay: true,
          scaleMargins: {
            top: 0.8,
            bottom: 0
          }
        });
  
        fetch(
        `https://financialmodelingprep.com/api/v3/historical-price-full/${id}?apikey=${apiKey}`
        )
        .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,
            })};
// Here we retrieve the volume data and push them to an array.
            for (var i = data.length-1; i > 0; i--) {
              volumeData.push({
                time : data[i].date,
                volume: data[i].volume,
            })};
            candleSeries.setData(dps);
            volumeSeries.setData(volumeData);
            }).catch((err) => log(err));

    }, []);
  
    return (
      <div>
        <div ref={chartContainerRef} />
      </div>
    );
  }

  export default function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path='symbol/:id' element={<Chart />} />
            </Routes>
        </BrowserRouter>
    );
}