Gradient color in angular donut chart

[Nikhil]

Hi ,

I would like to have example where "Donut "chart are displayed using gradient color in linear fashion , for example starting with angle zero using light yellow to angle 360 to dark green.

Thanks in advance.

Regards ,

Nikhil 

Attachment: gradient_donut_a8aeb0e4.zip

[Srihari Muthukaruppan]

Hi Nikhil,  

 

Thanks for contacting syncfusion support. 

 

We have looked up your query and we suggest you to apply linear gradient to the donut chart using the pointColorMapping property in the series of the chart. It can be achieved with the help of SVG gradients as shown in the below code snippet. We have also prepared a sample for your reference. Please find the below sample, code snippet and screenshot.  

 

Sample: https://stackblitz.com/edit/angular-wwhyn7?file=app.component.html 

 

Code snippet:  

App.component.Html: 

<ejs-accumulationchart id="container" #pie > 

        <e-accumulation-series-collection> 

            <e-accumulation-series [pointColorMapping]='pointColorMapping'  [dataSource]='data' 

                // add your additional code here 

                 > 

            </e-accumulation-series> 

        </e-accumulation-series-collection> 

    </ejs-accumulationchart> 

    <style> 

        .control-section { 

            min-height: 450px; 

        } 

    </style> 

<svg style="height: 0">  

    <defs>  

        <linearGradient id="gradient-chart100" x1="0%" y1="0%" x2="100%" y2="0%">  

            <stop offset="0%" style="stop-color:#edd55b;stop-opacity:1" />  

            <stop offset="50%" style="stop-color:#8bc25f;stop-opacity:1" />  

            <stop offset="100%" style="stop-color:#4cb863;stop-opacity:1" />  

        </linearGradient>  

    </defs>  

</svg>  

 

App.component.ts: 

// add your additional code here 

public data: Object[] = [ 

      { x: 'Labour', y: 90,  color: "url(#gradient-chart100)" },  

      { x: 'Legal', y: 10, color: "#e7e7e7"} 

]; 

public pointColorMapping:string = 'color'; 

 

 

Screenshot:  

   

 

Let us know if you need further assistance on this.  

 

Regards,  

Srihari M