Back

Stream chart

Stream chart with an area and line series to visualize changes over time. With 'separateNegativeValues' enabled, negative values are displayed as minus values under the zero point, instead of being subtracted from the stack total.

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({
    "stacks": {
        "default": {
            "type": "based",
            "separateNegativeValues": true
        }
    },
    "series": [
        {
            "name": "Min temperature",
            "type": "line",
            "data": {
                "index": 1,
                "aggregation": "min"
            },
            "style": {
                "smoothing": true,
                "lineColor": "#2fc32f"
            },
            "stack": "default"
        },
        {
            "name": "Max temperature",
            "type": "line",
            "data": {
                "index": 1,
                "aggregation": "max"
            },
            "style": {
                "smoothing": true,
                "lineColor": "#2fc32f",
                "fillColor": "#2fc32f"
            },
            "stack": "default"
        }
    ],
    "container": "demo",
    "data": [
        {
            "units": [
                "h"
            ],
            "url": "/dvsl/data/time-chart/temperature-kuldiga-h.json"
        }
    ],
    "toolbar": {
        "fullscreen": true,
        "enabled": true
    },
    "interaction": {
        "resizing": {
            "enabled": false
        }
    }
})

Data

Data 
//Data too large to output
Download Data