left axis visible partially. also the labels.

[devhimath]

Lightweight Charts Version: 3.0

I have used a very basic code to test lightweight charts. The only issue which i cannot find anything on the internet or in the docs is about my issue with the left axis not visible completely. In the attached screnshot, you can see how it is visible only partially. Cannot understand which property will modify it. Kindly advise.

<script>
        const chart = LightweightCharts.createChart(document.body, { width: 1000, height: 800 });
        chart.applyOptions({
                priceScale: {
                    position: 'left',
                    mode: 1,
                    autoScale: true,
                    invertScale: false,
                    alignLabels: true,
                    borderVisible: true,
                    borderColor: '#555ffd',
                    entireTextOnly: true,
                    scaleMargins: {
                        top: 0.30,
                        bottom: 0.25,
                    },
                },
            });
        const lineSeries = chart.addLineSeries({
                priceScaleId: 'left',
                title: 'Line Chart',
                scaleMargins: {
                    top: 0.1,
                    bottom: 0.3,
                },
            });
        lineSeries.setData([
            { time: '2019-04-11', value: 80.01 },
            { time: '2019-04-12', value: 96.63 },
            { time: '2019-04-13', value: 76.64 },
            { time: '2019-04-14', value: 81.89 },
            { time: '2019-04-15', value: 74.43 },
            { time: '2019-04-16', value: 80.01 },
            { time: '2019-04-17', value: 96.63 },
            { time: '2019-04-18', value: 76.64 },
            { time: '2019-04-19', value: 81.89 },
            { time: '2019-04-20', value: 74.43 },
        ]);
        const candleSeries = chart.addCandlestickSeries({
                priceScaleId: 'left',
                title: 'Candle Data',
                scaleMargins: {
                    top: 0.1,
                    bottom: 0.3,
                },
            });
        candleSeries.setData([
            { time: "2018-12-19", open: 141.77, high: 170.39, low: 120.25, close: 145.72 },
            { time: "2018-12-20", open: 145.72, high: 147.99, low: 100.11, close: 108.19 },
            { time: "2018-12-21", open: 108.19, high: 118.43, low: 74.22, close: 75.16 },
            { time: "2018-12-22", open: 75.16, high: 82.84, low: 36.16, close: 45.72 },
            { time: "2018-12-23", open: 45.12, high: 53.90, low: 45.12, close: 48.09 },
            { time: "2018-12-24", open: 60.71, high: 60.71, low: 53.39, close: 59.29 },
            { time: "2018-12-25", open: 68.26, high: 68.26, low: 59.04, close: 60.50 },
            { time: "2018-12-26", open: 67.71, high: 105.85, low: 66.67, close: 91.04 },
            { time: "2018-12-27", open: 91.04, high: 121.40, low: 82.70, close: 111.40 },
            { time: "2018-12-28", open: 111.51, high: 142.83, low: 103.34, close: 131.25 },
            { time: "2018-12-29", open: 131.33, high: 151.17, low: 77.68, close: 96.43 },
            { time: "2018-12-30", open: 106.33, high: 110.20, low: 90.39, close: 98.10 },
            { time: "2018-12-31", open: 109.87, high: 114.69, low: 85.66, close: 111.26 },
        ]);
    </script>

Screenshots

[timocov]

How can I reproduce it? I just tried your code and it works fine with 3.1.2 version:

[devhimath]

Thanks for responding quickly. Any idea what could be the issue?
i am using the cdn link to include the library, so not sure which version is it.

<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>

[timocov]

It should be the latest one (3.1.2). Can you reproduce it here https://jsfiddle.net/hv3xp9wk/? It's exactly your example with the latest version of the library.

[devhimath]

Noted. But how to select the version. I am using the cdn link to include the library.

I tried your link of jsfiddle.net and saw the same issue even there. Is it because of my browser?

[timocov]

I tried your link of jsfiddle.net and saw the same issue even there. Is it because of my browser?

Probably. What browser you use? What extensions?

[devhimath]

Got the issue. I am using brave browser. when i got the shields down for the webpage, i could see the axis well.
Thanks for your inputs.

[timocov]

Related to brave/brave-browser#1738. We can't do anything with that - to get correct size of the price axis we need to know width of the text, but Brave's protection treats it as "fingerprinting" and always returns zero. That's it.

Possible they'll fix it in brave/brave-browser#822 (or apply suggestion from @subzey in brave/brave-browser#1738 (comment)).