Skip to main content

Extended Hours

Extended hours is a part of ChartReactConfig and also a dxcharts-react setting, which allows to configure which sessions data should be displayed on chart.

Important note: both chartDataProvider and TradingSessionsProvider should be implemented to support this feature completely. chartDataProvider is mandatory since dxcharts-react expects to receive additional candles to display them. TradingSessionsProvider is optional to highlight the pre and post market sessions candles which chartDataProvider generated before

When extendedHours property is enabled two things happen:

  • chartDataProvider method requestHistoryData will be called with extendedHours option true value:
chartDataProvider.requestHistoryData('AAPL', '1h', { extendedHours: true }).

In return dxcharts-react will expect candles from all trading sessions: 'REGULAR', PRE_MARKET', 'POST_MARKET' and NO_TRADING and redraw chart after the data is received with all trading sessions data.

  • TradingSessionsProvider allows to differentiate which candles data belongs to which trading session, it's method generateSessions takes from and to timestamps and also instrument's name and it's trading hours. After that it generates corresponding to this time sessions, which are used to highlight pre and post market sessions candles:
tradingSessionsProvider.generateSessions(1718913600000, 1727870571446,
{ symbol: 'AAPL', tradingHours: 'NewYorkETH()' }),

As the result additional trading sessions candles are displayed and highlighed on the chart:

Session Breaks

TradingSessionsProvider should be implemented to support this feature

When sessionBreaks is enabled vertical lines appear on chart that indicate the start and the end of different trading sessions. To know where to draw a line, dxcharts-react receives trading sessions schedule via tradingSessionsProvider.generateSessions the same way extended hours do:

Further reading