Standalone Examples » Basic Donut Chart

This is a basic donut chart that uses most of the default settings. Check out the size.pieInnerRadius setting. That's what turns it into a donut chart. We also added the title to appear in the center, just 'cause it looks nice.

var pie = new d3pie("pie", {
  header: {
    title: {
      text: "A Simple Donut Pie"
    },
    location: "pie-center"
  },
  size: {
    pieInnerRadius: "80%"
  },
  data: {
    sortOrder: "label-asc",
    content: [
      { label: "JavaScript", value: 1 },
      { label: "Ruby", value: 2 },
      { label: "Java", value: 3 },
      { label: "C++", value: 2 },
      { label: "Objective-C", value: 6 }
    ]
  }
});