search

tradingview / lightweight-charts

Performant financial charts built with HTML5 canvas
https://www.tradingview.com/lightweight-charts/
Apache License 2.0
9.44k stars 1.62k forks source link

Graph not painting charts on descendant time order #1383

Closed richardags closed 1 year ago

richardags commented 1 year ago

Lightweight Charts™ Version:

Steps/code to reproduce:

javascript.js

function generateCandlestickData(){
    return [
        {
            "time": 1687611840,
            "open": 1.103665,
            "close": 1.103415,
            "low": 1.103415,
            "high": 1.103715,
            "M_": 1687611840
        },
        {
            "time": 1687611780,
            "open": 1.103585,
            "close": 1.103675,
            "low": 1.103565,
            "high": 1.103795,
            "M_": 1687611780
        },
        {
            "time": 1687611720,
            "open": 1.103545,
            "close": 1.103595,
            "low": 1.103505,
            "high": 1.103695,
            "M_": 1687611720
        },
        {
            "time": 1687611660,
            "open": 1.103415,
            "close": 1.103535,
            "low": 1.103345,
            "high": 1.103535,
            "M_": 1687611660
        },
        {
            "time": 1687611600,
            "open": 1.103475,
            "close": 1.103405,
            "low": 1.103375,
            "high": 1.103475,
            "M_": 1687611600
        }
    ];
}

const chartProperties = {
    timeScale: {
        timeVisible: true
    }
}

const domElement = document.getElementById('container');

const chart = LightweightCharts.createChart(domElement, chartProperties);
const candleSeries = chart.addCandlestickSeries();

candleSeries.setData(generateCandlestickData());

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Trading Viewer</title>
    <script type="text/javascript" src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <h2 style="text-align: center">IQOption EUR/USD Chart</h2>
    <div id="container" style="position: absolute; width: 100%; height: 100%"></div>
</body>
    <script type="text/javascript" src="javascript.js"></script>
</html>

Actual behavior: The graph is no painting.

Expected behavior: A normal graph painted.

CodeSandbox/JSFiddle/etc link: https://jsfiddle.net/nja80yd1/ https://jsfiddle.net/nja80yd1/ https://jsfiddle.net/nja80yd1/

Console error:

Uncaught Error: Value is null
    at h (lightweight-charts.standalone.production.js:7:490)
    at gi.Candlestick [as Eh] (lightweight-charts.standalone.production.js:7:43346)
    at gi.Es (lightweight-charts.standalone.production.js:7:44512)
    at zt.qs (lightweight-charts.standalone.production.js:7:29234)
    at lightweight-charts.standalone.production.js:7:24623
    at Array.map (<anonymous>)
    at zt.zs (lightweight-charts.standalone.production.js:7:24610)
    at zt.Ds (lightweight-charts.standalone.production.js:7:22174)
    at zt.Mt (lightweight-charts.standalone.production.js:7:22009)
    at Kn.tv (lightweight-charts.standalone.production.js:7:114214)
2lightweight-charts.standalone.production.js:7 Uncaught Error: Value is null
    at h (lightweight-charts.standalone.production.js:7:490)
    at gi.Candlestick [as Eh] (lightweight-charts.standalone.production.js:7:43346)
    at gi.Es (lightweight-charts.standalone.production.js:7:44512)
    at zt.qs (lightweight-charts.standalone.production.js:7:29234)
    at lightweight-charts.standalone.production.js:7:24623
    at Array.map (<anonymous>)
    at zt.zs (lightweight-charts.standalone.production.js:7:24610)
    at zt.Ds (lightweight-charts.standalone.production.js:7:22174)
    at zt.Mt (lightweight-charts.standalone.production.js:7:22009)
    at Kn.Hp (lightweight-charts.standalone.production.js:7:114279)
lightweight-charts.standalone.production.js:7 Uncaught Error: Value is null
    at h (lightweight-charts.standalone.production.js:7:490)
    at gi.Candlestick [as Eh] (lightweight-charts.standalone.production.js:7:43346)
    at gi.Es (lightweight-charts.standalone.production.js:7:44512)
    at zt.qs (lightweight-charts.standalone.production.js:7:29234)
    at lightweight-charts.standalone.production.js:7:24623
    at Array.map (<anonymous>)
    at zt.zs (lightweight-charts.standalone.production.js:7:24610)
    at zt.Ds (lightweight-charts.standalone.production.js:7:22174)
    at zt.Mt (lightweight-charts.standalone.production.js:7:22009)
    at Kn.tv (lightweight-charts.standalone.production.js:7:114214)
