Mountain 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/normalize.css" media="screen">
		<link rel="stylesheet" type="text/css" href="https://jsfiddle.chartiq.com/chart/css/page-defaults.css" media="screen">
		<link rel="stylesheet" type="text/css" href="https://jsfiddle.chartiq.com/chart/css/stx-chart.css" media="screen">
		<link rel="stylesheet" type="text/css" href="https://jsfiddle.chartiq.com/chart/css/chartiq.css" media="screen">
<div class="chartContainer ciq-night" style="width:100%;height:400px;position:relative;"></div>

CSS

.stx_mountain_chart {
  /* border: #f00 !important; */
  /* border-top-color: #f00 !important; */
  background-color: #f00 !important;
  /* border-top-color: #f00 !important; */
  color: #f00 !important;
  
}

JavaScript

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

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

import sample5min from "https://jsfiddle.chartiq.com/chart/examples/data/STX_SAMPLE_5MIN.js"


const stxx = new CIQ.ChartEngine({
  container: document.querySelector(".chartContainer"),
  layout: {
    "chartType": "mountain",
    "candleWidth": 100,
    "periodicity": 1,
    "interval": 'minute',
  }
});

stxx.loadChart("SPY", sample5min);