Top 5 online CSS minifier tools for developers reviewed

Perfect CSS Pie Chart Without JavaScript

Introduction

Pie charts are a popular choice for data visualization, allowing viewers to quickly grasp proportions and relationships between parts of a whole. While JavaScript libraries often handle such visualizations, it is entirely possible to create a stylish pie chart using only CSS. In this guide, we’ll walk you through the steps to create a perfect CSS pie chart, sans JavaScript!

Step-by-Step Guide to Creating a CSS Pie Chart

Step 1: Set Up Your HTML Structure

First, we need a simple HTML structure to hold our pie chart. Here’s an example:

<div class="pie-chart">
  <div class="slice slice1"></div>
  <div class="slice slice2"></div>
  <div class="slice slice3"></div>
  <div class="slice slice4"></div>
</div>

Step 2: Add Basic CSS

Next, we need to style our pie chart slices. Here’s a basic CSS setup:

.pie-chart {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
}

.slice {
  position: absolute;
  width: 50%;
  height: 100%;
  background: transparent;
  clip: rect(0px, 100px, 200px, 0px);
}

Step 3: Create the Slices

Now, we’ll define each slice using the `transform` property to rotate them accordingly.

.slice1 {
  background: red;
  transform: rotate(0deg);
}

.slice2 {
  background: blue;
  transform: rotate(90deg);
}

.slice3 {
  background: green;
  transform: rotate(180deg);
}

.slice4 {
  background: yellow;
  transform: rotate(270deg);
}

Step 4: Add Styles for a Circular Effect

To achieve a circular look for each slice, we can use the `clip-path` property:

.slice1, .slice2, .slice3, .slice4 {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

Step 5: Final Touches

You can adjust the colors, add borders, or even shadows to enhance the appearance of your pie chart. Here’s an example:

.slice {
  border: 2px solid #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

Complete CSS Example

Here’s the entire CSS code for your pie chart:

.pie-chart {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
}

.slice {
  position: absolute;
  width: 50%;
  height: 100%;
  background: transparent;
  clip: rect(0px, 100px, 200px, 0px);
  border: 2px solid #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.slice1 {
  background: red;
  transform: rotate(0deg);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.slice2 {
  background: blue;
  transform: rotate(90deg);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.slice3 {
  background: green;
  transform: rotate(180deg);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.slice4 {
  background: yellow;
  transform: rotate(270deg);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

FAQs

Can I animate the pie chart?

Yes! You can use CSS transitions to animate the slices when they are displayed. Just add a transition property to the slice classes.

Is it responsive?

To make your pie chart responsive, consider using percentages for width and height, or use media queries to adjust styles based on screen size.

How can I optimize my CSS?

You can use tools like the CSS Minifier to reduce the file size of your CSS for better performance.

Conclusion

Creating a pie chart with pure CSS is not only a fun exercise but also a practical solution for simple data visualization needs. With the steps outlined in this guide, you can easily implement a responsive and aesthetically pleasing pie chart without relying on JavaScript. For more tools to enhance your web development projects, check out WebToolsLab (All Tools).

Scroll to Top