Is there any way to fix the width of the right (and left) price scales to a certain number of pixels? Say, 50 pixels to the right price scale and 70 pixels to the left price scale?
For a reprex, please see https://jsfiddle.net/TradingView/cnbamtuh/ , from where the right price scale code below is taken, and https://jsfiddle.net/TradingView/6s01gdje/ , which shows the left price scale. I added, in the comments (//) in the code below, an option that doesn't work, but would be useful to have. Any way to have something that accomplishes this behavior?
Thanks
rightPriceScale: {
scaleMargins: {
top: 0.3,
bottom: 0.25,
},
borderVisible: false,
// width: 50
},
leftPriceScale: {
visible: true,
borderVisible: false,
// width: 70
},
not the best solution but something that works. just resize all charts whole size a little until the main area is the same size in all charts the smallest size in all charts.
it assumes left alignment of 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 prices_chart_info={chart:prices_chart,element:prices,right_offset:0};
// all_charts.push(prices_chart_info);
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>
there is also
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();
// find first non matching, updatea all , and break;
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)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.