Back

Floating zero line

The zero line is allowed to move off chart to emphasize differences between min and max values.

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"),
                navigation:{initialDisplayPeriod: "1369526400000 > 1377302400000", initialDisplayUnit: "d"},
                data:
                {
                    units:["h"],
                    url: "/dvsl/data/time-chart/temperature-kuldiga-h.json"
                },
                valueAxis:{
                    "va1":{
                        enabled: true,
                        title:"Temperature",
                        zeroLine: "floating"
                    }
                },
                series:[
                    {
                        id:"s1",
                        type:"line",
                        valueAxis: "va1",
                        data:{
                            index:1,
                            aggregation:"avg"
                        },
                        style:{
                            fillGradient:[[-10, "blue"], [0, "lightgreen"],[30,"orange"]],
                            lineColor:"olive",
                            lineWidth: 1,
                            padding:[2,2] // space around the columns
                        }
                    }
                ]
            }
    );

Data

Data 
//Data too large to output
Download Data