how to set a gradient chart area

[Bart]

Hello

I would like to set a gradient chart area background in 3 colors like the following example:

All I have found is to set a single color

                <ejs-chart id="container" width="100%">

                    <e-chart-chartarea background="red" ></e-chart-chartarea>

                    <e-chart-tooltipsettings enable="true"></e-chart-tooltipsettings>

                    <e-chart-legendsettings visible="false"></e-chart-legendsettings>

                    <e-chart-primaryxaxis valueType="DateTime" intervalType="Days">

                    </e-chart-primaryxaxis>

                    <e-chart-primaryyaxis minimum="0" maximum="120" interval="20" labelFormat="{value}%">

                    </e-chart-primaryyaxis>

                    <e-series-collection>

                        <e-series dataSource="ViewBag.data" xName="x" yName="y" name="Phi" col type="@Syncfusion.EJ2.Charts.ChartSeriesType.Scatter" fill="black"><e-series-marker shape="Circle"></e-series-marker></e-series>

                    </e-series-collection>

                </ejs-chart>

Any help would be great

[Durga Gopalakrishnan]

Hi Bart,

Greetings from Syncfusion.

We suggest you create a svg gradient and apply its id to chart background property by specifying as url. Please check with the below code snippet.

<ejs-chart>    
<e-chart-chartarea background="url(#grad2)"></e-chart-chartarea>
</ejs-chart>

<svg style="height: 0">

    <defs>

        <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">

            <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />

            <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />

        </linearGradient>

    </defs>

</svg>

Please revert us if you have any concerns.

Regards,

Durga G

[Bart]

Thank you

Just tested this and it works great

[Durga Gopalakrishnan]

Hi Bart,

Thanks for an update. Please get back to us if you need any further assistance. 

Regards,

Durga G