Can't show all data on Lightweight Chart when chart is small, is it expected?

Question

Not sure if it's a limitation or not but I can't make chart display all data (I have 1500 records). fitContent() or setVisibleRange() doesn't help.

Demo

var chart = LightweightCharts.createChart(document.body, {
    width: 600,
    height: 300,
    rightPriceScale: {
        scaleMargins: {
            top: 0.1,
            bottom: 0.1,
        },
    },
});

var areaSeries = chart.addAreaSeries({
    topColor: 'rgba(76, 175, 80, 0.56)',
    bottomColor: 'rgba(76, 175, 80, 0.04)',
    lineColor: 'rgba(76, 175, 80, 1)',
    lineWidth: 2,
    title: 'AAPL',
});

areaSeries.setData([{
    "time": 1629353327,
    "value": 19.97
}, {
    "time": 1629439727,
    "value": 19.67
},
....
}]);
chart.timeScale().fitContent();

Is this expected? It'll work if chart width is set to 800px.

Answer 1

By default the min bar spacing value (the min space between bars) is 0.5, which allows you to show 2 values per 1 pixel. But if you want to show more data in a small viewport, you need to change this value to a smaller value, e.g. 0.001.

You can do that by modifying minBarSpacing option of timeScale - just add timeScale: { minBarSpacing: 0.001 } to your chart's options and it will work. Demo