Creating Pie Charts with HTML and CSS

Pie charts are a popular way to represent data in a visually appealing and easy - to - understand manner. They are used to show the proportion of different parts to the whole. While JavaScript libraries like Chart.js or D3.js are commonly used to create interactive and dynamic pie charts, it’s also possible to create simple static pie charts using just HTML and CSS. This blog post will guide you through the fundamental concepts, usage methods, common practices, and best practices of creating pie charts with HTML and CSS.

Table of Contents

  1. [Fundamental Concepts](#fundamental - concepts)
  2. [Usage Methods](#usage - methods)
  3. [Common Practices](#common - practices)
  4. [Best Practices](#best - practices)
  5. Conclusion
  6. References

Fundamental Concepts

HTML Structure

The basic HTML structure for a pie chart consists of a container element (usually a <div>) that will hold the individual slices of the pie. Each slice can be represented by a <div> as well. The container gives the overall shape and size of the pie chart, and the slices are positioned and sized to show the correct proportions.

CSS Styling

  • Border - Radius: To create the circular shape of the pie chart, we use the border - radius property. Setting border - radius: 50% on an element makes it a circle if its width and height are equal.
  • Transform: The transform property is used to rotate the slices to their correct positions. We can use transform: rotate(angle) where angle is specified in degrees.
  • Background - Color: Each slice of the pie chart can have a different background - color to distinguish them from one another.

Usage Methods

Step 1: Set up the HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial - scale = 1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Pie Chart</title>
</head>

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

</html>

Step 2: Style the Pie Chart with CSS

/* styles.css */
.pie - chart {
    width: 200px;
    height: 200px;
    border - radius: 50%;
    background: conic - gradient(
        #ff5733 0deg 120deg,
        #33ff57 120deg 240deg,
        #5733ff 240deg 360deg
    );
}

In the above CSS code, we first define the size and circular shape of the pie chart using width, height, and border - radius. Then, we use the conic - gradient function to create the different slices of the pie. Each color is specified along with the start and end angles in degrees.

Common Practices

Using Classes for Slices

When creating multiple slices, it’s a good practice to use classes for each slice. This makes the code more modular and easier to manage. For example:

.slice {
    position: absolute;
    width: 100%;
    height: 100%;
    border - radius: 50%;
}

.slice1 {
    background - color: #ff5733;
    clip - path: polygon(50% 50%, 100% 0, 100% 100%);
}

.slice2 {
    background - color: #33ff57;
    transform: rotate(120deg);
    clip - path: polygon(50% 50%, 100% 0, 100% 100%);
}

.slice3 {
    background - color: #5733ff;
    transform: rotate(240deg);
    clip - path: polygon(50% 50%, 100% 0, 100% 100%);
}

Here, we first define the common properties for all slices in the .slice class. Then, we define the specific properties for each slice, such as background color and rotation.

Adding Legends

Legends are used to explain what each slice of the pie chart represents. We can add a simple HTML list for the legend:

<ul class="legend">
    <li><span class="legend - color slice1 - color"></span> Category 1</li>
    <li><span class="legend - color slice2 - color"></span> Category 2</li>
    <li><span class="legend - color slice3 - color"></span> Category 3</li>
</ul>

.legend - color {
    display: inline - block;
    width: 15px;
    height: 15px;
    margin - right: 5px;
}

.slice1 - color {
    background - color: #ff5733;
}

.slice2 - color {
    background - color: #33ff57;
}

.slice3 - color {
    background - color: #5733ff;
}

Best Practices

Responsive Design

To make the pie chart responsive, we can use relative units like percentages for width and height. For example:

.pie - chart {
    width: 50%;
    height: auto;
    border - radius: 50%;
    background: conic - gradient(
        #ff5733 0deg 120deg,
        #33ff57 120deg 240deg,
        #5733ff 240deg 360deg
    );
}

This way, the pie chart will resize according to the size of its parent container.

Accessibility

To make the pie chart accessible, we can add ARIA (Accessible Rich Internet Applications) attributes. For example, we can add role="img" to the pie chart container and provide a aria - label to describe what the pie chart represents:

<div class="pie - chart" role="img" aria - label="Pie chart showing the distribution of three categories">
    <div class="slice slice1"></div>
    <div class="slice slice2"></div>
    <div class="slice slice3"></div>
</div>

Conclusion

Creating pie charts with HTML and CSS is a great way to add simple data visualizations to your web pages without relying on JavaScript libraries. By understanding the fundamental concepts of HTML structure and CSS styling, you can create visually appealing and accessible pie charts. Remember to follow common and best practices such as using classes, adding legends, making the chart responsive, and ensuring accessibility.

References