Waterfall 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": "",
"data": {
"index": 1
},
"stack": "default",
"style": {
"fillColor": "transparent"
},
"type": "columns"
},
{
"name": "Increase",
"data": {
"index": 2
},
"stack": "default",
"style": {
"fillColor": "#2fc32f"
},
"type": "columns"
}
],
"style": [],
"container": "demo",
"data": [
{
"units": [
"M"
],
"url": "/dvsl/data/extra/waterfall.json"
}
],
"toolbar": {
"fullscreen": true,
"enabled": true
},
"interaction": {
"resizing": {
"enabled": false
}
}
})
Data
Data
Download Data
{
"unit": "M",
"values": [
[
"2017-01-01",
0,
10
],
[
"2017-02-01",
10,
25
],
[
"2017-03-01",
35,
40
],
[
"2017-04-01",
75,
80
],
[
"2017-05-01",
156,
200
],
[
"2017-06-01",
355,
265
],
[
"2017-07-01",
620,
370
],
[
"2017-08-01",
990,
400
],
[
"2017-09-01",
1390,
450
],
[
"2017-10-01",
1840,
775
],
[
"2017-11-01",
2615,
200
],
[
"2017-12-01",
2815,
230
]
]
}