Y-axis points not rendering

[blackpanther1881]

I'm using candle chart, i don't the reason but y axis points and horizontal grid not rendering, i tried most the solutions but non of them are working.

here is my comonent

"use client";
import { createChart, Time, CandlestickSeries } from "lightweight-charts";
import { useEffect, useRef } from "react";
import { stickData } from "@/Components/data";
import { useApiQuery } from "@/Helpers/useApiQueary";
import * as React from "react";

export const stickData = [
  {
    granularity: 60,
    tokenAddress: "0x6d30b4b49a8b0564bf35aeb714417943057804bd",
    open: "0.0001529350997223",
    high: "0.0001521309074302",
    low: "0.0001521309074302",
    close: "0.0001521309074302",
    volume: "165.3686930996073192",
    startInMilli: 1756533540000,
    endInMilli: 1756533599999,
  },
  {
    granularity: 60,
    tokenAddress: "0x6d30b4b49a8b0564bf35aeb714417943057804bd",
    open: "0.0001528700615685",
    high: "0.0001529350997223",
    low: "0.0001529350997223",
    close: "0.0001529350997223",
    volume: "6.0971311384656274",
    startInMilli: 1756528500000,
    endInMilli: 1756528559999,
  },
  {
    granularity: 60,
    tokenAddress: "0x6d30b4b49a8b0564bf35aeb714417943057804bd",
    open: "0.0001528309084814",
    high: "0.0001528700615685",
    low: "0.0001528700615685",
    close: "0.0001528700615685",
    volume: "6.7863715262944941",
    startInMilli: 1756528380000,
    endInMilli: 1756528439999,
  },
  {
    granularity: 60,
    tokenAddress: "0x6d30b4b49a8b0564bf35aeb714417943057804bd",
    open: "0.0001527760425398",
    high: "0.0001528309084814",
    low: "0.0001528309084814",
    close: "0.0001528309084814",
    volume: "0.9712586759059278",
    startInMilli: 1756528320000,
    endInMilli: 1756528379999,
  },
  {
    granularity: 60,
    tokenAddress: "0x6d30b4b49a8b0564bf35aeb714417943057804bd",
    open: "0.000152716303318",
    high: "0.0001527760425398",
    low: "0.0001527760425398",
    close: "0.0001527760425398",
    volume: "9.9",
    startInMilli: 1756525140000,
    endInMilli: 1756525199999,
  },
  {
    granularity: 60,
    tokenAddress: "0x6d30b4b49a8b0564bf35aeb714417943057804bd",
    open: "0.000152703944063",
    high: "0.000152716303318",
    low: "0.000152716303318",
    close: "0.000152716303318",
    volume: "1.9407322992487796",
    startInMilli: 1756523280000,
    endInMilli: 1756523339999,
  },
  ...
  ]
const CandleStick = ({ agentInfo }: any) => {
  const chartContainerRef: any = useRef();
  const [chartData, setChartData] = React.useState<any>(stickData);

  useEffect(() => {
    if (chartContainerRef?.current?.clientWidth) {
      const chart = createChart(chartContainerRef.current, {
        width: chartContainerRef.current.clientWidth,
        height: 400,
        layout: {
          background: { color: "#171717" },
          textColor: "#ffffff",
        },
        grid: {
          vertLines: { color: "#333" },
          horzLines: { color: "#333" },
        },
        crosshair: {
          mode: 0,
        },
        rightPriceScale: {
          visible: true,
          ticksVisible: true,
          textColor: "#fff",
        },
        timeScale: {
          borderColor: "#333",
          timeVisible: true,
          secondsVisible: false,
        },

        localization: {
          locale: navigator.language,
          timeFormatter: (time: Time) =>
            new Date((time as number) * 1_000).toLocaleString(),
          priceFormatter: (price: number) => {
            if (price < 0.001) {
              return price.toFixed(9); // Show 9 decimal places for very small values
            } else if (price < 0.01) {
              return price.toFixed(6); // Show 6 decimal places for small values
            } else {
              return price.toFixed(4); // Show 4 decimal places for larger values
            }
          },
        },
      });

      const candlestickSeries = chart.addSeries(CandlestickSeries, {
        upColor: "#4CAF50",
        downColor: "#F44336",
        borderDownColor: "#F44336",
        borderUpColor: "#4CAF50",
        wickDownColor: "#F44336",
        wickUpColor: "#4CAF50",
      });

      // Only process data if chartData is available
      if (chartData && chartData.length > 0) {
        const data = chartData
          .map((candle: any) => ({
            time: Math.floor(candle.startInMilli / 1000) as Time,
            open: parseFloat(candle.open),
            high: parseFloat(candle.high),
            low: parseFloat(candle.low),
            close: parseFloat(candle.close),
          }))
          .sort((a: any, b: any) => (a.time as number) - (b.time as number)); // Sort by time in ascending order

        console.log("Chart data:", data);
        candlestickSeries.setData(data);

        if (data.length > 0) {
          const lastTime = data[data.length - 1].time as number;
          const oneDayInSeconds = 24 * 60 * 60;
          const startTime = lastTime - oneDayInSeconds;

          // Set the visible range to show only one day
          chart.timeScale().setVisibleRange({
            from: startTime as Time,
            to: lastTime as Time,
          });

          chart.timeScale().scrollToPosition(0, false);
        }
        chart.timeScale().fitContent();
      }

      const resizeObserver = new ResizeObserver(() => {
        if (chartContainerRef.current) {
          chart.resize(chartContainerRef.current.clientWidth, 400);
        }
      });
      resizeObserver.observe(chartContainerRef.current);

      return () => {
        resizeObserver.disconnect();
        chart.remove();
      };
    }
  }, [chartData]);

  return (
    <div style={{ width: "100%", maxHeight: 400 }}>
      <div
        className="candle-container"
        ref={chartContainerRef}
        style={{
          width: "100%",
          height: 400,
          overflow: "hidden",
          borderRadius: "6px",
          backgroundColor: "#171717",
        }}
      ></div>
    </div>
  );
};
export default CandleStick;

pls check this image