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' } } }); //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, "Adj_Close": 31.67 }, { "Date": "1993-01-29 9:38:00", "Open": 44.66, "High": 44.75, "Low": 44.53, "Close": 44.72, "Volume": 379600, "Adj_Close": 31.71 }, { "Date": "1993-01-29 9:40:00", "Open": 43.97, "High": 43.97, "Low": 43.75, "Close": 43.94, "Volume": 1003200, "Adj_Close": 31.16 }, { "Date": "1993-01-29 9:41:00", "Open": 43.97, "High": 44.25, "Low": 43.97, "Close": 44.25, "Volume": 480500, "Adj_Close": 31.38 } ] );
<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>