0

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
    },
PLA
  • 89
  • 1
  • 7
  • How the price axis should look like if the width is fixed in case when a label takes more space than provided? For example, you fix the width by 50px but the label that should be displayed on the scale (e.g. `100.1100001`) takes more than 50px, e.g. 70px. – timocov Mar 01 '22 at 09:31
  • Once one has the freedom to choose the width, that's something that one should consider and there may be various ways to address it: rounding to 2 decimals, changing again the width to 70 or 80px or whatever is necessary ... The usual trial and error. It's not fixed in stone. But, now, one cannot do any of that because the width cannot be fixed, as far as I know. – PLA Mar 01 '22 at 18:39
  • I think in this case probably it's better to write your own library to handle this as one is needed. Btw, do you have any examples of other libraries where you had this ability? – timocov Mar 01 '22 at 18:47
  • Sure - Here there is one solution, in R. It fixes in terms of characters. # From https://stackoverflow.com/questions/69843379/how-to-set-a-fixed-width-of-y-axis-in-r-ggplot-plots Another point. Why the -1 in the question? I searched in the documentation and the capability doesn't exist, while it can be found in other languages. – PLA Mar 02 '22 at 00:49

1 Answers1

0

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)
Shimon Doodkin
  • 4,310
  • 34
  • 37
  • Thanks, Shimon. These solutions assume that I have more than one chart open at the same time. In reality, I have a single chart that I keep refreshing from another program, every few seconds. That's why I need the fixed internal boundaries - otherwise the standard chart keeps changing the internal width from one call to the next, continuously shrinking and expanding, depending on the numbers displayed. Unpleasant behavior, from the user's perspective. – PLA Mar 09 '22 at 15:02