I'm using Lightweight charts js - https://github.com/tradingview/lightweight-charts

I am loading coins on my website and trying to switch between coins but running into issue when altering the price scale of the current chart. Wihtout touching the price scale it works fine.

This is my code:

DATA.chartContainer = document.getElementById('Chart__Container');

DATA.chart = LightweightCharts.createChart(DATA.chartContainer, {
    layout: {
        background: { type: LightweightCharts.ColorType.Solid, color: '#191919' },
        textColor: '#999',
        fontSize: 14
    },
    grid: {
        vertLines: {
            color: '#262626',
            style: LightweightCharts.LineStyle.Solid,
        },
        horzLines: {
            color: '#262626',
            style: LightweightCharts.LineStyle.Solid,
        },
    },
    crosshair: {
        mode: LightweightCharts.CrosshairMode.Normal,
        vertLine: {
            style: LightweightCharts.LineStyle.Solid,
            labelBackgroundColor: '#404040',
            color: '#666',
        },
        horzLine: {
            style: LightweightCharts.LineStyle.Solid,
            labelBackgroundColor: '#404040',
            color: '#666',
        }
    },
    priceScale: {
        borderColor: '#404040',
    },
    timeScale: {
        tickMarkFormatter: (timestamp) => new Date(timestamp * 1000).toLocaleTimeString(),
        borderColor: '#404040',
        secondsVisible: true,
        timeVisible: true,
        rightOffset: 6,
        barSpacing: 8,
    },
    localization: {
        timeFormatter: (timestamp) => new Date(timestamp * 1000).toLocaleTimeString(),
    },
});

DATA.candlestickSeries = DATA.chart.addCandlestickSeries({
    upColor: '#1e7e35',
    wickUpColor: '#1e7e35',
    borderUpColor: '#1e7e35',
    downColor: '#9a0000',
    wickDownColor: '#9a0000',
    borderDownColor: '#9a0000',
});

DATA.candlestickSeries.setData(CHART_DATA);

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

DATA.chart_scroll_timer = null;
DATA.chart_time_scale = DATA.chart.timeScale();

new ResizeObserver(entries => {
    DATA.chart.applyOptions({
        width: entries[0].contentRect.width,
        height: entries[0].contentRect.height,
    });
}).observe(DATA.chartContainer);

I'm populating the data with the following command and trying to rescale the chart to fit the box width:

DATA.candlestickSeries.setData(DATA.candleBuffer);
DATA.chart_time_scale.fitContent();

Here I switch between coins without touching the price scale, and it works just fine:

Working

And here what happens when I touch the price scale:

Not working

Sample of my data (couple of first and last elements):

[
    {
        "time": 1665092580,
        "open": "0.22158556538370248085",
        "high": "0.22158556538370248085",
        "low": "0.21865290315008127554",
        "close": "0.21906278632164246134"
    },
    {
        "time": 1665092640,
        "open": "0.21906278632164246134",
        "high": "0.21912996064100641188",
        "low": "0.21906278632164246134",
        "close": "0.22069968683419220913"
    },
    {
        "time": 1665092700,
        "open": "0.22069968683419220913",
        "high": "0.22069968683419220913",
        "low": "0.22069968683419220913",
        "close": "0.22145882698692318981"
    },
    ...
    ...
    ...
    {
        "time": 1665332520,
        "open": "0.22211981579207104506",
        "high": "0.22211981579207104506",
        "low": "0.22211981579207104506",
        "close": "0.22215130498899483039"
    },
    {
        "time": 1665332580,
        "open": "0.22215130498899483039",
        "high": "0.22215130498899483039",
        "low": "0.22215130498899483039",
        "close": "0.22214902158647526481"
    },
    {
        "time": 1665334560,
        "open": "0.22214902158647526481",
        "high": "0.22214902158647526481",
        "low": "0.22214902158647526481",
        "close": "0.22214902158647526481"
    }
]

CodePudding user response：

When the user has adjusted the price scale (shifting or adjusting it's zoom by interacting with it) then the autoScale option on the priceScale is set to false.

For the priceScale to automatically adjust when the new data is set you will need to set this option back to true. You can do this by calling the applyOptions method on the IPriceScaleApi instance.

Quick example:

// `candlestickSeries` is an ISeriesApi instance (created by `addCandlestickSeries()`)
const newData = [/* ... */];

// set autoScale to true (may have been set
// to false if the user interacted with the price scale)
chart.priceScale('right').applyOptions({
  autoScale: true,
});

candlestickSeries.setData(newData);