Trying to Make the Perfect Pie Chart in CSS | CSS-Tricks

Making it a pie chart

We have our data on paper. Now it’s time to make it look like an actual pie chart. My first thought was, “This should be easy, with the markup done, we can now use aconic-gradient()!”

Well… I was very wrong, but not because of semantics, but how the CSS Cascade works.

Let’s peek again at theconic-gradient() syntax. If we have the following data:

• Item 1: 15%
• Item 2: 35%
• Item 3: 50%

…then we would write down the followingconic-gradient():

.gradient {
  background: 
    conic-gradient(
      blue 0% 15%, 
      lightblue 15% 50%, 
      navy 50% 100%
    );
}

This basically says: “Paint the first color from 0 to 15%, the next color from 15% to 50% (so the difference is 35%), and so on.”

Do you see the issue? The pie chart is drawn in a singleconic-gradient(), which equals a single element. You may not see it, but that’s terrible! If we want to show each item’s weight insidedata-percentage — making everything prettier — then we would need a way to access all these percentages from the parent element. That’s impossible!

The only way we can get away with the simplicity ofdata-percentageis if each item draws its own slice. This doesn’t mean, however, that we can’t useconic-gradient(), but rather we’ll have to use more than one.

The plan is for each of these items to have their ownconic-gradient()painting their slice and then place them all on top of each other:

To do this, we’ll first give each

.pie-chart li {
  --radius: 20vmin;

  width: calc(var(--radius) * 2); /* radius twice = diameter */
  aspect-ratio: 1;
  border-radius: 50%;
}

Then, we’ll get thedata-percentageattribute into CSS usingattr()and itsnew type syntax that allows us to parse attributes as something other than a string. Just beware that the new syntax is currently limited to Chromium as I’m writing this.

However, in CSS it is far better to work with decimals (like0.1) instead of percentages (like10%) because we can multiply them by other units. So we’ll parse thedata-percentageattribute as aand then divide it by100to get our percentage in decimal form.

.pie-chart li {
  /* ... */
  --weighing: calc(attr(data-percentage type()) / 100);
}

We still need it as a percentage, which means multiplying that result by1%.

.pie-chart li {
  /* ... */
  --percentage: calc(attr(data-percentage type()) * 1%);
}

Lastly, we’ll get thedata-colorattribute from the HTML usingattr()again, but with thetype this time instead of a :

.pie-chart li {
  /* ... */
  --bg-color: attr(data-color type());
}

Let’s put the --weighing variable aside for nowand use our other two variables to create theconic-gradient()slices. These should go from 0% to the desired percentage, and then become transparent afterwards:

.pie-chart li {
  /* ... */
   background: conic-gradient(
   var(--bg-color) 0% var(--percentage),
   transparent var(--percentage) 100%
  );
}

I am defining the starting 0% and ending 100% explicitly, but since those are the default values, we could technically remove them.

Here’s where we’re at:

Perhaps an image will help if your browser lacks support for the new attr() syntax:

Now that all the slices are done, you’ll notice each of them starts from the top and goes in a clockwise direction. We need to position these, you know, in a pie shape, so our next step is to rotate them appropriately to form a circle.

This is when we hit a problem: the amount each slice rotates depends on the number of items that precede it. We’ll have to rotate an item by whatever size the slice before it is. It would be ideal to have an accumulator variable (like --accum) that holds the sum of the percentages before each item. However, due to the way the CSS Cascade works, we can neither share state between siblings nor update the variable on each sibling.

And believe me, I tried really hard to work around these issues. But it seems we are forced into two options:

1. Hardcode the--accumvariable on each
2. element.
3. Use JavaScript to calculate the--accumvariable.

The choice isn’t that hard if we revisit our goals: hardcoding--accumwould negate flexible HTML since moving an item or changing percentages would force us to manually calculate the--accumvariable again.

JavaScript, however, makes this a trivial effort:

const pieChartItems = document.querySelectorAll(".pie-chart li");

let accum = 0;

pieChartItems.forEach((item) =>; {
  item.style.setProperty("--accum", accum);
  accum += parseFloat(item.getAttribute("data-percentage"));
});

With--accumout of the way, we can rotate eachconic-gradient()using thefromsyntax, that tells the conic gradient the rotation’s starting point. The thing is that it only takes an angle, not a percentage. (I feel like a percentage should also work fine, but that’s a topic for another time).

To work around this, we’ll have to create yet another variable — let’s call it--offset— that is equal to --accumconverted to an angle. That way, we can plug the value into eachconic-gradient():

.pie-chart li {
  /* ... */
  --offset: calc(360deg * var(--accum) / 100);

  background: conic-gradient(
    from var(--offset),
    var(--bg-color) 0% var(--percentage),
    transparent var(--percentage) 100%
  );
}

We’re looking a lot better!

What’s left is to place all items on top of each other. There are plenty of ways to do this, of course, though the easiest might be CSS Grid.

.pie-chart {
  display: grid;
  place-items: center;
}

.pie-chart li {
  /* ... */
  grid-row: 1;
  grid-column: 1;
}

This little bit of CSS arranges all of the slices in the dead center of the .pie-chart container, where each slice covers the container’s only row and column. They slices won’t collide because they’re properly rotated!

Except for those overlapping labels, we’re in really, really good shape! Let’s clean that stuff up.

Positioning labels

Right now, the name and percentage labels inside the