How to Add Offset (Future Date) to the TimeScale

[mrclaytorres]

Hi,

I'm creating the plugin with Primitive and wanted to ask if there is a way to add offset in the timescale (say like 5 days in the future)?

You can see in the screenshot below that it draws the Primitive if the range is before the current date of the dataset.

Here in this screenshot below, I've set the range to be from the current date to 5 days in the future, but is has not drawn the expected primitive (red rectangles).

What I wanted to achieve is the Primitive can be drawn in the timescale offset after the current date of the dataset.

Thank you in advance.

[brlocky]

Hi @mrclaytorres

Did you found a solution for that ?

Currently my solution is add 5 more bars with close 0, and the correct date.

This allow to draw and move object, but not a good solution.

[mrclaytorres]

Hi @brlocky , I haven't solved this yet unfortunately.

[brlocky]

Hi @mrclaytorres

So using WhitespaceData (https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData), the line on price 0 is not draw anymore.

However we would need to change a lot of code to support the Candle | WhitespaceData.

So my idea is to create another "layer", by adding another barSeries. In this new bar series we will generate new WhitespaceData to fill the required time. Also want to once it receives new "drawings" will dynamically expand to the required time.

So we will draw on this new barseries. It can be any series, the trick will be to use the WhitespaceData

[brlocky]

Well some one found this solution to be ok earlier

https://stackoverflow.com/questions/68251215/lightweight-charts-how-to-show-future-times-in-advance

[mrclaytorres]

Yes, I found this solution before, but it still was not drawing my primitive on the future dates.

[brlocky]

If you add a second Serie, you will need to use attachPrimitive on that second one.

I just added new whitebars on the my original serie.

so subscribe to the subscribeVisibleLogicalRangeChange and then add new whitespaceBar. This way the new dates will be shown and so you will be able to drag.

`chartInstanceRef.current.timeScale().subscribeVisibleLogicalRangeChange(onVisibleLogicalRangeChanged);
...

const onVisibleLogicalRangeChanged = (newVisibleLogicalRange: LogicalRange | null) => {
if (!chartBarSeriesRef.current) return;

const barsInfo = chartBarSeriesRef.current.barsInLogicalRange(newVisibleLogicalRange as Range);
if (!barsInfo) return;

// Calculate timeInterval to sum and calculate correct dates
const timeInterval = convertIntervalToSeconds(interval);
const { barsAfter, to } = barsInfo; // Current chart visibility

if (barsAfter < 0) {
const newMaxTime = (to as number) + Math.round(-1 * barsAfter) * timeInterval;
if (newMaxTime > maxVisibleRange) {
// Load more white space bars
setMaxVisibleRange(newMaxTime);
}
}
};

...

useEffect(() => {
const timeInterval = convertIntervalToSeconds(interval);
const currenData: BarData[] = JSON.parse(JSON.stringify(candles));
if (!currenData.length) return;

const newData = [];
const lastCandleTime = currenData[currenData.length - 1].time as number;
// Add whitespace bars after the current data
for (let t = lastCandleTime + timeInterval; t <= maxVisibleRange; t += timeInterval) {
const whitespaceBar = { time: t as Time };
newData.push(whitespaceBar);
}

// We just want to fit content on the 1st time candles are loaded
// newData should only be filled after onVisibleLogicalRangeChanged
if (!newData.length) {
chartInstanceRef.current?.timeScale().fitContent();
}

chartBarSeriesRef.current?.setData([...currenData, ...newData]);
}, [maxVisibleRange, interval, candles]);`

[mrclaytorres]

Sweet. I will try this. Thank you.