Back

Value axis inside the chart area

By default, the value axis scale and title will be displayed in a dedicated area next to the chart. If 'position' is "inside", the value axis will be overlap the chart instead - useful if you need to save space at the cost of readability.

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"
                },
                valueAxis:{
                    "va1":{
                        title:"Temperature 1",
                        side: "left",
                        position:"inside"
                    }
                },
                series:[
                    {
                        id:"s1",
                        type:"columns",
                        valueAxis: "va1",
                        data:{
                            index:1,
                            aggregation:"avg"
                        },
                        style:{
                            fillColor:"lightgreen",
                            lineColor:"olive",
                            lineWidth: 1,
                            padding:[2,2] // space around the columns
                        }
                    },
                    {
                        id:"s2",
                        type:"line",
                        valueAxis: "va1",
                        data:{
                            index:1,
                            aggregation:"max"
                        },
                        style:{
                            lineColor:"olive",
                            lineWidth: 3
                        }
                    }
                ],
            }
    );

Data

Data 
//Data too large to output
Download Data