Class: ExtendedHours

STX. ExtendedHours

new ExtendedHours(stx, sessions)

Use this constructor to initialize visualization styles of extended hours by the use of shading and delimitation lines. This visualization will only work if the extended and marketSessions parameters in the STXChart#layout object are set, data for the corresponding sessions is provided from your quote feed and the market definitions have the corresponding entries. See STX.Market for details on how to define extended (non-default) hours.

All possible market sessions needed to be shaded at any given time should be enabled at once with this method.

It is important to note that this method simply highlights the data within a particular market session as set by the CSS colors, but does not exclude any timeframes. If the data is on the chart, the session will be highlighted if initialized. If you wish to exclude a particular session from the chart, this must be done at the quote feed level, and excluded form the masterData. As such, your data loading logic may also need to scan trough the stx.layout.marketSessions array in addition to the extended flag to determine which exact session the chart needs to display. See examples section for more details.

  • The styles for the shading of each session is determined by the corresponding CSS class in the form of "stx_market_session."+session_name (Example: stx_market_session.pre)
  • The divider line is determined by the CSS class "stx_market_session.divider".


Name Type Description
stx STXChart

The chart object

sessions array

Names of the sessions to visualize. The names must match the session names declared in STX.Market.

  • 06-2016-02
// initialize the session names, wich must have a corresponding CSS entry.
			// call this only once to initialize the market sessions display manager
			new STX.ExtendedHours(stxx, ["post","pre"]);
			// Call something like this from your menu to enable or disable the sessions
			 //enable extended ours mode or set to false to disable.
			 // enable the particular sessions you want to display or set to {} to display none
			 //set the market to reflect your market preferences. This is only need if you are not using setMarketFactory and instead just using setMarket
			// call new chart to now show the session you enabled.
			 stxx.newChart(stxx.chart.symbol, null, null, finishedLoadingNewChart(stxx.chart.symbol, stxx.chart.symbol));
// CSS entries for a session divider and sessions named "pre" and "post"
		.stx_market_session.divider {
			background-color: rgba(0,255,0,0.8);
			width: 1px;
		.stx_market_session.pre {
			background-color: rgba(255,255,0,0.1);
		} {
			background-color: rgba(0,0,255,0.2);
// sample code for turning on and off sessions on the chart when using setMarketFactory 
		// initialize the sessions you want to shade and make sure you have the corresponding CSS defined.
		new STX.ExtendedHours(stxx, ["post","pre"]);
		// call this function form your UI to enable or disable the sessions on the chart 
		// ( requires your feed to only send data for the enabled sessions )
		function toggleExtHours(session){
			// toggle the session on the layout.marketSessions array so you know what the user wants to see and what to load.
			// assume you are using check boxes on your UI to enable and disable the sessions. Set them here.
			var checkbox=$$$(".stxExtHours-"+session);
				STX.appendClassName(checkbox, "true");
				STX.unappendClassName(checkbox, "true");
			// if you have after hours sessions enabled, then set the extended flag on so your feed knows to get this data.
			stxx.layout.extended=stxx.layout.marketSessions.pre ||;
			if(!stxx.displayInitialized) return;
			// now create a new chart with just the data the user wants to see (your feed should follow the extended and marketSessions settings)
			// the data will be highlighted as initialized.
			stxx.newChart(stxx.chart.symbol, null, null, finishedLoadingNewChart(stxx.chart.symbol, stxx.chart.symbol));