How can I update all the chart and not only the lines?

[cdiezg07]

Whenever I update the lineSeries the price column is not updated and is placed on top of the others.
Any help, please? Thank you.

The code is this:

import React, { useEffect, useRef, useState } from 'react';
import { createChart, CrosshairMode } from 'lightweight-charts';
import "../css/Grafico.css"

var binanceSocket = new WebSocket("wss://stream.binance.com:9443/ws/btcusdt@kline_4h");

function Grafico({prediccion}) {
    const chartContainerRef = useRef();
    const chart = useRef();
    const resizeObserver = useRef();
    const [vela, setVela] = useState([]);
    const [datos, setDatos] = useState([]);

  useEffect(() => {

    if(chartContainerRef && chartContainerRef.current && datos.length > 0){
        if(!chart.current){
            chart.current = createChart(chartContainerRef.current, {
            width: chartContainerRef.current.clientWidth,
            height: chartContainerRef.current.clientHeight,
            layout: {
                backgroundColor: '#253248',
                textColor: 'rgba(255, 255, 255, 0.9)',
            },
            grid: {
                vertLines: {
                    color: '#334158',        
                },
                horzLines: {
                    color: '#334158',
                },
            },
            crosshair: {
                mode: CrosshairMode.Normal,
                
            },
            priceScale: {
                borderColor: '#485c7b',
            
            },
            timeScale: {
                borderColor: '#485c7b',
                timeVisible: true,
                secondsVisible: false,
            },
            });

            const candleSeries = chart.current.addCandlestickSeries({
                upColor: '#4bffb5',
                downColor: '#ff4976',
                borderDownColor: '#ff4976',
                borderUpColor: '#4bffb5',
                wickDownColor: '#838ca1',
                wickUpColor: '#838ca1',
            });
            candleSeries.setData(datos);
        
            });
    }
}, [datos]);

  useEffect(() => {
      if(datos.length > 0){
        resizeObserver.current = new ResizeObserver(entries => {
            const { width, height } = entries[0].contentRect;
            chart.current.applyOptions({ width, height });
            setTimeout(() => {
                //chart.current.timeScale().fitContent(); #Para que entren las maximas velas posibles
              chart.current.timeScale();
            }, 0);
      });


    resizeObserver.current.observe(chartContainerRef.current);

    return () => resizeObserver.current.disconnect();
    }
  }, [datos, prediccion]);

//New lineSeries

  var contador = 0;
  useEffect(() => {
    if(datos.length > 0){
    
    const lineSeries = chart.current.addLineSeries({ color: 'red' });
                
    for (let i = 0; i < prediccion.length; i++) {
        prediccion[i].value = parseFloat(prediccion[i].value);
        prediccion[i].time = parseInt(prediccion[i].time);
    }
    console.log("Convertir",prediccion);
    
    if(contador==0){
        lineSeries.setData(prediccion);
        contador++;
    }else{
        lineSeries.update(prediccion);
    }
}   
  }, [prediccion]);


//Historic data
async function fetchAsync (url) {
    let response = await fetch(url, {
        'mode': 'cors',
        'headers': {
            'Access-Control-Allow-Origin': '*',
        }
        });
    let data = await response.json();
    setDatos(data);

    return data;
}
useEffect (() => {
    fetchAsync('http://127.0.0.1:5000/datosHistoricos');
}, []);

if(datos.length === 0){
    return <p style={{color: "white"}}>Loading...</p>;
}

return(
    <div className='Grafico'>
        <div ref={chartContainerRef} className="chart-container"></div>
    
    </div>
);

}

export default Grafico;

[edew]

If you want to update an existing line series then you need to keep a reference to it and use the update method.

In your code above I can see you are creating a new line series every time the "prediccion" effect runs. That is why there are many line series.