Charts Tutorials

Donut Chart in Google Charts

Donut Chart



Donut charts are used to show the proportions of categorical data, with the size of each piece representing the proportion of each category. A donut chart is created using a string field and a count of features, numbers, or rate/ratio fields. In other words, Donut Charts are similar to donuts for displaying the data. It is essentially a Pie Chart but with the area of the center cut out.


Steps for adding Google Donut Charts to your Website:-


  1. To use Google Donut Chart on your website, add a link to the charts loader:-
  2. After this, add a div with a unique id. Then, we have to load Google Graph API:-
  3. Load the Visualization API with the desired package name. In our case, it is "corechart".
  4. Set a callback function.
  5. The visualization API is:- google.charts.load('current', {'packages':['corechart']})
  6. The callback function will be:- google.charts.setOnLoadCallback(draw_my_chart)

Code Explanation

All Tutorials related to Charts Tutorials

All Sections related to Charts