Back

Multiple smooth area streams with gradient fill

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