HTML5 & JS Doughnut Charts

A doughnut Chart is a circular chart with a blank center. Chart is divided into sectors, each sector (and consequently its central angle and area), is proportional to the quantity it represents. Together, the sectors create a full disk.

IndexLabels describes each slice of doughnut chart. It is displayed next to each slice. If indexLabel is not provided, label property is used as indexLabel. If labels are not provided, y value is used as index label.

Cannot be combined with:Any other Chart type.




Doughnut Chart Specific Properties

Applies To Attribute Type Default Options/Examples
dataSeries/ dataPoint exploded Boolean false false, true
dataSeries/ dataPoint explodeOnClick Boolean true false, true
dataSeries startAngle Number 0 30, -45, 140..
dataSeries fillOpacity Number 1 .2,.4,1 etc
dataPoint legendText String “dataPoint1” “apple”, “mango”…


Basic Doughnut Chart

Try it Yourself by Editing the Code below.


Doughnut Chart With Additional Customization

Try it Yourself by Editing the Code below.



In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.

Comments 84

  1. The following code results in an error (Android slice of the chart moves (animated) to the left). Using Chrome on Android. Changing startAngle solves the problem.

    data: [
    {
    type: “doughnut”,
    startAngle: -90,
    dataPoints: [
    { y: 5, indexLabel: “Android” },
    { y: 3, indexLabel: “Apple iOS” },
    { y: 2, indexLabel: “Others” }
    ]

    Trying to draw chart using only one datapoint (100%) also results in problems (no tooltip displayed).

  2. since my upgrade to 1.3 my doughnut charts are much thicker than before, i tryed a lot of data-options of wich lineThickness: seems to be the correctest, but they all dont work.

    is it impossible to in/decrease the thickness of the doughnut-line ?

    please help!

  3. thanks for your reply, i tried it, but this only in/decreases the thickness of the lines to the labels and not the thickness of the circle itself !

  4. Thanks for your reply,

    so for anyone who is interested, you can adjust

    row 5965 in canvasjs.js ( v1.3.0 GA )

    var widthPercentage = 0.80;

    cheers

  5. Could it have label (text or number) in the center of doughnut? I try to find it in document but can not see it. Please give me suggestion. Thank you 🙂

  6. It works now! I think it might have some problem with the connection. By the way, I can make it follow with your example. Thank you so much.

  7. Hi am using boostrap carousel for 2 different Doughnut Charts , 1st one is working is fine but for second one , circel size is comming very big, somehow i controlled size of Doughnut Charts , after that tooptip is not working properly….

    • Hi am using boostrap carousel for 2 different Doughnut Charts , 1st one is working is fine but for second one , circel size is comming very big, somehow i controlled size of Doughnut Charts , after that tooptip is not working properly….how to make tooptip should work properly….. thanks in adavance

  8. 13 Hey,

    I tried to create JSON format as below line 34,39 of my own from PHP & mysql database. Everything is wright when debug but my graph isn’t coming up. Neither error message. Please help.

    Following are my codes.

    10 var title = ‘Nothing’,
    11 var type = ‘doughnut’,
    12 var array = ;

    13 for( var i in array) {
    14
    15 if ( count == 0 ) {
    16 element += ‘{y: ‘+array[i]+’,’+’ indexLabel: “‘+i+'”}’;
    17 } else {
    18 element += ‘, {y: ‘+array[i]+’,’+’ indexLabel: “‘+i+'”}’;
    19 }
    20 count++;
    21 }
    22
    23 var chart = new CanvasJS.Chart(“chartContainer”,
    24 {
    25 title: {
    26 text: title
    27 },
    28 data: [
    29 { type: type,
    30
    31 dataPoints: [
    32
    33 /*
    34 {y: 2, indexLabel: “Kaka'”},
    35 {y: 3, indexLabel: “Blackberry”},
    36 {y: 1, indexLabel: “Windows Phone”},
    37 {y: 5, indexLabel: “Others”},
    38 {y: 8, indexLabel: “Tashi”},
    39 {y: 2, indexLabel: “Paljor”}*/
    40 element,
    41 ]
    42 }
    43 ]
    44 });

  9. How to reduce the “Label Indication Line Height” (Gray Line) in donut chart. I don’t want big lengthy line. Can anyone help me to fix this issue ASAP.

    • saravanakumar,

      Sorry. As of now indexLabelLine’s length is calculated automatically and cannot be customized.

      • Can anybody else please help to solve this issue, since i am using this donut in mobile application and it is taking lengthy line. Please help me anybody to fix this issue.

  10. Possible to adjust the size of the inner circle? which another way, will adjust the size or thickness of the doughnut?

  11. Hello

    I am able to create a donut chart and am quite happy with the speed and presentation. However, the donut is positioned using ‘absolute’ which is causing havoc with my existing layout. I have the donut generated inside a div – but because of the absolute positioning, it is overlapping with another div. Any suggestions of how I can fix this? I have already set the width and height of the donut chart to 100 but it still overlaps

    Thanks
    SR

  12. Hello

    I have a rectangular container and the donut seems to always be positioned on the left side of the DIV. Is there anyway I can have the donut positioned in the center?

    Thanks
    SR

    • Doughnut is rendered at the center of the chartContainer. So Doughnut is not positioned on the left side instead the chartContainer itself is positioned to the left. Change chartContainer div’s position as “relative” instead of “absolute”.

  13. Hello

    While I render doughnut in a loop of data, doughnut chart zoomed in/out. Is it possible to make the chart zooming in/out off.

    Thanks.
    vignesh

  14. Hi

    In the event data is not present, can the chart present a default text? For example – ‘No Data available’

    • Pujitha,

      We are unable to reproduce the issue. Can you please create a fiddle with the issue. So, that we can look into it.

    • ShivaKrishna,

      Are you looking for this example? If you have a different requirements sharing any pictorial representation will help us to understand better.

  15. When making a doughnut chart at a small size, I lose outside-indexLabels that have smaller wedges (even if there is still room to draw them). I need ALL index labels to appear regardless of its percentage in the doughnut. Is there any way to change this?

    • indexLabels are automatically skipped even when there is not enough space for margin between them – in order to avoid cramming indexLabels too close. As of now we don’t have a way to avoid this behavior. But we’ll consider it in future versions.

In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.