Back

Time Chart - Custom Gradient Columns

Column time chart with linear gradient fill. Select gradient direction with 'fillGradientMode', and define gradient points with color codes with 'fillGradient'.

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