This may not be the most ideal solution, but it's a workaround that gets the job done. Simply adjust the sizes of all the charts slightly until the main area is the same size in all charts, matching the smallest size.
Note that this approach assumes the left alignment of the chart element...
<!--script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script-->
<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.development.js"></script>
<div class="chart-block" id="prices"></div>
<script type="text/javascript">
var all_charts=[
// {chart:,element:}
];
var nerrowest_chart_width;
function resize_all_charts(){
nerrowest_chart_width=Math.min(...all_charts.map(({chart})=>chart._private__chartWidget._private__paneWidgets[0]._private__paneCell.offsetWidth))
all_charts.forEach( (e)=> {
e.right_offset=e.chart._private__chartWidget._private__paneWidgets[0]._private__paneCell.offsetWidth-nerrowest_chart_width;
})
all_charts.forEach(({chart,element,right_offset})=>{
chart.resize( element.offsetWidth-right_offset, element.offsetHeight)
})
}
const prices_chart = LightweightCharts.createChart(prices, {
timeScale: {
timeVisible: true,
secondsVisible: false,
},
watermark: {
visible: true,
fontSize: 14,
horzAlign: 'center',
vertAlign: 'top',
color: 'rgba(171, 71, 188, 1)',
text: 'prices',
},
});
var prices_chart_info={chart:prices_chart,element:prices,right_offset:0};
all_charts.push(prices_chart_info);
window.addEventListener('resize', event => {
prices_chart.resize( prices.offsetWidth-prices_chart_info.right_offset, prices.offsetHeight)
});
const prices_lineSeries = prices_chart.addLineSeries({
lineType: 1
});
let points= ...
prices_lineSeries.setData(points);
resize_all_charts();
</script>
Additionally, there is a function available:
function sync_all_charts(){
var found=false;
for(let e of all_charts){
let barSpacing = e.chart.timeScale()._private__timeScale._private__barSpacing
let scrollPosition = e.chart.timeScale().scrollPosition();
if(e.scrollPosition!=scrollPosition|| e.barSpacing!=barSpacing)
{
all_charts.forEach((e)=>{
e.chart.timeScale().applyOptions({rightOffset: scrollPosition,barSpacing: barSpacing})
e.barSpacing = barSpacing;
e.scrollPosition = scrollPosition;
})
found=true;
break;
}
}
return found;
}
setInterval(()=>{
if(sync_all_charts())
resize_all_charts();
},1000)