Back

Time Chart - Custom Gradient Columns

Columns with custom gradient

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, 84.51541, 120.31], [1363536829, 95.7, 50.42],
        [1366088526, 166, 120.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, 133.4, 100.398], [1383881325, 195, 120.301]
    ]
};

var t = new TimeChart(
        {
            container: document.getElementById("demo"),
            data:
            {
                units: ["M"],
                timestampInSeconds: true,
                preloaded: data,
            },
            chartTypes:{
                columns:{
                    style: {
                        fillGradientMode: "vertical",
                        fillGradient: [
                            [0, "rgb(2,4,24)"],
                            [0.25, "rgb(2,33,88)"],
                            [0.40, "rgb(21,138,190)"],
                            [0.50, "rgb(30,181,201)"],
                            [0.75, "rgb(220,197,161)"],
                            [1, "rgb(150,45,50)"]
                        ]
                    }
                }
            }
        }
);

Data

Data 
//No separate data for this example