New to Kendo UI for jQuery? Download free 30-day trial

Create Chart Gradients from Left to Right with Multi-Color Values

Environment

Product Progress® Kendo UI® Chart for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript

Description

How can I create left-to-right gradients with multi-color values in the Chart?

Solution

The following example demonstrates how to create such gradients with three-color values.

  <div id="chart" />
      <script>
        kendo.dataviz.Gradients.series1Gradient = {
          type: "linear",
          stops: [{
            offset: 0,
            color: "#fff",
            opacity: 0.5
          }, {
            offset: 1,
            color: "#000"
          }]
        };

        kendo.dataviz.Gradients.series2Gradient = {
          type: "linear",
          stops: [{
            offset: 0,
            color: "#00acc1",
            opacity: 0.5
          }, {
            offset: 1,
            color: "#80deea"
          }]
        };

        kendo.dataviz.Gradients.series3Gradient = {
          type: "linear",
          stops: [{
            offset: 0,
            color: "#ffbf46",
            opacity: 0.5
          }, {
            offset: 1,
            color: "#ffd78c"
          }]
        };

        $("#chart").kendoChart({
          title: {
            text: "Site Visitors Stats \n /thousands/"
          },
          legend: {
            visible: false
          },
          seriesDefaults: {
            type: "column",

          },
          series: [{
            name: "Total Visits",
            data: [56000, 63000, 74000, 91000, 117000, 138000],
            overlay: {
              gradient: "series1Gradient",
              start: [0, 0.5],
              end: [1, 0.5]
            },
            border: {
              width: 0
            }
          }, {
            name: "Total Visits",
            data: [86000, 23000, 44000, 21000, 57000, 168000],
            overlay: {
              gradient: "series2Gradient",
              start: [0.5, 0],
              end: [0.5, 1]
            },
          }, {
            name: "Unique visitors",
            data: [52000, 34000, 23000, 48000, 67000, 83000],
            overlay: {
              gradient: "series3Gradient",
              start: [0.5, 0],
              end: [0.5, 1]
            },
          }],         
          categoryAxis: {
            categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
            majorGridLines: {
              visible: false
            }
          },
          tooltip: {
            visible: true,
            template: "#= series.name #: #= value #"
          }
        });
      </script>

See Also

In this article