We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Use doughnut char with Angular

Thread ID:





127866 Dec 14,2016 02:33 PM UTC Dec 15,2016 11:40 AM UTC JavaScript 1
Tags: ejChart
Asked On December 14, 2016 02:33 PM UTC


Can you guide me  how to use a chart of type doughnut using angular?. Also when a new set of points is loaded I need to use .redraw() to refresh the graph?


Anandaraj T [Syncfusion]
Replied On December 15, 2016 11:40 AM UTC

Hi Roberto, 


Thanks for using Syncfusion products. 


Query #1: Can you guide me how to use a chart of type doughnut using angular? 

We have created a simple doughnut chart sample using angular directive with option to dynamically update the data source. The sample is available in the following link 



Please refer the following code snippet to achieve this 



<div id="container" ej-chart style="width: 60%; float: left;" 






<e-series name="Doughnut Demo" type="doughnut" e-datasource="nChartData" 

e-xname="x" e-yname="y"> 





Query #2: Also when a new set of points is loaded I need to use .redraw() to refresh the graph? 


Essential JavaScript Chart supports two way binding with angular JS. If points are updated through scope variables, then chart will be updated automatically. We can use redraw method when points are not updated through scope variable. 


Please refer the following code snippet to update using redraw method 



function UpdateChart() { 

//Get Chart instance 

var chart = $('#container').ejChart('instance'); 


//Change the data source 

chart.model.series[0].dataSource = chart.model.series[0].dataSource.length == 5 ? data10 : data5; 


//Redraw the chart 




Note: In above example, two way binding is used to update chart through combo box 


Please let us know if you have any concern. 





This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon