How to add gradient color and 3D effect in charts

[Unknown]

Hello,    I have two queries-

  

1. I am trying to add gradient color in charts but can't find any props in Syncfusion ej2 for react. 

2. Is there any way to add 3D effect in charts ?.

I am using React js with syncfusion-ej2

[Srihari Muthukaruppan]

Hi Nikita,

Please find the below response for chart related query. 

  

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  

Query #1: I am trying to add gradient color in charts but can't find any props in Syncfusion ej2 for react? 

  

We have analyzed your query. From that, we would like to let you know that we can achieve your requirement by using fill property in the chart. We have attached our demo sample link for your reference. Please find the below code snippet and screenshot. 

  

Sample: https://ej2.syncfusion.com/react/demos/#/material/chart/zoom 

  

Code Snippet: 

 

const SAMPLE_CSS = `#gradient-chart stop { stop-color: #BDEDE9; }
 #gradient-chart stop[offset="0"] { stop-opacity: 0.75; }
 #gradient-chart stop[offset="1"] { stop-opacity: 0; }`;

 <ChartComponent id='charts' style={{ textAlign: "center" }} 
 // add your additional code here

      <SeriesCollectionDirective>

              <SeriesDirective dataSource={data} xName='x' yName='y' name='Product X'

                                animation={{ enable: false }} fill='url(#gradient-chart)' type='Area'>

              </SeriesDirective>

      </SeriesCollectionDirective>

  </ChartComponent>

                    <defs>

                        <linearGradient id="gradient-chart" x1="0" x2="0" y1="0" y2="1">

                            <stop offset="0" />

                            <stop offset="1" />

                        </linearGradient>

                    </defs>

                </svg>

 

  

Screenshot: 

   

 

Query #2: Is there any way to add 3D effect in charts ? 

  

 

We have analyzed your query. From that, we would like to let you know that as of now we don’t have support to “3D chart support in EJ2”. we have already logged a feature request on this.  It can be tracked through our feedback portal below. 

  

Feedback Portal: https://www.syncfusion.com/feedback/11578 

  

If you have any more specifications/suggestions to the feature request, you can add it as a comment in the portal. 

 

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  

Let us know if you have any concerns. 

Regards,

Srihari M