Back

Stacked streamgraph: Outline smoothing enabled

JavaScript streamgraph that shows changes over time by stacking multiple series. If 'separateNegativeValues' is true, series values that are negative will be displayed as minus values on the Y-Axis, instead of being subtracted from the stack total. Enabling 'smoothing' eases the outline edges.

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": [
        {
            "stack": "based",
            "name": "Min temperature",
            "type": "line",
            "data": {
                "index": 1,
                "aggregation": "min"
            },
            "style": {
                "smoothing": true,
                "lineColor": "#eab404"
            }
        },
        {
            "stack": "based",
            "name": "Averga temperature",
            "type": "line",
            "data": {
                "index": 1,
                "aggregation": "avg"
            },
            "style": {
                "smoothing": true,
                "lineColor": "#b0dc0b",
                "fillColor": "#b0dc0b"
            }
        },
        {
            "stack": "based",
            "name": "Max temperature",
            "type": "line",
            "data": {
                "index": 1,
                "aggregation": "max"
            },
            "style": {
                "smoothing": true,
                "lineColor": "#2fc32f",
                "fillColor": "#2fc32f"
            }
        }
    ],
    "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