export const CandleChart = ({
  interval,
  candles,
  symbolName}: CandleChartProps) => {

  const chart = useRef<Chart|null>();
  useEffect(() => {
    chart.current = init(chart-${tradeId}, {styles: chartStyles});

    return () => dispose(chart-${tradeId});
  }, [tradeId]);

  useEffect(() => {
    chart.current?.applyNewData(candles);
    chart.current?.overrideIndicator({
      name: "VOL",
      shortName: "Объем",
      calcParams: [],
      figures: [
        {
          key: "volume",
          title: "",
          type: "bar",
          baseValue: 0,
          styles: (data: IndicatorFigureStylesCallbackData<Vol>, indicator: Indicator, defaultStyles: IndicatorStyle) => {
            const kLineData = data.current.kLineData as KLineData;
            let color: string;

            if (kLineData.close > kLineData.open) {
              color = utils.formatValue(indicator.styles, "bars[0].upColor", (defaultStyles.bars)[0].upColor) as string;
            } else if (kLineData.close < kLineData.open) {
              color = utils.formatValue(indicator.styles, "bars[0].downColor", (defaultStyles.bars)[0].downColor) as string;
            } else {
              color = utils.formatValue(indicator.styles, "bars[0].noChangeColor", (defaultStyles.bars)[0].noChangeColor) as string;
            }

            return {color};
          },
        },
      ],
    }, paneId.current);
    chart.current?.createIndicator("VOL", false, {id: paneId.current});
    chart.current?.setPriceVolumePrecision(+pricePrecision, +quantityPrecision);
  }, [candles]);
  
  useEffect(() => {
    if(candles.length === 0) return;

    if (chart.current) {
      chart.current?.subscribeAction(ActionType.OnScroll, onScrollbarPositionChanged);
    }
  
    return () => {
      if (chart.current) {
        chart.current.unsubscribeAction(ActionType.OnScroll, onScrollbarPositionChanged);
      }
    };
  }, [chart, interval, candles]);

  const now = Date.now();
  const onScrollbarPositionChanged = () => {
    const dataList = chart.current?.getDataList();
    const from = chart.current?.getVisibleRange().from;
    const to = chart.current?.getVisibleRange().to;
    
    if(!dataList  !to  !from) return;
    let dataListLength = dataList.length;
    if(dataListLength === to) {
      let startTime = dataList[dataList.length - 1].timestamp;
      if (startTime === prevStartTime) return;
      prevStartTime = startTime;

      if(isLastCandleToday(startTime, interval)) return;
 getCandleData(symbolName, interval, startTime, now).then((data) => {
        if (data) {
          const newCandles = data.map((item: any[]) => ({
            timestamp: item[0],
            open: item[1],
            high: item[2],
            low: item[3],
            close: item[4],
            volume: item[5],
          }));

          if (newCandles[newCandles.length - 1].timestamp === startTime) {
            console.log("newCandles === startTim");

            return;
          } else {
            chart.current?.applyMoreData(newCandles);
  const isLastCandleToday = (lastCandleTimestamp: number, interval: string) => {
    const lastCandleDate = dayjs(lastCandleTimestamp);
    const today = dayjs();
  
    if (interval.includes("m")  interval.includes("h")  interval.includes("d")) {
      return lastCandleDate.isSame(today, "day");
    }
  
    return false;
  };

  const getCandleData = useCallback((symbol: string, interval: string, startTime: number, endTime: number): Promise<any> => {
    return axios.get(https://api.binance.com/api/v1/klines?symbol=${symbol}&interval=${interval}&startTime=${startTime}&endTime=${endTime})
      .then(response => response.data)
      .catch(error => console.error(error));
  }, []);
  return (<>  <Box
            ref={ref}
            id={chart-${tradeId}}
            width="calc(100% - 55px)"
            height={!handle.active ? 550 : "100%"}
            sx={{borderLeft: "2px solid #F5F5F5"}}
          > </Box></>);
};


            chart.current?.applyMoreData(newCandles); добавляется в начало графика, мне нужно добавлять в конец графика. 
Если использовать  applyNewData то график дергается и прыгает при  обновлении, тогда нужно отключить это дергание как-то. А если applyNewData  то добавлять в конец гафика