Candlestick and area chart
HTML
HTML
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>
CSS
CSS
//No CSS for this example
JavaScript
JavaScript
chart= new TimeChart({
"series": [
{
"name": "low",
"data": {
"index": 2,
"aggregation": "min"
},
"style": {
"fillColor": "#2fc32f3",
"lineColor": "#2fc32f3"
},
"stack": "default",
"type": "line"
},
{
"name": "high",
"data": {
"index": 3,
"aggregation": "max"
},
"style": {
"fillColor": "#b0dc0b",
"lineColor": "#b0dc0b"
},
"stack": "default",
"type": "line"
},
{
"name": "Apple Stock Price, $",
"data": {
"open": 1,
"high": 2,
"low": 3,
"close": 4
},
"type": "candlestick",
"valueAxis": "secondary",
"style": {
"increase": {
"bar": {
"lineColor": "#2fc32f"
},
"candlestick": {
"lineColor": "#2fc32f",
"fillColor": "#2fc32f"
}
},
"decrease": {
"bar": {
"lineColor": "#ec2e2e"
},
"candlestick": {
"lineColor": "#ec2e2e",
"fillColor": "#ec2e2e"
}
}
}
}
],
"stacks": {
"default": {
"type": "proportional"
}
},
"valueAxis": {
"secondary": {
"enabled": true,
"side": "right"
}
},
"container": "demo",
"data": [
{
"units": [
"d"
],
"url": "/dvsl/data/extra/appl.json"
}
],
"toolbar": {
"fullscreen": true,
"enabled": true
},
"interaction": {
"resizing": {
"enabled": false
}
}
})