Semi-Circle Pie Chart — Interactive Demo

About this chart

When a half donut works

Cutting the circle in half keeps what a donut does well, shares of a whole at a glance, in a shape twice as wide as it is tall. It sits well above a row of numbers or across the top of a page.

Good for

Dashboards where height is tight
Election-style results: seats or votes by party
Progress towards a goal, with the number underneath

Think twice when

Many slices: half a circle makes them twice as thin
Precise comparisons: use a bar chart
Audiences who might read the empty half as missing data

For developers

Get the code.

Built with amCharts 5, a JavaScript library. The JavaScript includes your theme and renderer (canvas or SVG); the JSON also follows the changes you make with the controls.

Docs:Pie chart Start and end angles Pie series

For projects that use npm: npm install @amcharts/amcharts5. See Getting started. The same chart as a JSON config. Chart Maker reads and writes this format, the library's JSON parser turns it into a chart, and the <am5-chart> element puts it on a page with no code.
How it reads: "type" is the class to create and "settings" what you would pass to its new() in code; "properties" fill in its parts, lists such as series and axes or templates such as columns.template; "refs" holds objects used in more than one place ("#series-0" stands for the one named series-0); a string starting with "@" takes a value from another object, such as "@series.get('fill')".

// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");

// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
  am5themes_Animated.new(root),
  am5themes_Responsive.new(root)
]);

// Create chart
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
// start and end angle must be set both for chart and series
var chart = root.container.children.push(am5percent.PieChart.new(root, {
  startAngle: 180,             // the arc starts at the left (0 is the right, angles go clockwise)...
  endAngle: 360,               // ...and ends at the right: the top half of a circle
  layout: root.verticalLayout,
  radius: am5.percent(70),     // the pie takes 70% of the space, leaving room for the labels
  innerRadius: am5.percent(50) // a hole half the pie's radius makes it a donut
}));

// Create series
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
// start and end angle must be set both for chart and series
var series = chart.series.push(am5percent.PieSeries.new(root, {
  startAngle: 180,
  endAngle: 360,
  valueField: "value",
  categoryField: "category",
  // labels sit next to their slices instead of lining up in columns at the sides
  alignLabels: false
}));

// the hidden state is a zero-width arc, so the series sweeps open from the left when it appears
series.states.create("hidden", {
  startAngle: 180,
  endAngle: 180
});

series.slices.template.setAll({
  cornerRadius: 5 // rounded slice corners
});

series.ticks.template.setAll({
  forceHidden: true // no lines from the slices to their labels
});

// Set data
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
series.data.setAll([
  { value: 10, category: "One" },
  { value: 9, category: "Two" },
  { value: 6, category: "Three" },
  { value: 5, category: "Four" },
  { value: 4, category: "Five" },
  { value: 3, category: "Six" },
  { value: 1, category: "Seven" }
]);

series.appear(1000, 100);

{
  "type": "PieChart",
  "settings": {
    "startAngle": 180,
    "endAngle": 360,
    "layout": {
      "type": "VerticalLayout"
    },
    "radius": {
      "type": "Percent",
      "value": 70
    },
    "innerRadius": {
      "type": "Percent",
      "value": 50
    }
  },
  "properties": {
    "series": [
      "#series-0"
    ]
  },
  "refs": [
    {
      "data-0": [
        {
          "value": 10,
          "category": "One"
        },
        {
          "value": 9,
          "category": "Two"
        },
        {
          "value": 6,
          "category": "Three"
        },
        {
          "value": 5,
          "category": "Four"
        },
        {
          "value": 4,
          "category": "Five"
        },
        {
          "value": 3,
          "category": "Six"
        },
        {
          "value": 1,
          "category": "Seven"
        }
      ]
    },
    {
      "series-0": {
        "type": "PieSeries",
        "settings": {
          "startAngle": 180,
          "endAngle": 360,
          "valueField": "value",
          "categoryField": "category",
          "alignLabels": false
        },
        "states": [
          {
            "key": "hidden",
            "settings": {
              "endAngle": 180,
              "startAngle": 180
            }
          }
        ],
        "properties": {
          "data": "#data-0",
          "slices": {
            "properties": {
              "template": {
                "settings": {
                  "cornerRadius": 5
                }
              }
            }
          },
          "ticks": {
            "properties": {
              "template": {
                "settings": {
                  "forceHidden": true
                }
              }
            }
          }
        }
      }
    }
  ]
}

More Pie & Donut demos.

All Pie & Donut demos All demos

Donut Chart

Variable-Radius Nested Donut Chart

Grainy Gradient Pie

Pie Chart