Change timeframe

[MrBjurhager]

Describe the bug

Iv'e made a selectbox that sends a new timeframe to my server, fetch new data for that timeframe and send back new candles to my chart. When new data is received it updates the chart but its really buggy to draw the new candles as they overlap or gets thin "yRange" not re-calculating correctly.

Iv'e tried alot of different things and made sure i get new data before update but the problem is still there. My recent code is to really make sure i get the new data before making the update.

export let bar = "15m";
    let prevBar = bar;
    $: {
        if (bar !== prevBar) {
            console.log("bar changed to", bar);
            update();
            prevBar = bar;
        }
    }
const update = () => {
        setTimeout(() => {
            chart.update("full", { resetRange: true });
        }, 200)
    }

Ive also tried with setTimeout and wait 2 seconds before the update and still have the same problem. it work 50/50.

example of error when changed from 15m to 1m chart Also tried with update("data"), update(), update("legend") etc etc.

Any suggestions on how i should handle timeframe change in the data?.

Best / F

Reproduction

Steps to reproduce

Live data from server

afterUpdate(async () => {
        await tick();
        if (chart?.data?.panes?.length > 0) {
            chart.data.panes[0].overlays[0].data = candlesticks;
            chart.data.panes[0].overlays[1].data = indicators.sma;
            chart.data.panes[0].overlays[2].data = orderbook;
            chart.data.panes[0].overlays[3].data = positions;
            // chart.data.panes[0].overlays[4].data = candlesticks;
            chart.data.panes[0].overlays[4].data = orders_history.reverse();
            chart.data.panes[1].overlays[0].data = indicators.rsi;
        }
        chart.update("data");
    });

Javascript Framework

no-framework (vanilla-js)

Logs

No response

Validations

• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a NightVision issue and not a framework-specific issue.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[MrBjurhager]

Found an issue, my candlestick data has ohlc = [...candlesticks, ...candlesticks_history] The history candles did not update as fast as the candlesticks chunk and the data had two different timeframes for a few ms. Removed my history candles and it works alot better. Will load the history as in the chart example: https://codesandbox.io/s/playing-around-10-0zh0jh?from-embed

Im still interested in a better solution to change timeframe :)

[mariusvigariu]

I would just create a separate component that accepts the timeframe as a prop, then when changing the timeframe just reinit the component