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

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

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

CSS

.ciq-day .stx_grid {
	/* Default Grid */
	border: none;
}

.ciq-day .stx_grid_dark {/* Default Grid dividers */
	border: none;
	}
  
.ciq-day .stx_grid_border {
  border: none;
}

.ciq-day .stx_candle_up {/* Up Candle color */
	color: #ff0;
	border-left-color: #000000;
  border-radius: 10px;
}

JavaScript

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

// 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": 130
  },
  preferences: {
    "currentPriceLine": true
  },
  chart: {
    yAxis: {
      position: 'left'
    }
  }
});

//Now load a chart with it's data
stxx.loadChart(
  "SPY", [

    {
        "Date": "2021-02-01",
        "Open": 0,
        "Close": 0.7,
    },
    {
        "Date": "2021-03-01",
        "Open": 0,
        "Close": 0.5,
    },
    {
        "Date": "2021-04-01",
        "Open": 0,
        "Close": 0.1,
    },
    {
        "Date": "2021-05-01",
        "Open": 0,
        "Close": 49.65,
    },
    {
        "Date": "2021-07-01",
        "Open": 0,
        "Close": -46.39,
    },
    {
        "Date": "2021-07-01",
        "Open": 0,
        "Close": 0,
    }
]
);