Back

Normal stacking: Stacked column chart

Time series column chart with multiple stacked columns. The selected 'type' for the stack is 'normal', which means that both columns are stacked cumulatively and the second series starts where the first series ended.

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": "low",
            "data": {
                "index": 2,
                "aggregation": "min"
            },
            "style": {
                "fillColor": "#2fc32f"
            },
            "stack": "default",
            "type": "columns"
        },
        {
            "name": "high",
            "data": {
                "index": 3,
                "aggregation": "max"
            },
            "style": {
                "fillColor": "#b0dc0b"
            },
            "stack": "default",
            "type": "columns"
        }
    ],
    "stacks": {
        "default": {
            "type": "normal"
        }
    },
    "container": "demo",
    "data": [
        {
            "units": [
                "d"
            ],
            "url": "/dvsl/data/extra/appl.json"
        }
    ],
    "toolbar": {
        "fullscreen": true,
        "enabled": true
    },
    "interaction": {
        "resizing": {
            "enabled": false
        }
    }
})

Data

Data 
//Data too large to output
Download Data