TradingView Lightweight Chart price seems to not scale correctly

I just added the real time data of bitcoin to my chart. There has been a peak that is so high even tradingview can't handle it... At least, on my chart. This is how it looks like: As you can see at the second of june bitcoin went up so high that it goes out of the screen. This should be fixable since on the actual tradingview page itself it all look good and normal: Also if I zoom out on my chart it look perfectly normal: So what I want is that my chart scales the same way as it does on tradingview.com.

This is my code:

// Predifined variables
var chart, priceArea, fetchedData;

// Faster to write log();
const log = console.log;

// Get data.
fetch('./getData.php', {
    method: 'GET'
}).then(response => response.json()).then(function (data) {
    // Set data to a global variable for global usage.
    fetchedData = data;

    // To make sure the chart is initialized and set after this fetch is done. Else I would get a error for setting data that I do not yet have.
    initChartSettings();
});


/**
 * Initializes the chart and its settings.
 */
function initChartSettings() {
    // Create chart canvas
    chart = LightweightCharts.createChart(document.getElementById('Chart'), {width: 1500, height: 700,});

    // Could also be done in the width and height code line but thought it might work for scaling.
    chart.applyOptions({
        timeScale: {
            // Adds hours and minutes to the chart.
            timeVisible: true,
            secondsVisible: false
        }
    });

    // Init price line
    priceArea = chart.addAreaSeries();

    // This array is needed to make the setData work. It expects an array with objects.
    let arrayWithOldData = [];

    // Get each item in the fetchedData array. Since it gives more data then I need I use this for loop to take the time and value. Used to create chart lines.
    for (let i = 0; i < fetchedData.length; i++) {
        let dataElement = fetchedData[i];

        // Object needed for the arrayWithOldData.
        let oldData = {
            // Timestamp / 1000 to make it a workable timestamp for tradingview chart and + 7200 seconds to make sure I get a timestamp of amsterdam (+2:00).
            time: (dataElement[0] / 1000) + 7200,
            value: dataElement[4]
        };

        // Add the data to the array.
        arrayWithOldData.push(oldData);
    }

    log(arrayWithOldData);

    // Set data
    priceArea.setData(arrayWithOldData);

    // PriceLine options
    priceArea.applyOptions({
        topColor: 'rgba(70, 130, 180, 0.5)',
        bottomColor: 'rgba(70, 130, 180, 0.1)',
        lineColor: '#4682B4',
        lineWidth: 2
    });

    startTime = new Date();
    updateLiveChartData();
}

What I have tried:

I have tried the following in my code: https://github.com/tradingview/lightweight-charts/blob/master/docs/customization.md -> price axis -> priceScale() -> autoScale: true and scaleMargins with diffrent top and bottoms. Seems scaleMargins works, but then when I go back in time and make sure I dont see the peak anymore everything is as good as flat :( I also tried to put at the end of the code: chart.timeScale().fitContent(); But this gives the same result as how I have it now but then zoomed out. If I zoom in with timeScale it still looking the same.

Recommended topics

Hot tags