HTML5 & JS Doughnut Charts

Comments 84

1. nice….it help me out…thank you.

2. 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).

3. I can confirm that the above described error with startAngle -90 also occurs on IE11 (Windows 7).

   • Simon,

     Thanks for reporting. I’ve just fixed the issue. Here is a new build with the fix.

     https://canvasjs.com/wp-content/uploads/misc/int-builds/canvasjs-1.4.0-beta-int2.zip

     Please note that this is an internal build and is still under development. In case you face any issue, please use the stable version by setting startAngle to -89.99 as a temporary measure and it should work fine.

4. 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!

   • You can use indexLabelLineThickness https://canvasjs.com/docs/charts/chart-options/data/indexlabellinethickness/

5. 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 !

   • Sascha,

     As of now it is not possible to control the thickness of doughnut segments via API.

6. 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

7. Is it possible to show % on the doughnut itself?

8. 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 :)

   • Here is an example that shows how to display text at the center of doughnut.

     • The example prevents tooltips from working. Is there anyway to have text in the center and still have tooltips function?

       • Here is one more example that I created which shows toolTip http://jsfiddle.net/canvasjs/vw6tnh7t/

9. I’m not sure what’s wrong, but I can’t access the link that you gave.

   • I just checked once again and the link is working fine. What is the error that you are seeing?

10. 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.

11. Can I make the donought like incomplete? With a gap that is? My client wants that :)

    • Did you mean to say exploding individual dataPoints?…

      If not, here is one more example where I’ve added a dummy dataPoint with transparent color to create an effect of an incomplete doughnut.

      Hope this helps.

12. Sunil: Kind of…. I managed to do something similar here http://codepen.io/SubZane/pen/sHpey

    The end result looks exactly like I want it, but I would love to be able to turn off tooltips for that transparent area and keep them for the “enabled” yellow area..

13. 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

      • Please create a JSFiddle and post it in to our forum so that we can look into the issue.

14. how to make all charts responsive

    • Put your Charts inside a div’s, and set height and width properties with porcentual values in CSS :)

15. Can I set a specific color to data point and not use the color set?

    • tomer,

      Yes, you can do the same by setting color property of dataPoints/ dataSeries.

16. How do I put the Labels inside the circle, and make it appers only when the mouse hovers the plot, like this one: http://jsbin.com/ukaxod/144/embed?js,output

    • jose,

      Here is an example for the same. You can also customize it to work with click instead of mouseover.

17. How do I make a condition for hide (or don’t show) the indexlabel if the captured data is 0, empty or null ?

    • In order to hide any indexLabel you need to set it to empty string. Please refer this example.

      • Hey, thanks a lot, its exactly what I need :D

18. Can I add/update dynamic entries in this chart with ajax response

    • Yes, you can. Please refer to this section on updating the chart.

      • Thank you Anjali.

19. 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 });

    • You may need to put chart.render(); after this code

      • I did put that code…

        • Can you please create JSFiddle and post it in forum so that we can have a look?

20. 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.

21. Can I create more than one chart in single jsp…?

    • Hello,

      Please refer to this example.

22. How to change the width of the ring?

    • kylin,

      Sorry, this feature is not available yet. But we are implementing it in the next version.

      • Has this feature been added yet?

        • Yes. You can use innerRadius and radius properties to control doughnut’s size and ring width.

          • thanks :)

23. How to reduce(customize) radius of doughnut chart ?

    • This feature is not available yet.

    • We have just released v1.8.0 Beta which supports Syncing Multiple Chart Ranges, Vertical Zooming & Controlling Pie/Doughnut Radius. Please refer to the release blog for more information.

24. Is it possible to make multi series(nested) donut Charts????

    • Multi series Doughnut charts are not available yet.

25. hi, is it possible to also include Icons?

    • Tumelo,

      Can you explain how and where you want to include icons??

      • Can we have icons along with indexlabel

        • Sorry, but images are not supported in indexLabels yet.

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

    • Pau,

      We have implemented this feature and it’ll be released by the end of this week – v1.8.

      • thumbs up !!

    • We have just released v1.8.0 Beta which allows Controlling Pie/Doughnut radius/innerRadius. Please refer to the release blog for more information.

27. 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

28. 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”.

29. 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

    • Doughnut charts does not support zooming. Can you please create a jsfiddle for this so that we can have a look.

30. I would like to embed or nest one doughnut inside another. Is that possible?

    • No it is not possible. This feature is not available yet.

31. Can we have a border color around each slice of the doughnut chart?

    • I actually need a very little space in between each slice instead of them arrange nicely without gap

      • S Ling,

        Sorry, but border is not supported in doughnut/pie charts as of now.

        • Will it be supported anytime soon?

          • This feature is not supported and is also not on our road map as of now

32. Hi

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

    • Yeah it can be possible, just follow this fiddle

33. Is this pie chart render in outlook 2013 desktop version and other mail clients (yahoo and gmail)

    • They don’t render directly. But you can export chart and embed the image into the email.

34. if i am using canvasjs.min.js i am getting this._toolbar undefined

    • Pujitha,

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

35. How to remove white space in CanvasJS charts????

    • ShivaKrishna,

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

36. 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.