31lightweight-charts.standalone.production.js:7 Uncaught Error: Value is null
    at h (lightweight-charts.standalone.production.js:7:490)
    at gi.Candlestick [as Eh] (lightweight-charts.standalone.production.js:7:43346)
    at gi.Es (lightweight-charts.standalone.production.js:7:44512)
    at zt.qs (lightweight-charts.standalone.production.js:7:29234)
    at lightweight-charts.standalone.production.js:7:24623
    at Array.map (<anonymous>)
    at zt.zs (lightweight-charts.standalone.production.js:7:24610)
    at zt.Ds (lightweight-charts.standalone.production.js:7:22174)
    at zt.Mt (lightweight-charts.standalone.production.js:7:22009)
    at Kn.Hp (lightweight-charts.standalone.production.js:7:114279)
lightweight-charts.standalone.production.js:7 Uncaught Error: Value is null
    at h (lightweight-charts.standalone.production.js:7:490)
    at gi.Candlestick [as Eh] (lightweight-charts.standalone.production.js:7:43346)
    at gi.Es (lightweight-charts.standalone.production.js:7:44512)
    at zt.qs (lightweight-charts.standalone.production.js:7:29234)
    at lightweight-charts.standalone.production.js:7:24623
    at Array.map (<anonymous>)
    at zt.zs (lightweight-charts.standalone.production.js:7:24610)
    at zt.Ds (lightweight-charts.standalone.production.js:7:22174)
    at zt.Mt (lightweight-charts.standalone.production.js:7:22009)
    at Kn.tv (lightweight-charts.standalone.production.js:7:114214)
78lightweight-charts.standalone.production.js:7 Uncaught Error: Value is null
    at h (lightweight-charts.standalone.production.js:7:490)
    at gi.Candlestick [as Eh] (lightweight-charts.standalone.production.js:7:43346)
    at gi.Es (lightweight-charts.standalone.production.js:7:44512)
    at zt.qs (lightweight-charts.standalone.production.js:7:29234)
    at lightweight-charts.standalone.production.js:7:24623
    at Array.map (<anonymous>)
    at zt.zs (lightweight-charts.standalone.production.js:7:24610)
    at zt.Ds (lightweight-charts.standalone.production.js:7:22174)
    at zt.Mt (lightweight-charts.standalone.production.js:7:22009)
    at Kn.Hp (lightweight-charts.standalone.production.js:7:114279)
lightweight-charts.standalone.production.js:7 Uncaught Error: Value is null
    at h (lightweight-charts.standalone.production.js:7:490)
    at gi.Candlestick [as Eh] (lightweight-charts.standalone.production.js:7:43346)
    at gi.Es (lightweight-charts.standalone.production.js:7:44512)
    at zt.qs (lightweight-charts.standalone.production.js:7:29234)
    at lightweight-charts.standalone.production.js:7:24623
    at Array.map (<anonymous>)
    at zt.zs (lightweight-charts.standalone.production.js:7:24610)
    at zt.Ds (lightweight-charts.standalone.production.js:7:22174)
    at zt.Mt (lightweight-charts.standalone.production.js:7:22009)
    at Kn.tv (lightweight-charts.standalone.production.js:7:114214)
2lightweight-charts.standalone.production.js:7 Uncaught Error: Value is null
    at h (lightweight-charts.standalone.production.js:7:490)
    at gi.Candlestick [as Eh] (lightweight-charts.standalone.production.js:7:43346)
    at gi.Es (lightweight-charts.standalone.production.js:7:44512)
    at zt.qs (lightweight-charts.standalone.production.js:7:29234)
    at lightweight-charts.standalone.production.js:7:24623
    at Array.map (<anonymous>)
    at zt.zs (lightweight-charts.standalone.production.js:7:24610)
    at zt.Ds (lightweight-charts.standalone.production.js:7:22174)
    at zt.Mt (lightweight-charts.standalone.production.js:7:22009)
    at Kn.Hp (lightweight-charts.standalone.production.js:7:114279)
