Back

Stacked column chart with based stacking

Stacked column chart with zero-based stacking. In this example, "high" series completely obscures "low" series. You can configure the layering order to ensure that the series are displayed properly.

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": "based"
        }
    },
    "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