Back

Value labels

Column chart that displays each column's value in a label. Enabled and configured using 'valueLabels' object under 'series'.

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: "Average temperature",
                data: {
                    index: 1,
                    aggregation: "avg"
                },
                valueLabels: {
                    enabled: true,
                    position: "insideTop",
                    style: {
                        textStyle: {
                            font: "16pt Arial"
                        },
                        backgroundStyle: {
                            lineColor: "#ccc",
                            lineWidth: 1,
                            fillColor: "#eee"
                        },
                        borderRadius: 2
                    },
                    contentsFunction: function (value) { return value.toFixed(0) + " °C"; }
                }
            }
        ]
    });

Data

Data 
//Data too large to output
Download Data