Pie chart

Written byPhuoc Nguyen

Created

17 Nov, 2023

#Setting up the layout

Generating a pie chart is a simple process. A pie chart is usually placed in a circle. To begin, we divide the circle into two equal halves.

html

<div class="circle">
    <div class="circle__half circle__half--1"></div>
    <div class="circle__half circle__half--2"></div>
</div>

To create the chart, we rotate one half of the circle based on the percentage of progress being displayed, while the other half remains stationary as the chart's background. In the next section, we'll dive into the details of how to implement this idea.

#Positioning halves

To create a circle shape for our container, we can use the `border-radius` property and set it to 50%. This will round all four corners and voila! We have a perfect circle. Don't forget to specify the `height` and `width` of the circle to determine its size. If both values are the same, our circle will be perfectly round and symmetrical.

css

.circle {
    border-radius: 50%;
    height: 12rem;
    width: 12rem;
}

Both halves of the circle are positioned absolutely, so we need to change the `position` style to `relative`.

css

.circle {
    position: relative;
    overflow: hidden;
}

When creating a pie chart inside a circle, it's crucial to use the `overflow: hidden` property. This ensures that any parts of the pie chart that extend beyond the bounds of the circle are hidden from view, giving the chart a professional and polished look.

To position the two halves of the circle, we use `position: absolute` in CSS. This lets us place the elements anywhere we want within their parent container. Both halves should have a height of 50% and a width of 100%, so they each occupy half of the circle.

To ensure proper positioning, we also set `transform-origin: 50% 100%;`. This ensures that when we rotate one of the halves, it rotates around its bottom center point, which is exactly what we need to create a pie chart.

css

.circle__half {
    position: absolute;
    top: 0;
    height: 50%;
    width: 100%;
    transform-origin: 50% 100%;
}

To give the first half of the circle a background color, we can apply a CSS style to it. This will make the portion of the chart that represents completed progress have a solid color.

css

.circle__half--1 {
    background: rgb(99 102 241);
}

By using positioning properties, we can easily create a pie chart. We rotate one half of the circle based on the percentage of progress being displayed, while the other half remains stationary, acting as the chart's background.

To illustrate, let's say we want to display progress by rotating the second half of the circle. In the sample code below, we rotate it by 120 degrees:

css

.circle__half--2 {
    transform: rotate(120deg);
}

To make the second half of the circle transparent, we need to set its `background` property to `inherit`. This is because we only want the first half of the circle to have a solid color while the second half should be see-through to show the underlying container. By setting `background: inherit`, we tell the browser to use the same background color as its parent element. This creates a smooth transition between our pie chart and its surrounding container.

css

.circle__half--2 {
    background: inherit;
}

Take a look at the demo below:

Keep in mind that if you want to display a pie chart with a degree greater than 180, the second half must have the same background color as the first half.

css

.circle__half--2 {
    background: rgb(99 102 241);
    transform: rotate(60deg);
}

Here's an example of how to create a pie chart using 240 degrees.

#Conclusion

Pie charts are an excellent way to visually represent data. They help viewers quickly and easily understand how different parts relate to the whole. With pure HTML and CSS, creating a pie chart is simple and customizable.

In this post, we'll cover the basics of creating a pie chart in CSS. You'll learn how to position the circle halves using absolute positioning and `transform-origin`. We'll also discuss setting background colors for each half and rotating one half based on the progress percentage.

By using these techniques, you can create beautiful and informative pie charts that will impress your audience. Remember to keep it simple, avoid cluttering your chart with too much information, and label each slice clearly. Use colors sparingly to ensure viewers can easily understand what they're looking at.

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn