CSS3 simple donut chart

2 min read 07-10-2024

Creating a Simple Donut Chart with CSS3

Donut charts are a popular and visually appealing way to represent data, particularly when comparing parts of a whole. While creating them might seem complex, CSS3 provides an elegant and straightforward method for achieving this.

This article will guide you through the process of building a basic donut chart using CSS3, providing a foundational understanding for further customization and enhancements.

Understanding the Concept

The core idea behind building a CSS donut chart is to leverage the power of CSS Shapes and background gradients. We'll create a circular base element and then overlay it with another circular element with a transparent center, creating the characteristic donut shape.

Implementing the Donut Chart

Let's begin with a simple HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Donut Chart</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="donut-chart">
    <div class="circle"></div>
  </div>
</body>
</html>

Now, let's style it using CSS:

.donut-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  margin: 50px auto;
}

.circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #f0f0f0;
  position: absolute;
  top: 0;
  left: 0;
  background-clip: content-box;
  padding: 25%;
  border: 10px solid #3498db;
  box-sizing: border-box;
}

Explanation:

donut-chart: This class creates a circular base using border-radius: 50% and defines its size.
circle: This class defines the inner circle with a transparent center achieved by setting background-clip: content-box and applying padding. The border property creates the colored ring.

Adding Data and Customization

To represent data, we can use CSS variables and dynamically change the border-color and padding of the circle element:

.donut-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  margin: 50px auto;
}

.circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #f0f0f0;
  position: absolute;
  top: 0;
  left: 0;
  background-clip: content-box;
  border: 10px solid var(--color, #3498db);
  box-sizing: border-box;
  padding: var(--padding, 25%);
}

.donut-chart.chart1 {
  --color: #2ecc71;
  --padding: 10%;
}

.donut-chart.chart2 {
  --color: #e74c3c;
  --padding: 35%;
}

Now, you can create multiple donut charts with different data by adding classes like chart1 and chart2 to your HTML elements.

Enhancements and Possibilities

Animations: You can create visually engaging charts by animating the padding or border-width of the circle using CSS transitions or animations.
Text Labels: Add a div element inside the donut-chart to display data labels within the donut.
Multiple Rings: Create more complex donut charts by stacking multiple circle elements with different sizes and colors.

Conclusion

This simple approach using CSS3 allows you to easily create visually appealing donut charts. The flexibility of CSS customization empowers you to create unique and dynamic representations of data within your web projects. Remember to experiment with different color palettes, sizes, and animations to create captivating and informative visualizations.