Gradient color in angular line/area chart

[Nikhil]

Hi ,

I want gradient color to show area covered by chart  in multi  line chart.

I have tried below solution .

https://www.syncfusion.com/forums/156472/how-to-add-gradient-color-and-3d-effect-in-charts

Though it applied gradient color , other series in graph are not visible after this .

Please suggest.

Please find expected and actual graph attached.

Attachment: linechartGradient_3740a439.zip

[Srihari Muthukaruppan]

Hi Nikhil, 

We have analysed your query. From that, we can achieve your requirement using multiple series in the chart. We have also prepared a sample for your reference. Please find the sample, code snippet and screenshot below.  

  

Sample: https://stackblitz.com/edit/react-7gllvn?file=index.js 

  

Code Snippet:  

// add your additional code here  

<SeriesCollectionDirective> 

              <SeriesDirective 

                dataSource={data1} 

                xName="x" 

                yName="y" 

                width={2} 

                marker={{ visible: true, width: 10, height: 10 }} 

                type="Line" 

              /> 

              <SeriesDirective 

                dataSource={data2} 

                xName="x" 

                yName="y" 

                width={2} 

                marker={{ visible: true, width: 10, height: 10 }} 

                type="Line" 

              /> 

              <SeriesDirective 

                dataSource={data3} 

                xName="x" 

                yName="y" 

                width={2} 

                marker={{ visible: true, width: 10, height: 10 }} 

                type="Line" 

              /> 

              <SeriesDirective 

                dataSource={data2} 

                xName="x" 

                yName="y" 

                type="Area" 

                fill="url(#gradient-chart)" 

                width={2} 

              /> 

            </SeriesCollectionDirective> 

          </ChartComponent> 

// add your additional code here 

  

Screenshot: 

 

 

  

Let us know if you have any concerns. 

  

Regards, 

Srihari