Good day. I have added a Chart to the SPA react app. The Chart is rendered on the page using a user effect. A orderLine also is placed on the chart. There is also an input on the page, and depending on this input, the orderLine should change. However, when the orderLine is drawn, the entire chart will be rendered as a target. Also, when I change the position of the line, I transfer the data to the same input and everything is re-rendered in the same way.
How can I fix this problem and not redraw the chart, but only the orderLine?
export const TVChartContainer = ({
symbol= 'Binance:BTC/USDT',
interval= '1D',
containerId = 'tv_chart_container',
libraryPath = '/charting_library/',
chartsStorageUrl = 'https://saveload.tradingview.com',
chartsStorageApiVersion = '1.1',
clientId = 'tradingview.com',
userId = 'public_user_id',
fullscreen = false,
autosize = true,
studiesOverrides = {},
buyLine,
setBuyLine,
}) => {
useEffect(() => {
const widgetOptions = {
debug: false,
symbol: symbol,
datafeed: Datafeed,
interval: interval,
container_id: containerId,
library_path: libraryPath,
locale: getLanguageFromURL() || 'en',
disabled_features: ['use_localstorage_for_settings'],
enabled_features: ['study_templates'],
charts_storage_url: chartsStorageUrl,
charts_storage_api_version: chartsStorageApiVersion,
client_id: clientId,
user_id: userId,
fullscreen: fullscreen,
autosize: autosize,
studies_overrides: studiesOverrides,
};
const tvWidget = new widget(widgetOptions);
tvWidget.onChartReady(() => {
const order = tvWidget.chart().createOrderLine()
.setText("Buy Line")
.onMove(function () {
setBuyLine(order.getPrice().toFixed(2));
})
.setLineLength(30)
.setLineStyle(2)
.setPrice(buyLine)
.setLineColor('blue')
.setQuantity(buyLine);
})
}, [symbol, buyLine]);
return (
<div
id={containerId}
className={'TVChartContainer'}
/>
);
};
You are setting buyLine in the useEffect, and have it as a dependency, this it will be stuck in an infinite loop. Remove that dependency.