lightweight-charts icon indicating copy to clipboard operation
lightweight-charts copied to clipboard

setVisibleLogicalRange issues

Open kirchet opened this issue 2 years ago • 1 comments

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

set_visible_range_issue

kirchet avatar Jul 04 '22 16:07 kirchet

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

kirchet avatar Jul 04 '22 16:07 kirchet