Donut Chart | the D3 Graph Gallery

Note

It is of interest to note that donut chart and pie chart are built using exactly the same process in d3.js. Thus, you probably want to visit the pie section for more examples

Pie chart section

Step by step

Most basic

The most basic donut chart you can do in d3.js. Keeping only the core code.

Add annotation

Add annotation outside the chart using polylines

Selection of blocks

A selection of examples showing the application of the basic concept to real life dataset.

Pie chart with annotation

A pie chart by Mike Bostock with fancy annotation for each group.

Clean layout

Clean labeling of groups. Use d3 v3 though.

Pie chart with animation

Good illustration on how to animate transition between 2 input data.