fitContent(); for rightPriceScale - lightweight-charts

Question

is there any way to fitContent for right price scale in lightweight charts? I did not find any info for that in documentation.

I am trying to display two data series, but they are in different ranges (tens of thousands vs tens)

Here is my jsfiddle. I would appreciate any hint. https://jsfiddle.net/05zx4e76/5/

var chart = LightweightCharts.createChart(tvchart, {
    width: '600',
    height: '300',
    rightPriceScale: {
        visible: true,
    borderColor: 'rgba(197, 203, 206, 1)',
    lockVisibleTimeRangeOnResize: true,
    },
      localization: {
        locale: 'en-US',
    },
    leftPriceScale: {
        visible: true,
    borderColor: 'rgba(197, 203, 206, 1)',
    lockVisibleTimeRangeOnResize: true,
    },
    grid: {
    horzLines: {
        color: '#363C4E',
    },
    vertLines: {
        color: '#2B2B43',
    },
    },
    crosshair: {
        mode: LightweightCharts.CrosshairMode.Normal,
    },
    timeScale: {
        borderColor: 'rgba(197, 203, 206, 1)',
    },
    handleScroll: {
        vertTouchDrag: false,
    },
    layout: {
        backgroundColor: '#2B2B43',
        lineColor: '#2B2B43',
        textColor: '#D9D9D9',
    }
});

chart.applyOptions({
    timeScale: {
        rightOffset: 12,
        barSpacing: 3,
        fixLeftEdge: false,
        rightBarStaysOnScroll: false,
        borderVisible: false,
        borderColor: '#fff000',
        visible: true,
        timeVisible: true,
        secondsVisible: false        }
    }
);

score 1 · Answer 1 · answered Feb 03 '22 at 22:00

Solved by the following:

chart.priceScale('right').applyOptions({
    scaleMargins: {
        top: 0.96,
        bottom: 0,
    },
});

I have no idea how it works. Documentation has no proper description. https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions

score 1 · Answer 2 · answered Feb 04 '22 at 09:40

If you try to use development build instead of production one (just replace a string in the path to standalone bundle) you'll get an error: Error: Assertion failed: data must be asc ordered by time, index=1, time=1643907722, prev time=1643911322 that means that the data for your line series is not sorted as it should be.

If you sort your data initially or add .sort((a, b) => a.time - b.time) next to the array of line data it will work as expected.

https://jsfiddle.net/Lfegob51/

fitContent(); for rightPriceScale - lightweight-charts

2 Answers2