Back

Using gradient fill

Gradient fill assigns colors to specific values in data. Columns are painted between min and max values of the temperature in current period.

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 

    var t = new TimeChart(
            {
                container: document.getElementById("demo"),
                data:
                {
                    units:["h"],
                    url: "/dvsl/data/time-chart/temperature-kuldiga-h.json"
                },
                valueAxisDefault:{ title:"Temperature" },
                series:[
                    {
                        name:"Min temperature",
                        id:"series1",
                        type:"line",
                        stack:"s1",
                        data:{
                            index: 1,
                            aggregation:"min"
                        },
                        style:{
                            fillColor: null,
                            lineColor: null
                        }
                    },
                    {
                        name:"Max temperature",
                        id:"series2",
                        type:"line",
                        stack:"s1",
                        data:{
                            index: 1,
                            aggregation:"max"
                        },
                        style:{
                            fillGradient:[[-20, "rgba(0,0,255,0.4)"],[30,"rgba(255,0,0,0.7)"]]
                        }
                    }
                ],
                stacks:{
                    "s1":{
                        type:"based"
                    }
                }
            }
    );

Data

Data 
//Data too large to output
Download Data