static "stamp" like chart
This is the jsfiddle implementation of a basic small static chart
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:230px;height:110px;position:relative; border:1px"></div>
CSS
.stx-panel-title {
display: none;
}
JavaScript
import { CIQ } from "https://jsfiddle.chartiq.com/chart/js/advanced.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": "baseline_delta",
"periodicity": 1,
"interval": 'day',
},
preferences: {
"currentPriceLine": false,
"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: false // remove x axis grid lines
}
},
manageTouchAndMouse: false, // disable chart interactivity
xaxisHeight: 0 // remove x axis
});
//Now load a chart with its data
stxx.loadChart(
"SPY", {
masterData: [{
"Date": "1993-01-29",
"Close": 43.94,
"Volume": 1003200,
}, {
"Date": "1993-02-01",
"Close": 44.25,
"Volume": 480500,
}, {
"Date": "1993-02-02",
"Close": 44.34,
"Volume": 201300,
}, {
"Date": "1993-02-03",
"Close": 42.81,
"Volume": 529400,
}, {
"Date": "1993-02-04",
"Close": 43,
"Volume": 531500,
}, {
"Date": "1993-02-05",
"Close": 44.97,
"Volume": 492100,
}, {
"Date": "1993-02-08",
"Close": 44.97,
"Volume": 596100,
}, {
"Date": "1993-02-09",
"Close": 44.66,
"Volume": 122100,
}, {
"Date": "1993-02-10",
"Close": 44.72,
"Volume": 379600,
}, {
"Date": "1993-02-11",
"Close": 44.64,
"Volume": 371000,
}, {
"Date": "1993-02-12",
"Close": 44.60,
"Volume": 366500,
}, {
"Date": "1993-02-13",
"Close": 44.51,
"Volume": 339100,
}, {
"Date": "1993-02-14",
"Close":...