static chart with multiple series
This is the jsfiddle implementation of a basic static chart with a primary ad secondly series
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:600px;height:400px;position:relative;"></div>
CSS
.stx-panel-title {
display: none;
}
JavaScript
import { CIQ } from "https://jsfiddle.chartiq.com/chart/js/advanced.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": "line",
"periodicity": 1,
"interval": 'minute',
},
preferences: {
"currentPriceLine": true,
"whitespace": 0
},
chart: {
yAxis: {
//width: 0, // remove y axis
initialMarginTop: 15, // adjust top margin - useful on very narrow charts.
initialMarginBottom: 15 // adjust top margin - useful on very narrow charts.
},
xAxis: {
displayGridLines: true // remove x axis grid lines
}
},
/* manageTouchAndMouse: true, // disable chart interactivity
xaxisHeight: 0 // remove x axis */
});
//position legend
stxx.chart.legend = {
x: 300,
y: 20
};
//Now load a chart with its data
stxx.loadChart(
"", {
masterData:
[{
"Date": "1993-01-29T9:00",
"Close": 13.94,
"Volume": 1003200,
}, {
"Date": "1993-01-29T9:01",
"Close": 15.94,
"Volume": 1003200,
},{
"Date": "1993-01-29T9:02",
"Close": 18.94,
"Volume": 1003200,
},{
"Date": "1993-01-29T9:03",
"Close": 13.94,
"Volume": 1003200,
},{
"Date": "1993-01-29T9:04",
"Close": 13.94,
"Volume": 1003200,
},{
"Date": "1993-01-29T9:05",
"Close": 13.94,
"Volume": 1003200,
},{
"Date": "1993-01-29T9:06",
"Close": 13.94,
"Volume": 1003200,
},{
"Date": "1993-01-29T9:07",
"Close": 13.94,
"Volume": 1003200,
},{
"Date": "1993-01-29T9:08",
"Close": 13.94,
"Volume": 1003200,
},{
"Date": "1993-01-29T9:09",
"Close": 13.94,
...