HelloWorld - Basic chart.

This is the jsfiddle implementation of helloworld.html.

by sonylnagale

HTML

<div class="chartContainer" style="width:100%;height:400px;position:relative;"></div>

CSS

@charset "UTF-8";
/* CSS Document */

.chartContainer { /* DIV that the canvas expands to. */
	display: block;
	font-family: Roboto, Helvetica, sans-serif;
	font-size: 12px;
	position:relative; /* chart container must be relative for internal DOM elements to be correct */
}

.sharing .ciq-no-share {
	display: none !important;
}

.stx-canvas-shim {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

/* --------------------------------------------------------- BUTTONS --------------------------------------------------------- */

/* Basic Buttons */

.stx-btn { /* Inactive Button */
	display:inline-block;
	cursor: pointer;
	padding: 0px 8px;
	border: solid 1px #ddd;
	font-weight: bold;
	line-height: 27px;
	color: #7e7e7e;
	text-align: center;
	overflow: visible;
	background-repeat: no-repeat;
	border-radius: 3px;
	transition: color .25s, border .25s, box-shadow .25s;
	user-select: none;
}
/* Button Hover State */
/*.stx-btn:hover {
	color: #444444;
	border: solid 1px #c5c5c5;
	-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, .1), inset 0px -8px 6px rgba(100, 100, 100, .03);
	-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, .1), inset 0px -8px 6px rgba(100, 100, 100, .03);
	box-shadow: 0px 1px 1px rgba(0, 0, 0, .1), inset 0px -8px 6px rgba(100, 100, 100, .03);
}*/
/* Button Active State */
.stx-btn:active {
	color: #333;
	-webkit-box-shadow: inset 0px 8px 6px rgba(100, 100, 100, .03);
	-moz-box-shadow: inset 0px 8px 6px rgba(100, 100, 100, .03);
	box-shadow: inset 0px 8px 6px rgba(100, 100, 100, .03);
}


/* Panel Buttons */

.stx-btn-panel,
.stx-btn-panel span {/* Button Defaults */
	display:inline-block;
	width:25px;
	height:25px;
	cursor:pointer;
   transition: transform .2s;
}
.stx-btn-panel {/* Button Spacing */
	margin:6px 2px 3px 2px;
}
/*.stx-btn-panel:hover span,*/
.stx-btn-panel:active span {/* Make buttons full opacity on hover or hit */
	opacity:1;
}
.stx-btn-panel:active {/* Scale up when active */
	-webkit-transform: scale(1.2,...

JavaScript

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

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

// Declare a CIQ.ChartEngine object.
// This is the main object for drawing charts.
// Here is where you set all required defaults.
const stxx = new CIQ.ChartEngine({
  container: document.querySelector(".chartContainer"),
  layout: {
    "crosshair": true,
    "candleWidth": 100,
    "periodicity": 1,
    "interval": 'minute',
  },
  preferences: {
    "currentPriceLine": true,
    "whitespace": 0
  },
  chart: {
    yAxis: {
      position: 'left'
    }
  }
});

//Now load a chart with it's data
stxx.loadChart(
  "SPY", [{
    "Date": "1993-01-29 9:30:00",
    "Open": 43.97,
    "High": 43.97,
    "Low": 43.75,
    "Close": 43.94,
    "Volume": 1003200,
    "Adj_Close": 31.16
  }, {
    "Date": "1993-01-29 9:31:00",
    "Open": 43.97,
    "High": 44.25,
    "Low": 43.97,
    "Close": 44.25,
    "Volume": 480500,
    "Adj_Close": 31.38
  }, {
    "Date": "1993-01-29 9:32:00",
    "Open": 44.22,
    "High": 44.38,
    "Low": 44.13,
    "Close": 44.34,
    "Volume": 201300,
    "Adj_Close": 31.44
  }, {
    "Date": "1993-01-29 9:33:00",
    "Open": 44.41,
    "High": 44.84,
    "Low": 44.38,
    "Close": 44.81,
    "Volume": 529400,
    "Adj_Close": 31.77
  }, {
    "Date": "1993-01-29 9:34:00",
    "Open": 44.97,
    "High": 45.09,
    "Low": 44.47,
    "Close": 45,
    "Volume": 531500,
    "Adj_Close": 31.91
  }, {
    "Date": "1993-01-29 9:35:00",
    "Open": 44.97,
    "High": 45.06,
    "Low": 44.72,
    "Close": 44.97,
    "Volume": 492100,
    "Adj_Close": 31.89
  }, {
    "Date": "1993-01-29 9:36:00",
    "Open": 44.97,
    "High": 45.13,
    "Low": 44.91,
    "Close": 44.97,
    "Volume": 596100,
    "Adj_Close": 31.89
  }, {
    "Date": "1993-01-29 9:37:00",
    "Open": 44.81,
    "High": 44.81,
    "Low": 44.56,
    "Close": 44.66,
    "Volume": 122100,
   ...