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.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";
import sampleData from "https://jsfiddle.chartiq.com/chart/examples/data/STX_SAMPLE_5MIN.js";

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

function appendDrawXAxis(chart, axisRepresentation) {
	// Only do alternating shading if the x-axis at the bottom.
	// Otherwise more code is needed to shade the panels under the axis without shading over the axis itself.
	if (!this.xAxisAsFooter) return;
	var panel = chart.panel;
	if (panel.name != "chart") return; // Skip study panels

	// set your alternate color. Add transparency so the grid lines are visible
	this.chart.context.fillStyle = "rgba(46, 97, 178, .05)";

	var ctx = this.chart.context;
	var obj;

	// find the bottom of the last y-axis on the chart.
	// we need to know the y-axis because otherwise the bottom of the chart will be past the x-axis and we don't want that.

	// subtract 1 because whichPanel is designed for displaying the x-axis also
	var wPanel = this.whichPanel(this.chart.canvasHeight - 1);
	if (!wPanel) return; // happens if window height increases during resize
	var yAxis = wPanel.yAxis;
	var bottom = yAxis.bottom;
	var top = 0;

	var prevRight = -1;
	var nextBoundaryLeft = Number.MAX_VALUE;

	var edges = [];
	var edgesInterator = 0;

	for (var nb = 0; nb < axisRepresentation.length; nb++) {
		if (axisRepresentation[nb].grid == "boundary") {
			nextBoundaryLeft = axisRepresentation[nb].left;
			break;
		}
	}
  
  console.log(axisRepresentation)

	for (var i = 0; i < axisRepresentation.length; i++) {
		obj = axisRepresentation[i];
		// Check for overlap
		if (i == nb) {
			for (nb++; nb < axisRepresentation.length; nb++) {
				if (axisRepresentation[nb].grid == "boundary") {
					nextBoundaryLeft = axisRepresentation[nb].left;
					break;
				}
			}
			if (nb >= axisRepresentation.length)...