Welcome to a tutorial on how to create a simple donut chart using pure HTML and CSS. Want to display a pie chart in your project? But without using complicated third-party libraries? Yes, it is possible to draw a donut chart using only HTML CSS – Read on for the example!
ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
TDLR – QUICK SLIDES
Fullscreen Mode – Click Here
TABLE OF CONTENTS
DOWNLOAD & DEMO
Firstly, here is the download link to the example code as promised.
QUICK NOTES
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.
EXAMPLE CODE DOWNLOAD
Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
DONUT CHART DEMO
PURE CSS DONUT CHART
All right, let us now get into the steps of building a simple donut chart using HTML and CSS only.
PART 1) PIE CHART
1A) THE HTML
<!-- (A) DONUT CHART -->
<div class="donut"></div>
A <div class="donut">
is all the HTML we need to get started.
1B) THE CSS
/* (A) PIE CHART */
.donut {
/* (A1) CIRCLE */
width: 300px; height: 300px;
border-radius: 50%;
/* (A2) SEGMENTS */
background: conic-gradient(
red 0deg 80deg,
green 80deg 190deg,
blue 190deg 360deg
);
}
- (A1) Use
width: 300px height: 300px
to create a square, and addborder-radius: 50%
to turn it into a circle. - (A2) Next, we specify the segments using
conic-gradient
. As you already know, a full circle is 360 degrees. So we just specify the segments usingCOLOR START-DEGREE END-DEGREE
.
Yes, I know. This is a pie and not a donut. Have some patience, we will get into that in the next step.
PART B) DONUT CHART
2A) THE HTML
<!-- (A) DONUT CHART -->
<div class="donut"><div class="hole"></div></div>
How does one convert a pie into a donut? Punch a <div class="hole">
in the middle.
2B) THE CSS
/* (B) DONUT "CONVERSION" */
/* (B1) SMALLER CIRCLE */
.hole {
width: 180px; height: 180px;
border-radius: 50%;
background: #fff;
}
/* (B2) "CONVERT PIE TO DONUT" - CENTER SMALLER CIRCLE */
.donut {
display: flex;
align-items: center;
justify-content: center;
}
- (B1) That’s right. We create a smaller circle within the pie chart.
- (B2) Then using CSS flex, we center this smaller circle in the middle of the pie chart – This effectively “converts” the pie chart into a donut chart.
PART C) THE LEGEND
3A) THE HTML
<!-- (B) LEGEND -->
<div class="legend">
<div class="segment1"></div> <div>First</div>
<div class="segment2"></div> <div>Second</div>
<div class="segment3"></div> <div>Third</div>
</div>
Some other tutorials on the Internet do some “not-so-simple calculations” to put the labels/segments directly in the chart itself… I figured that is “too confusing”, and the easiest way is to create a separate legend.
3B) THE CSS
/* (C) LEGEND */
/* (C1) LEGEND CONTAINER */
.legend {
display: flex;
margin-top: 30px;
}
/* (C2) SEGMENTS */
.legend div { padding: 0 10px; }
.segment1 { background: red; }
.segment2 { background: green; }
.segment3 { background: blue; }
Lastly, there is not much of a mystery here. The legend is just a simple “flexbox legend bar”.
EXTRA BITS & LINKS
That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.
NOT GREAT FOR COMPLEX DONUTS
Of course, we can build simple donut charts using pure HTML and CSS. But when it comes to a complex multiple segments chart, it quickly becomes extremely painful with manual calculations and placements. So a little bit of Javascript to “automate” the calculation will do great – I shall leave that as a possible future update.
COMPATIBILITY CHECKS
- CSS Flexbox – CanIUse
- CSS Conic Gradient – CanIUse
CSS flex and conic gradient are well-supported on all modern “Grade A” browsers.
LINKS & REFERENCES
- Javascript Pie Chart – Code Boxx
- HTML CSS Gantt Chart – Code Boxx
- HTML CSS Bar Chart – Code Boxx
- HTML CSS Pie Chart – Code Boxx
- Example on CodePen – CSS Donut Chart
INFOGRAPHIC CHEATSHEET

THE END
Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!
Hi, this is so helpful thank u a lot!
I just would love to place the text in the middle of the hole.
Is there any possibility to do this?
Directly enter the text inside
<div class="hole">
.Set both donut and hole to centered flex – B2
.donut, .hole { ... }
Worked perfectly and satisfied my needs without requiring JavaScript. I’ve converted this into a Blazor component and can now use it whenever I need it. Thanks!