HelloWorld - Basic chart.

This is the jsfiddle implementation of helloworld.html.

by sonylnagale

HTML

<link rel="stylesheet" type="text/css" href="https://jsfiddle.chartiq.com/chart/css/stx-chart.css" media="screen" />


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

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: {
    "chartType": "candle",
    "crosshair": true,
    "candleWidth": 30,
    "periodicity": 1,
    "interval": 'minute',
  },
  preferences: {
    "currentPriceLine": true,
    "whitespace": 100
  },
  chart: {
    yAxis: {
      position: 'left'
    }
  }
});

const hourly = [{
    "Date": "1993-01-29 9:00:00",
    "Open": 43.97,
    "High": 43.97,
    "Low": 43.75,
    "Close": 43.94,
    "Volume": 1003200,
    "Adj_Close": 31.16
  }, {
    "Date": "1993-01-29 10:00:00",
    "Open": 43.97,
    "High": 44.25,
    "Low": 43.97,
    "Close": 44.25,
    "Volume": 480500,
    "Adj_Close": 31.38
  }, {
    "Date": "1993-01-29 11:00:00",
    "Open": 44.22,
    "High": 44.38,
    "Low": 44.13,
    "Close": 44.34,
    "Volume": 201300,
    "Adj_Close": 31.44
  }, {
    "Date": "1993-01-29 12:00:00",
    "Open": 44.41,
    "High": 44.84,
    "Low": 44.38,
    "Close": 44.81,
    "Volume": 529400,
    "Adj_Close": 31.77
  }, {
    "Date": "1993-01-29 13:00:00",
    "Open": 44.97,
    "High": 45.09,
    "Low": 44.47,
    "Close": 45,
    "Volume": 531500,
    "Adj_Close": 31.91
  }, {
    "Date": "1993-01-29 14:00:00",
    "Open": 44.97,
    "High": 45.06,
    "Low": 44.72,
    "Close": 44.97,
    "Volume": 492100,
    "Adj_Close": 31.89
  }, {
    "Date": "1993-01-29 15:00:00",
    "Open": 44.97,
    "High": 45.13,
    "Low": 44.91,
    "Close": 44.97,
    "Volume": 596100,
    "Adj_Close": 31.89
  }
  ]



//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":...