This is a migrated thread and some comments may be shown as answers.

Gradient within area charts

2 Answers 186 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Michaël
Top achievements
Rank 1
Michaël asked on 23 Feb 2014, 05:07 PM
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

2 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 25 Feb 2014, 11:52 AM
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
0
Michaël
Top achievements
Rank 1
answered on 25 Feb 2014, 02:18 PM
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.
Tags
Charts
Asked by
Michaël
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Michaël
Top achievements
Rank 1
Share this question
or