jQuery Doughnut Charts are similar to pie charts except for a blank center. Doughnut Chart, also referred to as Donut Charts are useful when you want to visually compare contribution of various items to the whole. Below example shows a simple jQuery Doughnut Chart along with HTML source code that you can edit in-browser or save to run it locally.
window.onload = function () { var options = { animationEnabled: true, title: { text: "ACME Corporation Apparel Sales" }, data: [{ type: "doughnut", innerRadius: "40%", showInLegend: true, legendText: "{label}", indexLabel: "{label}: #percent%", dataPoints: [ { label: "Department Stores", y: 6492917 }, { label: "Discount Stores", y: 7380554 }, { label: "Stores for Men / Women", y: 1610846 }, { label: "Teenage Specialty Stores", y: 950875 }, { label: "All other outlets", y: 900000 } ] }] }; $("#chartContainer").CanvasJSChart(options); }
radius & innerRadius properties can be used to customize the size of doughnut charts. Some other frequently used customizations options are startAngle, indexLabelPlacement, exploded, etc.