Apply Gradient Effect on Area Chart

Environment

Product Version	2018.1 221
Product	Progress® Kendo UI® Chart for jQuery

Description

How can I apply a gradient color effect on the Kendo UI Area Chart?

Solution

1. Use an external gradient.
2. Use the series.color configuration to set the external gradient.

<div style="height: 0">
    <svg xmlns="https://www.w3.org/2000/svg" version="1.1" width="0" height="0" style="visibility: hidden">
    <defs>
        <linearGradient id="svg-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:#3bafda; stop-opacity:0.95" />
        <stop offset="100%" style="stop-color:#3bafda; stop-opacity:0.05" />
        </linearGradient>
    </defs>
    </svg>
</div>

<div id="example">
    <div id="chart"></div>

    <script>
    function createChart() {
        $("#chart").kendoChart({
        title: {
            text: "Gross domestic product growth \n /GDP annual %/"
        },
        legend: {
            position: "bottom"
        },
        seriesDefaults: {
            type: "area",
            area: {
            line: {
                style: "smooth"
            }
            }
        },
        series: [{
            name: "India",
            data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855],
            color: "url(#svg-gradient)"
        }],
        valueAxis: {
            labels: {
            format: "{0}%"
            },
            line: {
            visible: false
            },
            axisCrossingValue: -10
        },
        categoryAxis: {
            categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
            majorGridLines: {
            visible: false
            },
            labels: {
            rotation: "auto"
            }
        },
        tooltip: {
            visible: true,
            background: "green",
            format: "{0}%",
            template: "#= series.name #: #= value #"
        }
        });
    }

    $(document).ready(createChart);
    </script>
</div>