Back

Stacked streamgraph: Gradient fill

Streamgraph with multiple stacked series in a zero-based stack and with 'separateNegativeValues' enabled. Outline smoothing enabled to ease outline angles. Gradient applied with 'fillGradient' by providing two or more color codes at your specified value points.

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",
            "stack": "default",
            "data": {
                "index": 1,
                "aggregation": "min"
            },
            "style": {
                "smoothing": true,
                "lineColor": "#eab404",
                "fillColor": null
            }
        },
        {
            "name": "Average temperature",
            "type": "line",
            "stack": "default",
            "data": {
                "index": 1,
                "aggregation": "avg"
            },
            "style": {
                "smoothing": true,
                "lineColor": "#ec2e2e",
                "fillGradient": [
                    [
                        10,
                        "#ec2e2e"
                    ],
                    [
                        -20,
                        "#d5429b"
                    ]
                ]
            }
        },
        {
            "name": "Max temperature",
            "type": "line",
            "stack": "default",
            "data": {
                "index": 1,
                "aggregation": "max"
            },
            "style": {
                "smoothing": true,
                "lineColor": "#de672c",
                "fillGradient": [
                    [
                        20,
                        "#de672c"
                    ],
                    [
                        0,
                        "#eab404"
                    ]
                ]
            }
        }
    ],
    "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