Creating the Perfect Pie Chart in CSS

Creating the Perfect Pie Chart in CSS

The quest for the perfect pie chart in CSS has led to a comprehensive solution that addresses semantics, customizability, and minimal JavaScript usage. Juan Diego Rodríguez’s article on CSS-Tricks delves into the technical details of crafting a pie chart that is both visually appealing and accessible.

Why This Matters

The pursuit of a perfect pie chart is not merely about aesthetics; it also involves ensuring that the chart is semantic, allowing screen readers to understand the data presented. The article highlights the shortcomings of using conic gradients alone, which lack semantic meaning and are not ideal for creating interactive or dynamic charts. The cost of not addressing these issues can result in charts that are inaccessible to users with disabilities, potentially affecting a significant portion of the audience.

Key Insights

• The conic-gradient() function can be used to create simple pie charts in CSS, but it lacks semantic meaning and is not suitable for creating interactive charts.
• Using data-* attributes and CSS variables can help create a semantic and customizable pie chart.
• JavaScript can be used to calculate the --accum variable, which is necessary for positioning the pie chart slices correctly.
• CSS Grid can be used to position the slices on top of each other, creating a cohesive pie chart.

Working Example

.pie-chart li {
  --radius: 20vmin;
  width: calc(var(--radius) * 2);
  aspect-ratio: 1;
  border-radius: 50%;
  --weighing: calc(attr(data-percentage type(<number>)) / 100);
  --percentage: calc(attr(data-percentage type(<number>)) * 1%);
  --bg-color: attr(data-color type(<color>));
  background: conic-gradient(
    from var(--offset),
    var(--bg-color) 0% var(--percentage),
    transparent var(--percentage) 100%
  );
}

Practical Applications

• Use Case: A data visualization dashboard can utilize this pie chart solution to display user engagement metrics, such as time spent on different features, in an accessible and customizable manner.
• Pitfall: Failing to consider semantic meaning and accessibility can result in charts that are unusable by a significant portion of the audience, leading to a poor user experience.

References:

• https://css-tricks.com/trying-to-make-the-perfect-pie-chart-in-css/
• https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient()