Helloworld with pre and post sessions shading

Sample code for display pre and post market sessions shading

by sonylnagale

HTML

<link rel="stylesheet" href="https://jsfiddle.chartiq.com/chart/css/stx-chart.css">
<div class="chartContainer" style="width:600px;height:400px;position:relative;"></div>

<!--[if IE 8]><script>alert("This template is not compatible with IE8");</script><![endif]-->

CSS

.stx_market_session.divider {
  /*background-color: rgba(0, 0, 0, 0);*/ /* set to transparent to remove divider */
  background-color: red;
}

.stx_market_session.trading {
  background-col9or: rgba(255,0,0,1);
}

.stx_market_session.pre {
  background-color: rgba(255, 0, 0, 0.1);
}

.stx_market_session.post {
  background-color: rgba(0, 255, 255, 0.2);
}

JavaScript

import { CIQ } from "https://jsfiddle.chartiq.com/chart/js/advanced.js";
import "https://jsfiddle.chartiq.com/chart/js/addOns.js";

// Activate the License Key
import getLicenseKey from "https://jsfiddle.chartiq.com/chart/key.js";
getLicenseKey(CIQ);

// sample 5 minute data with pre and post NYSE sessions
const sample5minPrePost = [{
  "Date": "2015-04-17 08:30",
  "Open": 151.76,
  "High": 151.83,
  "Low": 151.65,
  "Close": 151.79,
  "Volume": 2799990
}, {
  "Date": "2015-04-17 08:35",
  "Open": 151.79,
  "High": 151.8,
  "Low": 151.6,
  "Close": 151.75,
  "Volume": 1817706
}, {
  "Date": "2015-04-17 08:40",
  "Open": 151.74,
  "High": 151.96,
  "Low": 151.74,
  "Close": 151.84,
  "Volume": 2127911
}, {
  "Date": "2015-04-17 08:45",
  "Open": 151.84,
  "High": 152.03,
  "Low": 151.79,
  "Close": 151.95,
  "Volume": 1640306
}, {
  "Date": "2015-04-17 08:50",
  "Open": 151.95,
  "High": 152.09,
  "Low": 151.84,
  "Close": 152.07,
  "Volume": 1420396
}, {
  "Date": "2015-04-17 08:55",
  "Open": 152.07,
  "High": 152.08,
  "Low": 151.87,
  "Close": 151.91,
  "Volume": 1312368
}, {
  "Date": "2015-04-17 09:00",
  "Open": 151.92,
  "High": 152.02,
  "Low": 151.88,
  "Close": 151.95,
  "Volume": 1351448
}, {
  "Date": "2015-04-17 09:05",
  "Open": 151.95,
  "High": 152.02,
  "Low": 151.87,
  "Close": 151.98,
  "Volume": 1171601
}, {
  "Date": "2015-04-17 09:10",
  "Open": 151.97,
  "High": 151.99,
  "Low": 151.72,
  "Close": 151.73,
  "Volume": 1340956
}, {
  "Date": "2015-04-17 09:15",
  "Open": 151.73,
  "High": 151.85,
  "Low": 151.71,
  "Close": 151.82,
  "Volume": 931909
}, {
  "Date": "2015-04-17 09:20",
  "Open": 151.81,
  "High": 151.87,
  "Low": 151.68,
  "Close": 151.75,
  "Volume": 864346
}, {
  "Date": "2015-04-17 09:25",
  "Open": 151.74,
  "High": 151.81,
  "Low": 151.69,
  "Close": 151.73,
  "Volume": 1070323
}, {
  "Date": "2015-04-17 09:30",
  "Open": 151.76,
  "High": 151.83,
  "Low": 151.65,
  "Close": 151.79,
  "Volume": 2799990
}, {
  "Date":...