HTML5 & JavaScript Doughnut Charts

CanvasJS Doughnut Charts are similar to pie charts except for a blank center. Doughnut is also referred to as donut charts - we use the former. CanvasJS Doughnut charts are beautiful, interactive and are based on HTML5 & JavaScript. Doughnut charts are useful when you want to visually compare contribution of various items to the whole. Examples include source code for all the graphs.

Click on any example below to see live demo
  • Animation and Customizability

    CanvasJS Doughnut Chart renders itself with a beautiful animation. You customize various properties like color of individual slices, label content and its position, starting angle, etc.
  • html5 doughnut chart
  • JavaScript Donut Chart
  • Interactivity

    CanvasJS Doughnut Charts are interactive and animated. Upon hovering on a slice, it becomes lighter in color in order to differentiate itself from the rest. On clicking on the slice, it explodes / implodes based on the current state.
  • JavaScript doughnut chart