Back

Time Chart - Gradient Columns - Various different gradient setups

Clustered time series column chart with linear gradient fill. Each series has a different gradient style - 'fillGradient' contains different color codes at different positions, and 'fillGradientMode' controls gradient direction.

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, 133.4, 150.398], [1383881325, 195, 220.201]
    ]
};

    var t = new TimeChart(
            {
                container: document.getElementById("demo"),
                data:
                {
                    units: ["M"],
                    timestampInSeconds: true,
                    preloaded: data,
                },
                navigation: {
                    initialDisplayPeriod: "1382024434000 > 1383881325000"
                },
                series: [
                {
                    id: "s1",
                    data: {
                        index: 1
                    },
                    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)"]
                        ]
                    }
 				},
                {
                    id: "s2",
                    stack:"default",
                    data: {
                        index: 2
                    },
                    style: {
                        fillGradientMode: "vertical",
                        fillGradient: [
                            [0, "rgb(149,222,229)"],
                            [1, "rgb(70,113,168)"]
                        ]
                    }
                },
                {
                    id: "s3",
                    style: {
                        fillGradientMode: "horizontal",
                        fillGradient: [
                            [0, "rgb(250,207,0)"],
                            [1, "rgb(255,77,75)"]
                        ]
                    }
                },
                {
                    id: "s4",
                    data: {
                        index: 2
                    },
                    style: {
                        fillGradientMode: "vertical",
                        fillGradient: [
                            [1, "rgb(0,250,0)"],
                            [0, "rgba(0,0,0,0)"]
                        ]
                    }
                },
 				{
                    id: "s5",
                    style: {
                        fillGradientMode: "horizontal",
                        fillGradient: [
                            [0, "rgb(76,76,76)"],
                            [0.5, "rgb(225,85,25)"],
                            [1, "rgb(276,276,76)"]
                        ]
                    }
                },
                {
                    id: "s6",
                    stack:"default",
                    style: {
                        fillGradientMode: "vertical",
                        fillGradient: [
                            [0, "rgba(150,215,255,0.4)"],
                            [0.5, "rgb(0,130,220)"],
                            [1, "rgba(70,155,255,0.9)"]

                        ]
                    }
                }
                ]
            }
    );

Data

Data 
//No separate data for this example