Back

Area chart

Regular JavaScript area chart with one series - the area below series values is filled. Achieved by using 'line' as the series type and applying your desired 'fillColor' under series 'style' property.

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": "Average open price, $",
            "data": {
                "index": 1,
                "aggregation": "avg"
            },
            "type": "line",
            "style": {
                "fillColor": "#2fc32f",
                "lineColor": "#2fc32f"
            }
        }
    ],
    "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