Creating a Simple Pie Chart in CSS using a Conic-Gradient
The easiest way to get a simple pie chart using only CSS.
Creating a quick pie chart is a common issue in web development. In fact, I came across the issue today and it took a while to find an easy solution that didn’t require strange calculations, CSS variables, or external libraries.
But after a while of searching, I came across a solution that uses the conic-gradient CSS property to create a simple pie chart. And while I agree that it isn’t the best-looking solution, it can certainly be a good option if you don’t need fancy animations and you just want a visual simple pie chart.
Creating a Simple Pie Chart
For this little showcase, I will just make an HTML file with the necessary boilerplate code. All relevant code will be shown throughout the article.
To create a visually pleasing pie chart we need to create some HTML elements. A simple div will do. If you only need to show one value, adding some centered text can create an even better chart as it provides two ways to show the data but we will do that later.
Start by creating the div and adding some style to make it a colored circle.
To add the data to be shown, we need to alter the background property to a conic-gradient with the values and colors, we want to represent. The basic CSS syntax for a conic-gradient is like this:
background: conic-gradient(
<color> <percentage start> <percentage end>,
...
);The final color will automatically go back to the start so you could omit the percentage end . Let’s look at how this looks in a real application.
Which produces the following lovely pie chart.
Now that we understand the basics we can add some simple styling like only showing the borders, adding text to represent a single value, etc.
Hollow pie chart
To create a hollow pie chart we simply add another full circle on top of the existing chart with the same color as your background. You can use the ::after pseudo-element for this.
But only adding another circle isn’t enough, we also need to center it. For this article, I’ll just use flexbox as it’s an easy way to center content in a div .
This will produce the following result.
Adding Centered Text
Adding some centered text is easy if we take the hollow chart as a base since it already uses flexbox to center its inner circle. The only thing we need to do is add a <span> element and set its z-index higher so it shows up. Then we can style it some more if we want to make it look better.
With these three simple snippets, we have the following result. And you can find the final code here!
Conclusion
I hope that this was useful for some of you! Please check out my other articles if you’ve enjoyed this one!
Thank you so much for reading and have an excellent day.
Consider supporting me by getting a Medium membership. It helps me out a lot, it won’t cost you anything extra, and you can read as many Medium articles as you like!
Follow me on Twitter and gm.xyz to keep up with me and my projects.
Check out Pixel Pizzas on Polygon.
