How to add a gradient fill to an area chart?

[Philip]

Hi,

I have seen some different instructions for adding a gradient fill, but they are mostly for Xamarin or React.

What is the best way to add a gradient fill to something like an area chart using either JS ES5 or ES6 initialization? 

Is there a way that uses custom CSS?

Thanks,

[Srihari Muthukaruppan]

Hi Philip, 

 

Thank you for contacting Syncfusion support. 

 

To add gradient fill to the area chart in JavaScript, you can set the gradient color to the fill property in the chart series. We have attached our demo sample link for your reference. Also, please find the below code snippet and screenshot to achieve your requirement. 

  

Sample: https://ej2.syncfusion.com/javascript/demos/#/material/chart/zooming.html 

  

Code Snippet: 

Index.html: 

<style> 

    #material-gradient-chart stop { 

        stop-color: #BDEDE9; 

    } 

    .chart-gradient stop[offset="0"] { 

        stop-opacity: 0.75; 

    } 

    .chart-gradient stop[offset="1"] { 

        stop-opacity: 0; 

    } 

</style> 

<svg style="height: 0"> 

     <defs> 

        <linearGradient id="material-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1"> 

            <stop offset="0"></stop> 

            <stop offset="1"></stop> 

        </linearGradient> 

    </defs> 

</svg>  

 

Index.ts: 

 

   var chart = new ej.charts.Chart({ 

        // add your additional code snippet here 

        series: [ 

            { 

                type: 'Area', 

                dataSource: series1, 

                name: 'Product X', 

               xName: 'x', 

                yName: 'y', 

                fill: 'url(#' + theme.toLowerCase() + '-gradient-chart)', 

            }, 

        ], 

    }); 

    chart.appendTo('#zoom-container'); 

  

Screenshot: 

    

Let us know, if you need any further assistance on this. 

 

Regards, 

Srihari M

[bracknelson]

Click the shape, and when the Format tab appears, click Shape Fill.

Click Gradient > More Gradients.

Under Fill, click Gradient fill > Preset gradient and pick the one you want.

These are the steps to add a gradient fill to an area chart.

[Srihari Muthukaruppan]

Hi bracknelson, 

 

We have analysed your query. From that, we would like to let you know that we have provided the sample with gradient fill colour as requested. Since we are not clear about the exact requirement. Can you please provide more information regarding the issue which will be more helpful for further analysis and provide you the solution sooner. 

 

Regards, 

Srihari