I have two charts, one that shows the OLHC data with some indicators, and another, underneath the first chart, that shows the ATR data. Frequently the bottom chart either gets rendered as slightly wider than the top chart when the page loads (component React), or it becomes slightly wider on a LocalRangeChange event (or essentially when scrolling/zooming out). The top chart never becomes wider.
Valid appearance:
Invalid appearance after zooming in and then out, randomly:
I've attempted to capture the width of the top chart and apply it to the bottom chart in the events when the charts are resized due to a window change and due to scrolling when the width changes randomly:
Enforcing width on window change:
(new ResizeObserver( (entries) => { if(entries.length === 0 || entries[0].target !== priceChartContainerRef.current) { return; } setTargetChartWidth(__priceChart.ew.bl.s_); })).observe(priceChartContainerRef.current);useEffect( () => { console.log(" the value of targetChartWidth has changed: ", targetChartWidth); if(ATRChart) { ATRChart.applyOptions({ autoSize: false }); ATRChart.applyOptions({ width: targetChartWidth }); ATRChart.applyOptions({ autoSize: true }); } }, [targetChartWidth]);
Enforcing a chart width when scrolling, whether the width changes on its own or not:
ATRChart.timeScale().subscribeVisibleLogicalRangeChange(() => { priceChart.timeScale().setVisibleLogicalRange(ATRChart.timeScale().getVisibleLogicalRange()); if(ATRChart) { ATRChart.applyOptions({ autoSize: false }); ATRChart.applyOptions({ width: targetChartWidth }); ATRChart.applyOptions({ autoSize: true }); } });
The above does affect the width of the bottom chart, but not accurately - it either shrinks or expands.
Is the random change of width when zooming out a known bug ? Is my approach of addressing it valid ? Could this be caused by formatting ?