HelloWorld - Basic chart

This is the jsfiddle implementation of helloworld.html

by chart2music

HTML

<script src="https://cdn.jsdelivr.net/npm/chart2music"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon"></script>
<script src="https://cdn.jsdelivr.net/npm/numeral"></script>
<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>
<div id="cc"></div>

CSS

#cc {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background-color: beige;
  border-radius: 4px;
  padding: 5px;
  max-width: 400px;
}

JavaScript

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

const container = document.querySelector(".chartContainer");
const cc = document.getElementById("cc");
const candleCenter = (point) =>
  (point.Open + point.High + point.Low + point.Close) / 4;
const toTitleCase = (str) => str.charAt(0).toUpperCase() + str.substring(1);

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

const data = [
{
  "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,
  "Adj_Close": 31.67
}, {
  "Date":...