Back

Time Chart - Gradient Columns - Vertical Cylinders

Stacked column chart with a slight linear gradient applied to the fill color. Enabled using fillGradientType: "cylinder".

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 data = {
    dataLimitFrom: 1279408157,
    dataLimitTo: 1384253671,
    unit: "M",
    values: [
        [1358620069, 123.43, 30.22], [1360955055, 34.51541, 100.31], [1363536829, 95.7, 50.42],
        [1366088526, 266, 220.67], [1368368125, 141.42236, 170.39], [1371180511, 130.0, 82.302],
        [1373758345, 111.652, 79.883], [1376745412, 148.7, 109.101], [1379147545, 148.90893, 70.485],
        [1382024434, 233.4, 300.398], [1383881325, 395, 220.301]
    ]
};

    var t = new TimeChart(
            {
                container: document.getElementById("demo"),
                data:
                {
                    units: ["M"],
                    timestampInSeconds: true,
                    preloaded: data,
                },
                chartTypes:{
                    columns:{
                        style: {
                            fillGradientType: "cylinder",
                            fillGradientMode: "vertical"
                        }
                    }
                },
                series: [
                {
                    id: "s1",
                    data: {
                        index: 1
                    },
                    name: "First",
                },
                {
                    id: "s2",
                    data: {
                        index: 2
                    },
                    name: "Second",
                }
                ]
            }
    );

Data

Data 
//No separate data for this example