Pie charts are common components that let you show portions of a whole, and you can use them for many different purposes.
You will find a lot of articles around building such a component, but they typically either rely on SVG or a lot of HTML elements.
In this post, I will show you how to create a pie chart using CSS and only one element.
Below is an overview of what we are building:Click to see the full code
CSS-Only Pie Chart
As you can see in the CodePen above, we have a static pie chart, an animated one, and we can also have rounded edges. All this with a single
In addition to that, we can easily adjust the different values using CSS variables so we don't have to bother ourselves with changing the CSS code.
I know the code may look a bit difficult at first glance, but after reading through the explanation below you will be able to confidently make your own pie charts.
The HTML Structure for the Pie Chart
As I mentioned above, we have a single
7 where we add the percentage value (the progress of the pie chart) as the main content:
We also add the CSS variables as inline styles.
For the sake of this article and the demo, I am using a one-character variable to keep the code short. But it's better to consider more explicit variables when using the code in a production environment. Examples:
The CSS Setting for the Pie Chart
We first start by styling our content. This part is easy and the code is as follows:
I am defining the element as
6 to easily place the content at the middle using
7. We use
8 to make sure the element remains square. We can also use
9 but it's always good to learn and use a new CSS property.
You may wonder why I am using a variable to define the width instead of simply setting
0. I need to know the value of the width for future usage so I am defining it as a variable.
All the remaining CSS is pretty basic to style the text. Feel free to update it as you want.
Let's move on to the interesting part – the main shape of our component. For this, we will use a pseudo element with the following styles:
A pseudo-element that has
1 covers all the area thanks to
2. Yes, it's again a new CSS property which is the shorthand for
4 (which you can read more about here).
Then we make it a circle (
7) and we apply a
8. Note the use of the CSS variables we defined as inline styles (
2 for the color and
9 for the percentage).
Until now, this will give us the following result:
Conic-gradient applied to pseudo-element
We are getting closer! The
8 is giving us a two-color gradient. From
3 the main color and the remaining part is a transparent color (defined with the hexadecimal value
To keep only the border part we will use a
5 to hide the middle part. We will use a
6 this time:
The above applied as a background will give us the following:
Illustration of the radial-gradient
Note the use of the variable
1 that defines the thickness of the border (shown as blue in the above).
Now imagine the red part being the invisible part and the blue part the visible one. This is what we will get if we use the same gradient with the
Applying mask to the pseudo element
We have our pie chart with one element and a few lines of CSS code.
And the HTML:
How to add the the rounded edges
For this I will add an extra gradient layer to round the top edge and a pseudo element to round the other edge. Here is an illustration to understand the trick:
Illustration of the rounded edges
The code for (1) to round the top edge:
In addition to the
8 we add a
6 placed at the top that has a size equal to the border thickness defined by
The code for (2) to round the other edge:
2 property is setting the size of the pseudo-element to be equal to
1. Remember that it's the shorthand for
7. If we have
this means that from each side we are moving to the center minus an offset equal to
8 – so we end up having a width equal to
9. Same logic for the height.
Now we need to correctly place our element, which is why we use the transform property. Our element is initially placed at the center so we need to first rotate it. Having the percentage we use the "" to get the angle:
Then we do a translation, and here we will need the width because we have to perform a translation by half the width (
Ok, ok – you might be a bit lost within all these formulas. Find below an illustration to understand the logic behind the transform property
Applying the transform property to the pseudo-element
After that, we color the pseudo-element with the main color
2 and we are done. We have our pie chart with rounded edges.
How to Animate the Pie Chart
A static pie chart is good but an animated one is better! To do this we will animate the percentage value
3 to the defined value. By default, we cannot animate CSS variables, but thanks to the new
4 feature it's now possible.
We register the variable:
We create a
Note that we only need to specify the
6. Doing this, the browser will make the
7 equal, by default, to the value we defined (
And finally, we call the animation. You can define the duration/delay as you want.
Unfortunately, this technique is not widely supported. You can test it on Chromium-based browsers (Chrome and Edge) but it will fail on Firefox and Safari. You can check out Can I Use to keep track of the support.
Before we end, here again is the full code and a demo of the final working product. You can see that I am using two classes to control the rounded edges and the animation so we can easily add/remove them as needed.
Thank you for reading!
For more CSS tips, follow me on Twitter.
A CSS Hacker
A CSS Hacker
If you read this far, tweet to the author to show them you care. Tweet a thanks
Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started
How to make pie chart in HTML?
You can create a Pie Chart in HTML using a simple CSS function called conic-gradient . First, we add a <div> element to our HTML page, which acts as a placeholder for our pie chart. And finally we are ready to populate the pie chart with our data.
How to create pie chart in CSS?
The CSS Setting for the Pie Chart We use aspect-ratio: 1 to make sure the element remains square. We can also use height: var(--w) but it's always good to learn and use a new CSS property. You may wonder why I am using a variable to define the width instead of simply setting width: 150px .
How to create charts in HTML?
For creating the chart, we must initialize the chart class and our canvas element and "2D" drawing context and call the pie method..
<! Doctype HTML>.
<canvas id="pieChartLoc" height="300" width="300"></canvas>.
Create an HTML page. The very first thing you need to do is to create a file in which you will put your chart later. ... .
Reference all necessary files. The second step is about adding links into the <head> section. ... .
Put the data together. ... .
Write the chart code..