i want to update crosshair lightweight-chart data with new data on scroll

Question

iam using subscribeVisibleLogicalRangeChange() function to listen to the chart range and successfully request new data , but after setting new data the chart is rendered and return to start point , i want to request and set new data without return to start point on user scroll

that is my component // fetchdata function

const fetchData = async (record: number) => {
    const response = await getSymbolTimeSeries(
      "AAPL",
      selectedInterval,
      record,
    );
    const { values } = response;
    const seriesData = values.map((value: SymbolDataType) => {
      return createData(
        value.datetime,
        Number(value.open),
        Number(value.close),
        Number(value.high),
        Number(value.low),
      );
    });

    seriesData.sort((a: ChartDataType, b: ChartDataType) => {
      return a.time - b.time;
    });

    setSymbolData(seriesData);
  };

// first useEffect to render initial data

  useEffect(() => {
    fetchData(300).catch(console.error);
  }, [selectedInterval]);

// second useEffect to generate the chart

  useEffect(() => {
    const width = tradeRef.current?.clientWidth;
    const height = tradeRef.current?.clientHeight;
    const chart = createChart(tradeRef.current || "", {
      width,
      height,
      layout: {
        background: {
          color: "#000000",
        },
        textColor: "rgba(255, 255, 255, 0.9)",
      },
      grid: {
        vertLines: {
          color: "rgba(197, 203, 206, 0.5)",
        },
        horzLines: {
          color: "rgba(197, 203, 206, 0.5)",
        },
      },
      crosshair: {
        mode: CrosshairMode.Normal,
      },
      rightPriceScale: {
        borderColor: "rgba(197, 203, 206, 0.8)",
      },
      timeScale: {
        borderColor: "rgba(197, 203, 206, 0.8)",
      },
    });

    const candleSeries = chart.addCandlestickSeries({
      upColor: "rgb(255, 24, 98)",
      downColor: "#000",
      borderDownColor: "rgb(60, 179, 113)",
      borderUpColor: "rgb(255, 24, 98)",
      wickDownColor: "rgb(255, 24, 98)",
      wickUpColor: "rgb(60, 179, 113)",
    });

    candleSeries.setData(symbolData);

    const handleResize = () => {
      chart.applyOptions({
        width: tradeRef.current?.clientWidth,
        height: tradeRef.current?.clientHeight,
      });
    };

    async function onVisibleLogicalRangeChanged(
      newVisibleLogicalRange: { from: number } | null,
    ) {
      if (
        newVisibleLogicalRange !== null &&
        newVisibleLogicalRange.from < -106
      ) {
        // load additional data and append it to existing data
        fetchData(symbolData.length + 10);
        // chart.timeScale().scrollToPosition(-symbolData.length + 253, true);
      }
    }

    chart
      .timeScale()
      .subscribeVisibleLogicalRangeChange(onVisibleLogicalRangeChanged);

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
      chart.remove();
      chart
        .timeScale()
        .unsubscribeVisibleLogicalRangeChange(onVisibleLogicalRangeChanged);
    };
  }, [symbolData]);

// component

<Box
        ref={tradeRef}
        sx={{
          width: "calc(100vw - 550px)",
          height: "90%",
          mt: 1.5,
        }}
      />
      <Box>

score 0 · Answer 1 · answered Jul 31 '23 at 09:30

When you are adding the new data via setData then you could request the current VisibleRange for the chart before that, and then reapply that after setting the new data.

Additionally, please ensure that the chart is only created once. Many users of React recreate the entire chart whenever there is an update. This may not apply to you, but in general the chart only needs to be created once, and then the rest of the changes can be made using the API.

i want to update crosshair lightweight-chart data with new data on scroll

1 Answers1