Can Lightweight Charts handle large datasets - like 1.2 millions bar candle timeseries?

Question

I am planning to migrate my candle bar timeseries visualization from Plotly to Lightweight Charts.

My dataset resides in a database and it includes 1. 2 millions of bar candle timeseries.

score 1 · Answer 1 · answered Aug 02 '22 at 12:18

There aren't any hard coded limits to size of the dataset you can pass into Lightweight Charts, however there is a limit to how many datapoints can be visible on the chart at any given time. This is dependent on the size of the chart (width) as each candle would need to be at least a single pixel wide.

Here is an example of a candlestick chart with infinite history: https://jsfiddle.net/TradingView/fg7yez2s/

Simple example which creates a candlestick chart with 1.2 million data points (just to prove that it works):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"
        />
        <title>Large Dataset</title>

        <script
            type="text/javascript"
            src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"
        ></script>
    </head>

    <body style="padding: 0; margin: 0">
        <div
            id="container"
            style="position: absolute; width: 100%; height: 100%"
        ></div>

        <script type="text/javascript">
            function generateData() {
                var res = [];
                var time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
                for (var i = 0; i < 1200000; ++i) {
                    const sign = Math.random() < 0.5 ? -1 : 1;
                    const rand = Math.random();
                    res.push({
                        time: time.getTime() / 1000,
                        open: i,
                        close: i + sign * rand * 100,
                        high: i + rand * 200,
                        low: i - rand * 200,
                    });
                    time.setUTCDate(time.getUTCDate() + 1);
                }

                return res;
            }

            var chart = LightweightCharts.createChart(
                document.getElementById("container")
            );

            var mainSeries = chart.addCandlestickSeries({
                upColor: "#26a69a",
                downColor: "#ef5350",
                borderVisible: false,
                wickUpColor: "#26a69a",
                wickDownColor: "#ef5350",
            });

            mainSeries.setData(generateData());
        </script>
    </body>
</html>

Can Lightweight Charts handle large datasets - like 1.2 millions bar candle timeseries?

1 Answers1