change the candlestick data on click react js

[zeeshan-shabbir]

i am using react hook useffect to render my candlestick but when i want to change the data on click its does not change . when click i save my api data in use context hook and then use in my candlestick component .i dont how to change on click and didnt find any reference kindly help.

 let CandleData = state.CandleData 
useEffect(() => {
    chart.current = createChart(chartContainerRef.current, {
      width: chartContainerRef.current.clientWidth,
      height: chartContainerRef.current.clientHeight,
      layout: {
        backgroundColor: '#1c1f2d',
        textColor: 'rgba(255, 255, 255, 0.9)',
      },
      grid: {
        vertLines: {
          color: '#334158',
        },
        horzLines: {
          color: '#334158',
        },
      },
      crosshair: {
        mode: CrosshairMode.Normal,
      },
      priceScale: {
        borderColor: '#485c7b',
      },
      timeScale: {
        borderColor: '#485c7b',
        rightOffset: 2,
      },
    });

    // chart.current.timeScale().getVisibleRange()
    const candleSeries = chart.current.addCandlestickSeries({
      upColor: '#4bffb5',
      downColor: '#ff4976',
      borderDownColor: '#ff4976',
      borderUpColor: '#4bffb5',
      wickDownColor: '#838ca1',
      wickUpColor: '#838ca1',
    });

    candleSeries.setData(CandleData);
  }, []);

[zeeshan-shabbir]

i need some help in this if anyone can help

[romfrancois]

Hi @zeeshan-shabbir,

As you can see here, we are preparing a tutorial with React.

Don't really know how you use/reuse your chart but from what I can see you may not need a useRef for this one.
You could do something like

export const ChartComponent = props => {
	const chartContainerRef = useRef();

	useEffect(
		() => {
			const handleResize = () => {
				chart.applyOptions({ width: chartContainerRef.current.clientWidth });
			};

			const { data } = props;

			const chart = createChart(chartContainerRef.current, {
				width: chartContainerRef.current.clientWidth,
				height: chartContainerRef.current.clientHeight,
				layout: {
					backgroundColor: '#1c1f2d',
					textColor: 'rgba(255, 255, 255, 0.9)',
				},
				grid: {
					vertLines: {
						color: '#334158',
					},
					horzLines: {
						color: '#334158',
					},
				},
				priceScale: {
					borderColor: '#485c7b',
				},
				timeScale: {
					borderColor: '#485c7b',
					rightOffset: 2,
				},
			});
			chart.timeScale().fitContent();

			const newSeries = chart.addCandlestickSeries({
				upColor: '#4bffb5',
				downColor: '#ff4976',
				borderDownColor: '#ff4976',
				borderUpColor: '#4bffb5',
				wickDownColor: '#838ca1',
				wickUpColor: '#838ca1',
			});
			newSeries.setData(data);

			window.addEventListener('resize', handleResize);
			return () => {
				window.removeEventListener('resize', handleResize);

				chart.remove();
			};
		},
		[props.data]
	);

	return (
		<div
			ref={chartContainerRef}
		/>
	);
};

[romfrancois]

Using the above component with some random OHLC data it produces something like

[zeeshan-shabbir]

Using the above component with some random OHLC data it produces something like

thank you much exactly what i want i was searching this from 2 days thanks but there is few things i want to known how can i update my data real time in this component which come api ?
and second i want to get x,y values on click from another component .

it will be pleasure .