简体   繁体   中英

TradingView Lightweight charts - Fix the width of right and left price scales

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM