HTML5 & JS Pie Charts

A pie chart is a circular chart 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 pie chart. It is displayed next to each slice. If indexLabel is not provided, label property is used as indexLabel.

Cannot be combined with: Any other Chart type.

Pie Chart Specific Properties

Applies To Attribute Type Default Options/Examples
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 Pie Chart

Try Editing The Code

Pie Chart With Additional Customization

Try Editing The Code

  Integrations:    

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question

102 Comments

  1. Crash95 says:

    Not working perctly on IE 10.
    If i use attributes fontFamily, fontSize, i can see the Pie in IE, but working perfectly on Chrome

  4. Deepak says:

    i am replacing the value of “y” by 0, then why its “indexLabel” is printing… i am taking a dynamic data, and there is possibility that “y” may have value “0”. please any suggestion…

    • Sunil Urs says:

      zero is still a value isn’t it?… All graphs display dataPoints with 0 y value. In case you don’t want it to be displayed, you can either remove it from the series or set its indexLabel to empty string “”

  5. Deepak K Tomar says:

    yeap, did it by removing the indexLabel thanks Sunil… another thing i want to know, that i have 3-element and when i am giving 2-element value as “0” the tooltips isn’t displaying for the remaining element…

  6. Deepak K Tomar says:

    window.onload = function () {

    var chart = new CanvasJS.Chart(“chartContainer”,
    {

    data: [
    {
    type: “pie”,
    dataPoints: [

    { x: 10, y: 0 },
    { x: 20, y: 0},
    { x: 30, y: 50 },

    ]
    }
    ]
    });

    chart.render();
    }

    • Sunil Urs says:

      Sanjeev,

      Here is a jsfiddle that I created with two equal slices and its working fine. Can you please recreate the issue so that we can have a look?

  9. sanjeev says:

    it is working fine in your examples but in my file it is giving some error when start angle is 0,90 or 180, in all other angles it is working fine.

    • Sunil Urs says:

      Can you please create a jsfiddle with your data and post it in our forum?… We won’t be able to figure out the problem otherwise.

  11. Maximiliano says:

    can i hide some datapoints making a function like this in legend? i would like to filter my pie chart, thanks !

    legend:{
    cursor:”pointer”,
    itemclick: function(e){

    e.dataPoint.visible = false;
    chart.render();
    }
    }

  12. iurii says:

    Hello.
    How can i change dataPoints.y dynamic , for example by clicking some button that change, for example, Y value for first pie part? I am trying, but there is no success.
    Thanks!

    • Anjali says:

      Hi,

      Link which you have provided us is not showing any data. Any in general you need to make an Ajax request for getting your external data and assign that same on the client side. Before assigning you might have to parse the data if needed and convert it to the format required by CanvasJS.
      Here is an example.

  15. Amer says:

    I would like to slice the chart by clicking on LegendText. I tried by changing the x and y through itemclick() function of Legend but no luck. Is there any possible solution to it?

    Thanks

  19. Kaustubh Singh says:

    Is it possible to show the sum of all the y values of datapoints in a fixed div, which is not a tool tip but visible always?

    • Anjali says:

      Hello,

      In the next version (1.7) we have a new element called Subtitle which can be used to do the same. For now you can workaround this by showing the value outside the chart. You can also overlay the same on top of the chart if required.

  20. Syaz says:

    how to make editable pie chart? for example,if the coding go live, we don’t have to edit the value in html code. we just edit it live-ly. Please help.

  21. jandal487@gmail.com says:

    Hi guys,

    I am facing a problem in implementing these canvas charts. I am getting this error all the time when I execute “chart.render();” line after populating my chart variable dynamically with appropriate data (say for a simple Pie Chart):

    Uncaught TypeError: undefined is not a function

    and the error is at line:

    canvasjs.min.js:84

    I have also posted this question on stackoverflow, here is the question:

    http://stackoverflow.com/questions/30699356/uncaught-typeerror-in-rendering-canvasjs-chart

    Thanks in advance for your time.

    PS: I have carefully examined the dataPoints array (it contains data in valid format as required for the pie chart).

    • Anjali says:

      Without looking into your data it is not possible to guess the problem so please either create a jsfiddle with your data or post your data (here or on stack-overflow).

  23. Pauline says:

    Is it possible to change the color of the border around each pie slice? I want the border to be more defined.

  24. anu says:

    Hi Sunil, if the values for datapoints all 0, the pie chart is shown as blank, which may not be very user friendly, need to show some message. is that possible?

    • Anjali says:

      Anu,

      This is not possible via the chart API. But given that you have access to dataPoints, you can overlay a custom message at your end when there are not dataPonts available.

    • Evilcow83 says:

      Also, here is my data points if it helps. Thanks again!

      var chart = new CanvasJS.Chart(‘chartCanvas’, {
      animationEnabled: true, animationDuration: 2000,
      exportEnabled: true, exportFileName: ‘Testing’,
      zoomEnabled: true,
      title: { text: ‘Some Long Text String’ },
      data: [{ type: ‘pie’, dataPoints: [
      { y: 290, indexLabel: ‘Some Long Text String’ },
      { y: 94, indexLabel: ‘Some Long Text String’ },
      { y: 84, indexLabel: ‘Some Long Text String’ },
      { y: 70, indexLabel: ‘Some Long Text String’ },
      { y: 69, indexLabel: ‘Some Long Text String’ },
      { y: 53, indexLabel: ‘Some Long Text String’ },
      { y: 51, indexLabel: ‘Some Long Text String’ },
      { y: 48, indexLabel: ‘Some Long Text String’ },
      { y: 47, indexLabel: ‘Some Long Text String’ },
      { y: 47, indexLabel: ‘Some Long Text String’ },
      ]}]}); chart.render(); chart = {};

  26. Artyom says:

    Hi, how can I show the percentage of each pie sector on top of them? I know I can show them via the tooltip, but that’s another thing.

  27. manimaran.S says:

    defaultly pie chart taking dark gray background…but tried to override using backgroundColor: “#ECF0F1”,,,,still dark gray color is appearing…

  28. ArunKumar says:

    I want to create pie charts dynamically using for loop. is it Possible?

    Sometimes i need 4 and sometimes i need 5 so i want create using for loop.
    Thanks in advance

    • Naveen Venugopal says:

      There is nothing wrong with the code. jsfiddle is refer 1.8.0 Beta. Its a bug in Beta version. This will not be there in 1.8.0GA.

  31. Pavan says:

    I am trying to save the above example code in text file with .HTML extension and trying to open in IE. It’s not displaying any thing.
    Can you please explain me how to open the above example in internet explorer(IE).

    I have copied the code and save in ‘piechar.html’ file and trying to open it in IE.

  32. Moiez Siddiqui says:

    If i wanted to give the total count instead of giving % in the pie chart then how it should be done?

  35. Reena says:

    Hey Guys how can i display the % or text inside the chart,Instead when you mouse over the chart or when cursor pointer displaying the text.

  39. Memorymantra says:

    Hi Geeks!!
    Can I have a Pie chart in which following data satisfy
    data value
    A 50
    B 30
    C 20

    now there are are two instance of A like A1 and A2 which are 70% and 30% respectively of A. So How I should mention these in pie chart.

    • shailabhshailes says:

      CanvasJS is free for non commercial usage as long as the credit link in the bottom right corner is kept intact.

      So to use CanvasJS without the credit link, you would be required to purchase a license. For more info, visit license and EULA.

  43. Nitish Prabhu says:

    I am using Spring Boot – Thymleaf ;

    How to pass parameters from model.addAttribute(,) values to ”y” values..

    y: 4181563, indexLabel: “PlayStation 3”

    Please anybody provide solution

  45. Vivek says:

    Hi,

    amble to get dynamic pie charts…am displaying pie chart in a ..I want to enlarge(zoom) the chart on mouseover or onlick property…do we have any provision in canvas js for the same?

    • Vishwas R says:

      Tejas,

      You can bring up the blink effect in pie chart either by changing opacity of the dataSeries or by changing the color of the dataSeries on some events on it. Check this example where fillOpacity is changed on mouse-over the dataSeries.

If you have any questions, please feel free to ask in our forums. Ask Question