Another Stab at the Perfect CSS Pie Chart… Sans JavaScript!

Recently, Juan Diego Rodríguez published an excellent article exploring how far CSS can be pushed to build a semantic and customizable pie chart while keeping JavaScript to a minimum. Citing Juan himself: In this article, we’ll try making the perfect pie chart in CSS. That means avoiding as much JavaScript as possible while addressing major headaches that comes with handwriting pie charts. And it stated some goals that I want to go through again in order of priority: This must be semantic! Meaning a screen reader should be able to understand the data shown in the pie chart. To my understanding, the original article’s solution reached that goal. Its semantic approach (labels in plain HTML + values as attributes reinjected into the DOM via pseudo-elements) is clean, expressive, and hopefully accessible. This should be HTML-customizable! Once the CSS is done, we only have to change the markup to customize the pie chart. The original article reached that goal as well. This should keep JavaScript to a minimum! No problem with JavaScript in general, it’s just more fun this way. The original article aimed to use as little JavaScript as possible, mainly for fun. I tend to disagree slightly. For me, it should not be just for fun, since… JavaScript is there to deal with states and logic, and CSS is there to style the markup. The initial “no JavaScript” constraint was meaningful to me. CSS should be powerful enough to let us style a pie chart. JavaScript should not be required. So, I decided to see whether there was a way to 100% get rid of it and, for fun, forked the article’s CodePen during a lunch break. I kept the original code as unchanged as possible, preserving its semantic approach and HTML-side customizability. If It Ain’t Broke, Don’t Fix It™. Coincidentally, this article came right after a recent short pen of mine toying with bar charts . So I was already in the mood for charts. But bar charts are far easier: each bar’s position or size does not depend on the others