Back

Waterfall chart

Simple waterfall chart for time series data that shows values as a sequence. Each data point has two values that create a stack - the portion until the first value has a transparent 'fillColor', and the portion between the first and second value uses a green 'fillColor'.

Documentation Open in JSFiddle
Start Free Trial Purchase

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 
{
    "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
        ]
    ]
}
Download Data