I am trying to integrate trading view chart with my custom data to build candle chart. But, all I see is wrong candle chart data. Below is what I have tried
declare global { interface Window { TradingView: any; }}let tvScriptLoadingPromise: Promise<void>;const PriceChart: React.FC<PieChartProps> = ({ selectedMarketIndex, marketSymbol }) => { const onLoadScriptRef = useRef<(() => void) | null>(null); const fetchOHLCData = useCallback(async () => { console.log(selectedMarketIndex, marketSymbol) try { const response = await getCandlesData(marketSymbol, selectedMarketIndex, '2024'); return response.map((row: Record<string, string>) => ({ time: parseInt(row.start)/1000, open: parseFloat(row.fillOpen), high: parseFloat(row.fillHigh), low: parseFloat(row.fillLow), close: parseFloat(row.fillClose), })); } catch (error) { console.error('Error fetching OHLC data:', error); return []; } }, [marketSymbol, selectedMarketIndex]); useEffect(() => { console.log("HERE") onLoadScriptRef.current = createWidget; if (!tvScriptLoadingPromise) { tvScriptLoadingPromise = new Promise((resolve) => { const script = document.createElement('script'); script.id = 'tradingview-widget-loading-script'; script.src = 'https://s3.tradingview.com/tv.js'; script.type = 'text/javascript'; script.onload = () => resolve(); document.head.appendChild(script); }); } tvScriptLoadingPromise.then(() => { if (onLoadScriptRef.current) { onLoadScriptRef.current(); } }); return () => { onLoadScriptRef.current = null; }; function createWidget() { console.log("Inside createWidget") if (document.getElementById('tradingview') && window.TradingView) { new window.TradingView.widget({ autosize: true, symbol: marketSymbol.toLowerCase().includes('perp') ? marketSymbol.split('-')[0] +'/USDC' : marketSymbol , interval: 'D', timezone: 'Etc/UTC', theme: 'dark', style: '1', locale: 'en', toolbar_bg: '#333', enable_publishing: false, allow_symbol_change: true, container_id: 'tradingview', datafeed: { onReady: (callback) => { console.log("Datafeed is ready"); callback({ supports_search: true, supports_group_request: false, supports_marks: true, supports_timescale_marks: true, supports_time: true, }); }, resolveSymbol: (symbolName, onSymbolResolvedCallback) => { console.log("Resolving symbol:", symbolName); onSymbolResolvedCallback({ name: symbolName, full_name: symbolName, description: 'Symbol description', pricescale: 100, minmov: 1, has_intraday: true, has_no_volume: false, type: 'crypto', timezone: 'Etc/UTC', }); }, getBars: async (symbolInfo, resolution, from, to, onHistoryCallback, onErrorCallback) => { console.log("Fetching bars:", { from, to, resolution }); try { const ohlcData = await fetchOHLCData(); if (!ohlcData || ohlcData.length === 0) { onErrorCallback('No data available'); } else { onHistoryCallback(ohlcData, { noData: false }); } } catch (error) { console.error('Error in getBars:', error); onErrorCallback('Error fetching data'); } }, }, }); } } }, [marketSymbol, fetchOHLCData]); return (<div className="tradingview-widget-container"><div className={styles.tradingview} id="tradingview" /></div> );};export default PriceChart;It appears as if my custom data is not even being fetched because I do not see any console logs from the functions onReady, resolveSymbol, getBars inside datafeed.
Maybe I am not integrating the tradingview component properly and I cannot find any example in react.
