Show whole trade session for 1Day chart

[HarshaKosala]

Hi,

Is there a way to show the whole trade session in the chart area and fill the candles from the left to right when trade happens. Currently new candles are drawing from the right side. Instead is there a way to let grow the chart from left to right by showing the whole trade session to the user in the chart viewport.

Thanks

[SlicedSilver]

Sounds like you want to control the scroll position and zoom for the time scale.

For an introduction to the time scale we have this documentation page: https://tradingview.github.io/lightweight-charts/docs/time-scale

and here is the API for the time scale: https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi

You would most likely need to use the setVisibleLogicalRange method or the setVisibleRange method.

Hope that this helps.

[SlicedSilver]

Have a look at the JSFiddle example I posted earlier. The order of the method calls is important. Perhaps you were evoking getVisibleLogicalRange or setVisibleLogicalRange before using setData.

[HarshaKosala]

Hi @SlicedSilver
Below are the code lines

this.series.setData(data);
const timeScale = this.chartObj.timeScale();
timeScale.applyOptions({
	shiftVisibleRangeOnNewBar: false,
});
const visibleLogicalRange = timeScale.getVisibleLogicalRange();
if (visibleLogicalRange) {
	visibleLogicalRange.to += 50;
	timeScale.setVisibleLogicalRange(visibleLogicalRange);
}
this.chartObj.timeScale().fitContent();
this.subscribeForRealTimeChartData(exgSym, symbolKey); // update the chart real time using a datafeed. 
       this.series.update(realTimeDataObj.point);

[SlicedSilver]

I would remove the this.chartObj.timeScale().fitContent(); line.

fitContent will adjust the visible range to fit all the data currently in the series. It doesn't make sense to call this after you've manually edited the range by using setVisibleLogicalRange because those changes will be lost.

You probably want to have actually have the fitContent call to happen earlier (before timeScale.getVisibleLogicalRange ).

Changing your code (not tested):

this.series.setData(data);
const timeScale = this.chartObj.timeScale();
timeScale.applyOptions({
	shiftVisibleRangeOnNewBar: false,
});

this.chartObj.timeScale().fitContent(); // Move here

const visibleLogicalRange = timeScale.getVisibleLogicalRange();
if (visibleLogicalRange) {
	visibleLogicalRange.to += 50;
	timeScale.setVisibleLogicalRange(visibleLogicalRange);
}

this.subscribeForRealTimeChartData(exgSym, symbolKey); // update the chart real time using a datafeed. 
       this.series.update(realTimeDataObj.point);

[HarshaKosala]

Hi @SlicedSilver

Followed exact same code but still no result

[SlicedSilver]

If you could create a JSFiddle (or equivalent) of your issue then I could take a look and try assist you further.

Otherwise, I would again suggest looking at the JSFiddle example linked above (https://jsfiddle.net/msilverwood/qu3n4cgs/3/), and make sure that you are on the latest release of the library (3.8.0)

[Wash01]

thanks for asking 

…

Hi, Is there a way to show the whole trade session in the chart area and fill the candles from the left to right when trade happens. Currently new candles are drawing from the right side. Instead is there a way to let grow the chart from left to right by showing the whole trade session to the user in the chart viewport. Thanks