Gradient within area charts

[Michaël]

Hi,

Here is attached the area line I must design. I've been able to add the top solid line without any issue, however I struggle to add the subtle gradient as a filler. Is this possible?

Thanks

[Iliana Dyankova]

Hi Michaël,

The illustrated outcome is not supported by Kendo UI Chart at this point. We will appreciate it if you submit this idea as a feature request at our UserVoice page - this way the community would be able to evaluate it and if the suggestion gains popularity we will consider it for future releases. 

Regards,
Iliana Nikolova
Telerik

[Michaël]

For those who are facing the same problem, here is a workaround:

* in your body, add a svg definition, wrap around a div with a heigh of 0, with the desired gradient:

<div style="height: 0">
            <svg xmlns="http://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.25" />
                        <stop offset="100%" style="stop-color:#3bafda; stop-opacity:0.05" />
                    </linearGradient>
                </defs>
            </svg>
        </div>

Then, you can reference this SVG gradient:

color: 'url(#svg-gradient)';

Not sure about the drawbacks, but it seems to do the trick.