Conical Gradient in donut chart Syncfusion

[Nikhil]

Hi ,

Is there any way we can add conical gradient to syncfusion angular donut  chart .

Please see attached screenshot.

Attachment: conicalGradient_f4995349.zip

[Srihari Muthukaruppan]

Hi Nikhil,  

 

Thanks for contacting syncfusion support. 

 

We have looked up your query. We can apply linear gradient to the donut chart using the pointColorMapping property in the series of the chart. It is achieved by 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

[Nikhil]

Hi Srihari ,,

thanks for reply.

But what I am looking here is conical gradient where donut chart will start as yellow and then  gradually change to dark green as it progress.

something like this https://jsfiddle.net/prozoroff/8eodzrke/

[Srihari Muthukaruppan]

Hi Nikhil, 

Sorry for the inconvenience. 

We have analysed your query. As stated earlier, we can apply linear or conical gradient to the donut chart using the same pointColorMapping property in the series of the chart. It is achieved by with the help of SVG gradients as mentioned earlier. 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-fcggst?file=app.component.ts 

Screenshot: 

 

Let us know if you have any concerns. 

Regards, 

Srihari