Semi-circle Donut Chart
A half-ring chart that shows proportions using only the top 180° of a donut — compact, elegant, and perfect for gauges, progress indicators, and dashboards with limited vertical space.
// 01 — The chart
What it looks like
A semi-circle donut chart used as a gauge showing 78% customer satisfaction. The filled arc and center label make the metric instantly readable.
// 02 — Definition
What is a semi-circle donut chart?
A semi-circle donut chart (also called a half-donut or gauge chart) is a variation of the standard donut chart that uses only the top 180 degrees of the ring. It displays proportions of a whole in a shape that naturally reads like a speedometer or progress meter.
By cutting the donut in half, you save vertical space — the chart is roughly half the height of a full donut while conveying the same proportional information. The flat bottom edge also creates a natural “baseline” that makes the chart feel more grounded and easier to read at a glance.
Semi-circle donuts are especially popular in KPI dashboards, where a single metric (like completion rate or satisfaction score) needs to be displayed as a proportion of a target. The center space is perfect for showing the numeric value.
Key insight: The semi-circle donut became popular with the rise of responsive dashboards in the 2010s, where vertical space is at a premium and widgets need to stack efficiently on mobile screens.
// 03 — Anatomy
Parts of a semi-circle donut chart
// 04 — Usage
When to use it — and when not to
- Displaying a single KPI as a percentage of a target (satisfaction, completion, utilization)
- Vertical space is limited — dashboards, mobile widgets, card layouts
- You want the visual weight of a gauge without the complexity of a full dial
- Showing 2–4 segments where the half-ring is easy to read
- Progress indicators that feel more polished than a simple bar
- You have more than 4 segments — the 180° arc is too small for many slices
- Precise comparison between segments is critical — use a bar chart
- You need to show change over time — use a line or area chart
- Your data doesn't represent parts of a meaningful whole
- A simple number or text label would be clearer than a chart
// 05 — Reading guide
How to read a semi-circle donut chart
Follow these steps to quickly extract meaning from any semi-circle donut.
Read the center label
The number in the middle is usually the key metric — a percentage, score, or count. This is the primary takeaway.
Identify the filled arc
The coloured portion sweeps from left to right. Its length relative to the full half-circle tells you how close the value is to 100%.
Check the scale endpoints
Look at the left and right labels (often 0% and 100%). These tell you the range. Some gauges use custom scales like 0–500 or $0–$10k.
Note the colour
Many semi-circle donuts use colour to encode performance — green for on-track, yellow for caution, red for below target.
Compare across multiple gauges
If the dashboard shows several semi-circle donuts side by side, compare filled arc lengths to quickly spot which metrics are strongest and weakest.
// 06 — Data format
What data do you need?
At minimum, you need a value and a maximum (or total). The chart calculates the filled arc as value / maximum × 180°.
For multi-segment semi-circle donuts, you need a set of categories and values that sum to a meaningful whole — exactly like a donut chart.
// Single-metric gauge
{ value: 78, max: 100, label: "Satisfaction" }
// Multi-segment
[
{ category: "Completed", value: 64 },
{ category: "In Progress", value: 22 },
{ category: "Remaining", value: 14 }
]// 07 — Construction
How to build one
Building a semi-circle donut is identical to building a full donut, except your arc spans only 180° (from 9 o’clock to 3 o’clock).
Define the semi-circle by computing start angle = π (left) and end angle = 0 (right), sweeping clockwise.
Map each value to a proportional angular span within the 180° range.
Draw concentric arcs using SVG <path> with arc commands. Inner radius creates the donut hole.
Place the center label at the midpoint of the semi-circle for the primary metric.
Add start/end labels at the flat baseline to show the scale range.
// 08 — Common mistakes
Mistakes to watch out for
Too many segments
With only 180° to work with, more than 3–4 segments create arcs too narrow to distinguish. Aggregate small categories into "Other" or switch to a bar chart.
Missing the center label
The whole point of the semi-circle donut is the at-a-glance metric in the center. Omitting it forces the reader to mentally estimate from the arc, defeating the purpose.
No scale indicators
Without 0% and 100% labels at the endpoints, the reader can't tell what the arc represents. Always label the baseline.
Using it for non-proportional data
A semi-circle donut implies "part of a whole." If your data isn't a percentage or fraction of something, the chart is misleading.
Inconsistent arc direction
Most semi-circle donuts fill from left to right. Reversing this without clear indicators confuses readers who expect the standard direction.
// 09 — Real-world examples
Where you’ll see it in the wild
Business dashboards
KPI widgets showing revenue targets, quota attainment, or NPS scores as half-donut gauges.
Health & fitness apps
Daily activity rings (steps, calories) displayed as semi-circle progress indicators on wearable devices.
Project management
Sprint progress shown as a semi-circle donut — completed vs remaining tasks — inside status reports.
Customer analytics
Satisfaction, churn risk, and engagement scores displayed as a row of half-donut gauges in executive dashboards.
// 10 — Quick reference
Key facts at a glance
Half-donut chart, gauge chart, semi-circular gauge
Single KPI display, progress tracking, compact dashboards
1–4 segments
180° (left to right)
D3.js, Chart.js, Highcharts, Tableau
Include the numeric value as text — don't rely on arc length alone
// 11 — Accessibility
Making it accessible
Semi-circle donuts are visual by nature, so extra care is needed for users who rely on assistive technologies.
Always include the numeric value as visible text — the center label is the primary accessible element
Use ARIA roles: role="img" on the SVG with a descriptive aria-label
Ensure sufficient colour contrast between filled and unfilled arcs (4.5:1 minimum)
Provide a text alternative in a <desc> element inside the SVG
Don't rely on colour alone to signal performance — add icons or text labels like "On track"
// 12 — Variations
Common variations
Single-metric gauge
One filled arc against a background track — the most common use case for KPI dashboards.
Multi-segment semi-donut
2–4 coloured arcs showing composition of a whole within the 180° range.
Nested semi-circles
Multiple concentric half-rings comparing different metrics at different radii.
Gradient fill
The arc uses a colour gradient (green→yellow→red) to encode performance thresholds along the sweep.
// 13 — FAQs
Frequently asked questions
What is a semi-circle donut chart?+
A semi-circle donut chart (also called a half-donut or gauge chart) is a variation of the standard donut chart that uses only the top 180 degrees of the ring. It displays proportions of a whole in a shape that naturally reads like a speedometer or progress meter.
When should you use a semi-circle donut chart?+
Use a semi-circle donut chart when displaying a single KPI as a percentage of a target (satisfaction, completion, utilization). It also works well when vertical space is limited — dashboards, mobile widgets, card layouts, and when you want the visual weight of a gauge without the complexity of a full dial.
When should you avoid a semi-circle donut chart?+
Avoid a semi-circle donut chart when you have more than 4 segments — the 180° arc is too small for many slices. It is also a poor fit when precise comparison between segments is critical — use a bar chart, or when you need to show change over time — use a line or area chart.
What data do you need to make a semi-circle donut chart?+
At minimum, you need a value and a maximum (or total). The chart calculates the filled arc as value / maximum × 180°.
How is a semi-circle donut chart different from a donut chart?+
Both a semi-circle donut chart and a donut chart can look similar at first glance, but they answer different questions. Reach for a semi-circle donut chart when the comparisons and patterns it was designed to reveal match what you need to communicate, and choose a donut chart when its particular strengths better fit your data and audience.
What is another name for a semi-circle donut chart?+
Semi-circle Donut Chart is also known as Half-donut chart, gauge chart, semi-circular gauge. The name varies between fields, but the visualisation technique is the same.
What size of dataset works best for a semi-circle donut chart?+
Semi-circle Donut Chart works best for Single KPI display, progress tracking, compact dashboards. Outside that range the chart either looks empty or becomes too cluttered to read clearly.
Are semi-circle donut charts accessible to screen readers?+
Semi-circle donuts are visual by nature, so extra care is needed for users who rely on assistive technologies.