lightweight-chart for is render errors

43 Views Asked by At

enter image description here I'm trying to draw minute-by-minute price movements on the timeline because I have a large amount of data (1000 or so data) but this is what it looks like after accessing the data, it's very strange

code:
 useEffect(() => {
    try {
      if (!isReady || !stock.No) {
        return;
      }
      ltnApi
        .get<{ list: IPrice[] }>(`/financial/stock-prices`, {
          params: {
            securityCode: stock.No,
            priceType: "minute",
            startDate: moment("2023-12-13 10:00:00")
              .subtract(23, "hours")
              .startOf("hour")
              .format("YYYY-MM-DD:HH:mm:ss"),
          },
        })
        .then((rst) => {
          if (rst && rst.data.list) {
const chart = createChart(chartContainerRef.current as HTMLDivElement, {
      width: chartContainerRef.current?.offsetWidth || 0,
      height: chartContainerRef.current?.offsetHeight || 0,

      layout: {
        textColor: "#333",
      },
      localization: {
        locale: "zh-TW",
      },
      grid: {
        vertLines: {
          visible: false,
        },
        horzLines: {
          visible: false,
        },
      },
      rightPriceScale: {
        visible: true,
        borderColor: "transparent",
      },
    });
   
            const graphData = rst.data.list.map((item) => ({
              time: moment(item.time).unix(),

              value: +item.price,
            }));

            areaSeriesRef.current?.setData(graphData as any);

            chartRef.current?.timeScale().applyOptions({
              borderColor: "#71649C",
              barSpacing: 10,
              fixRightEdge: true,
              minBarSpacing: 0,
              fixLeftEdge: true,
              timeVisible: true,
              secondsVisible: false,
              tickMarkMaxCharacterLength: 60,
            });
            chartRef.current?.timeScale().fitContent();
          }
        });
    } catch (error) {}
  }, [stock.No, isReady]);


enter image description here That's what I was hoping for.

0

There are 0 best solutions below