1752246148790

Perfect CSS Pie Chart Without JavaScript

Introduction

Pie charts are a popular way to visualize data, but many developers shy away from them due to the complexity of implementing them with JavaScript. What if you could create a stunning pie chart using only CSS? That’s right! In this post, we’ll explore how to create a perfect CSS pie chart without a single line of JavaScript.

Why Use CSS for Pie Charts?

Using CSS for pie charts offers several advantages:

  • Simplicity: No need to deal with JavaScript libraries.
  • Performance: CSS is generally lighter and faster.
  • Accessibility: CSS charts can be styled for better accessibility.

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

Step 1: Setting Up Your HTML Structure

To start, we need a simple HTML structure. Create a div that will hold our pie chart.

<div class="pie-chart">
    <div class="slice one"></div>
    <div class="slice two"></div>
    <div class="slice three"></div>
</div>

Step 2: Styling with CSS

Now, let’s dive into the CSS. Here’s how we can create the pie chart slices using the conic-gradient function.

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

.slice {
    position: absolute;
    width: 50%;
    height: 100%;
    clip-path: polygon(100% 0, 0% 0, 0% 100%);
}

.slice.one {
    background: conic-gradient(
        #ff5733 0%,
        #ff5733 25%,
        transparent 25%,
        transparent 100%
    );
}

.slice.two {
    background: conic-gradient(
        #33ff57 0%,
        #33ff57 50%,
        transparent 50%,
        transparent 100%
    );
    transform: rotate(90deg);
}

.slice.three {
    background: conic-gradient(
        #3357ff 0%,
        #3357ff 75%,
        transparent 75%,
        transparent 100%
    );
    transform: rotate(180deg);
}

Step 3: Responsive Design

To ensure your pie chart is responsive, utilize vw and vh units. Here’s how to adjust your width and height:

.pie-chart {
    width: 20vw;
    height: 20vw;
    max-width: 200px;
    max-height: 200px;
}

Testing and Optimization

After creating your pie chart, it’s essential to test it across different browsers and devices. You can use the Responsive Simulator to check how your pie chart looks on various screen sizes.

FAQs

Can I add labels to the pie chart?

Yes! You can overlay text elements on the pie chart slices using absolute positioning.

How can I change the slice colors?

Simply modify the color values in the background property of each .slice.

Is this method SEO-friendly?

Yes, since the CSS pie chart doesn’t depend on JavaScript, it can be indexed better by search engines.

Conclusion

Creating a pie chart using only CSS is not only possible but also an efficient way to visualize data without relying on JavaScript. With the clean and elegant solution provided, you can enhance your web projects. Don’t forget to optimize your CSS with our CSS Minifier to improve loading times. For more tools that can help with your web development, check out WebToolsLab (All Tools).

Scroll to Top