Back

Styled value axis

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",
                        side: "left",
                        position: "outside",
                        hgrid: true,
                        zeroLine: "visible", // "visible", "floating" or "center"
                        style: {
                            title: { fillColor: "blue", font: "30px Arial", alignment: "center", margin: 0 },
                            tick: { lineColor: "blue" },
                            valueLabel: { fillColor: "blue", font: "15px Arial", margin: 0 },
                            labelSpacing: 20,
                            baseLine: { lineColor: "blue", lineWidth: 2 },
                            hgrid: { lineColor: "blue" }
                        }
                    },
                    "secondary": {
                        side: "right",
                        position: "inside",
                        axisLine: true,
                        style: { axisLine: { lineDash: [3, 3] } }
                    }
                },
                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
                        }
                    }
                ]
            }
    );

Data

Data 
//Data too large to output
Download Data