Home › docs › charts › chart types › Pie Chart

Pages

open all | close all

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 it Yourself by Editing the Code below.

Pie Chart With Additional Customization

Try it Yourself by Editing the Code below.


  Integrations:    

  Also See:    


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

Comments 102

  1. 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. 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…

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

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

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

    • 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. 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. 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?

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

    • 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. Is it possible to change the color of the border around each pie slice? I want the border to be more defined.

  24. 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?

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

    • 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. 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. defaultly pie chart taking dark gray background…but tried to override using backgroundColor: “#ECF0F1”,,,,still dark gray color is appearing…

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

    • 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. 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. If i wanted to give the total count instead of giving % in the pie chart then how it should be done?

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

    • 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. 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. 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?

    • 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

© fenopix
About Us
FAQs
Careers
Privacy Policy

Server Side Technologies
ASP.NET MVC Charts
PHP Charts
JSP Charts
Spring MVC Charts

Front End Technologies
JavaScript Charts
jQuery Charts
React Charts
Angular Charts
JavaScript StockCharts

Contact
Fenopix, Inc.
2093 Philadelphia Pike,
#5678, Claymont,
Delaware 19703
United States Of America

Server Side Technologies
Front End Technologies
Contact
ASP.NET MVC Charts JavaScript Charts FAQs
PHP Charts jQuery Charts Sales Enquiries
Spring MVC Charts React Charts Support Forum
JSP Charts Angular Charts Careers
JavaScript StockCharts

Privacy Policy  © fenopix