lightweight-charts
lightweight-charts copied to clipboard
setVisibleLogicalRange issues
Lightweight Charts Version: 3.8.0
Steps/code to reproduce:
First issue:
const chart = LightweightCharts.createChart(document.getElementById('container'));
const areaSeries = chart.addAreaSeries();
areaSeries.setData([
{ time: '2019-01-01', value: 179.66 },
{ time: '2019-01-02', value: 179.66 },
{ time: '2019-01-03', value: 179.66 },
{ time: '2019-01-04', value: 179.66 },
{ time: '2019-01-05', value: 179.66 },
{ time: '2019-01-06', value: 179.66 },
{ time: '2019-01-07', value: 179.66 },
]);
chart.timeScale().setVisibleLogicalRange({ from: 0, to: 6 });
areaSeries.setData([
{ time: '2018-01-01', value: 179.66 }, // new item
{ time: '2018-01-02', value: 179.66 }, // new item
{ time: '2018-01-03', value: 179.66 }, // new item
{ time: '2018-01-04', value: 179.66 }, // new item
{ time: '2018-01-05', value: 179.66 }, // new item
{ time: '2019-01-01', value: 179.66 },
{ time: '2019-01-02', value: 179.66 },
{ time: '2019-01-03', value: 179.66 },
{ time: '2019-01-04', value: 179.66 },
{ time: '2019-01-05', value: 179.66 },
{ time: '2019-01-06', value: 179.66 },
{ time: '2019-01-07', value: 179.66 },
]);
Second issue:
Refresh a page in inactive tab
const chart = LightweightCharts.createChart(document.getElementById('container'));
const areaSeries = chart.addAreaSeries();
areaSeries.setData([
{ time: '2019-01-01', value: 179.66 },
{ time: '2019-01-02', value: 179.66 },
{ time: '2019-01-03', value: 179.66 },
{ time: '2019-01-04', value: 179.66 },
{ time: '2019-01-05', value: 179.66 },
{ time: '2019-01-06', value: 179.66 },
{ time: '2019-01-07', value: 179.66 },
]);
chart.timeScale().setVisibleLogicalRange({ from: 0, to: 6 });
setTimeout(() => {
areaSeries.setData([
{ time: '2018-01-01', value: 179.66 }, // new item
{ time: '2018-01-02', value: 179.66 }, // new item
{ time: '2018-01-03', value: 179.66 }, // new item
{ time: '2018-01-04', value: 179.66 }, // new item
{ time: '2018-01-05', value: 179.66 }, // new item
{ time: '2019-01-01', value: 179.66 },
{ time: '2019-01-02', value: 179.66 },
{ time: '2019-01-03', value: 179.66 },
{ time: '2019-01-04', value: 179.66 },
{ time: '2019-01-05', value: 179.66 },
{ time: '2019-01-06', value: 179.66 },
{ time: '2019-01-07', value: 179.66 },
]);
}, 500);
Actual behavior:
The result visible range is incorrect
We apply a logical range provided to setVisibleLogicalRange
in a RAF callback, but at the same time we can modify series data via setData
, update
before the next RAF callback and in this case our deferred visible range is becoming incorrect