lightweight-charts.standalone.production.js:7 Uncaught Error: Value is null
    at h (lightweight-charts.standalone.production.js:7:490)
    at gi.Candlestick [as Eh] (lightweight-charts.standalone.production.js:7:43346)
    at gi.Es (lightweight-charts.standalone.production.js:7:44512)
    at zt.qs (lightweight-charts.standalone.production.js:7:29234)
    at lightweight-charts.standalone.production.js:7:24623
    at Array.map (<anonymous>)
    at zt.zs (lightweight-charts.standalone.production.js:7:24610)
    at zt.Ds (lightweight-charts.standalone.production.js:7:22174)
    at zt.Mt (lightweight-charts.standalone.production.js:7:22009)
    at Kn.tv (lightweight-charts.standalone.production.js:7:114214)
2lightweight-charts.standalone.production.js:7 Uncaught Error: Value is null
    at h (lightweight-charts.standalone.production.js:7:490)
    at gi.Candlestick [as Eh] (lightweight-charts.standalone.production.js:7:43346)
    at gi.Es (lightweight-charts.standalone.production.js:7:44512)
    at zt.qs (lightweight-charts.standalone.production.js:7:29234)
    at lightweight-charts.standalone.production.js:7:24623
    at Array.map (<anonymous>)
    at zt.zs (lightweight-charts.standalone.production.js:7:24610)
    at zt.Ds (lightweight-charts.standalone.production.js:7:22174)
    at zt.Mt (lightweight-charts.standalone.production.js:7:22009)
    at Kn.Hp (lightweight-charts.standalone.production.js:7:114279)
lightweight-charts.standalone.production.js:7 Uncaught Error: Value is null
    at h (lightweight-charts.standalone.production.js:7:490)
    at gi.Candlestick [as Eh] (lightweight-charts.standalone.production.js:7:43346)
    at gi.Es (lightweight-charts.standalone.production.js:7:44512)
    at zt.qs (lightweight-charts.standalone.production.js:7:29234)
    at lightweight-charts.standalone.production.js:7:24623
    at Array.map (<anonymous>)
    at zt.zs (lightweight-charts.standalone.production.js:7:24610)
    at zt.Ds (lightweight-charts.standalone.production.js:7:22174)
    at zt.Mt (lightweight-charts.standalone.production.js:7:22009)
    at Kn.tv (lightweight-charts.standalone.production.js:7:114214)
6lightweight-charts.standalone.production.js:7 Uncaught Error: Value is null
    at h (lightweight-charts.standalone.production.js:7:490)
    at gi.Candlestick [as Eh] (lightweight-charts.standalone.production.js:7:43346)
    at gi.Es (lightweight-charts.standalone.production.js:7:44512)
    at zt.qs (lightweight-charts.standalone.production.js:7:29234)
    at lightweight-charts.standalone.production.js:7:24623
    at Array.map (<anonymous>)
    at zt.zs (lightweight-charts.standalone.production.js:7:24610)
    at zt.Ds (lightweight-charts.standalone.production.js:7:22174)
    at zt.Mt (lightweight-charts.standalone.production.js:7:22009)
    at Kn.Hp (lightweight-charts.standalone.production.js:7:114279)
SlicedSilver commented 1 year ago

The data should be provided in ascending date order. So the time should be increasing from small to large. So you should reverse the order of data array.

Based on the example price values, you will probably also want to change the default price format to display more decimal points

const candleSeries = chart.addCandlestickSeries({ priceFormat: { type: 'price', precision: 4, minMove: 0.0001 } });
richardags commented 1 year ago

@SlicedSilver thank you, I didn't know that time should be in ascendant order, it's not related on API documentation and I thought that it's arranged by default on graph.

And, thank you again for tell me about the priceFormat I really wanted to know that, I appreciate you answer.

SlicedSilver commented 1 year ago

FYI: you will get more useful warning messages in the developer console if you use the 'development' build instead of the 'production' build. It has additional checks and more helpful error messages.