Back

Multiple areas chart

Time series chart with multiple areas. Since stacking is not configured, the chart by default simply overlays both area series on top of each other.

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": "high",
            "data": {
                "index": 3,
                "aggregation": "max"
            },
            "style": {
                "lineColor": "#b0dc0b",
                "fillColor": "#b0dc0b"
            },
            "type": "line"
        },
        {
            "name": "low",
            "data": {
                "index": 2,
                "aggregation": "min"
            },
            "style": {
                "lineColor": "#2fc32f",
                "fillColor": "#2fc32f"
            },
            "type": "line"
        }
    ],
    "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