Attempting to Make the Excellent Pie Chart in CSS

Making it a pie chart

We now have our knowledge on paper. Now it’s time to make it seem like an precise pie chart. My first thought was, “This must be straightforward, with the markup executed, we are able to now use a conic-gradient()!”

Effectively… I used to be very incorrect, however not due to semantics, however how the CSS Cascade works.

Let’s peek once more on the conic-gradient() syntax. If we’ve the next knowledge:

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

…then we might write down the next conic-gradient():

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

This principally says: “Paint the primary coloration from 0 to fifteen%, the following coloration from 15% to 50% (so the distinction is 35%), and so forth.”

Do you see the difficulty? The pie chart is drawn in a single conic-gradient(), which equals a single ingredient. You could not see it, however that’s horrible! If we wish to present every merchandise’s weight inside data-percentage — making the whole lot prettier — then we would want a approach to entry all these percentages from the mother or father ingredient. That’s not possible!

The one manner we are able to get away with the simplicity of data-percentage is that if every merchandise attracts its personal slice. This doesn’t imply, nevertheless, that we are able to’t use conic-gradient(), however moderately we’ll have to make use of a couple of.

The plan is for every of this stuff to have their very own conic-gradient() portray their slice after which place all of them on high of one another:

To do that, we’ll first give every 

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

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

Then, we’ll get the data-percentage attribute into CSS utilizing attr() and its new sort syntax that permits us to parse attributes as one thing aside from a string. Simply beware that the brand new syntax is at the moment restricted to Chromium as I’m penning this.

Nevertheless, in CSS it is much better to work with decimals (like 0.1) as a substitute of percentages (like 10%) as a result of we are able to multiply them by different models. So we’ll parse the data-percentage attribute as a  after which divide it by 100 to get our share in decimal type.

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

We nonetheless want it as a share, which implies multiplying that consequence by 1%.

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

Lastly, we’ll get the data-color attribute from the HTML utilizing attr() once more, however with the  sort this time as a substitute of a :

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

Let’s put the --weighing variable apart for now and use our different two variables to create the conic-gradient() slices. These ought to go from 0% to the specified share, after which turn out to be clear afterwards:

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

I’m defining the beginning 0% and ending 100% explicitly, however since these are the default values, we may technically take away them.

Right here’s the place we’re at:

Maybe a picture will assist in case your browser lacks assist for the brand new attr() syntax:

Now that each one the slices are executed, you’ll discover every of them begins from the highest and goes in a clockwise route. We have to place these, , in a pie form, so our subsequent step is to rotate them appropriately to type a circle.

That is after we hit an issue: the quantity every slice rotates is determined by the variety of objects that precede it. We’ll need to rotate an merchandise by no matter measurement the slice earlier than it’s. It might be perfect to have an accumulator variable (like --accum) that holds the sum of the chances earlier than every merchandise. Nevertheless, as a result of manner the CSS Cascade works, we are able to neither share state between siblings nor replace the variable on every sibling.

And consider me, I attempted actually exhausting to work round these points. Nevertheless it appears we’re pressured into two choices:

1. Hardcode the --accum variable on every 
2.  ingredient.
3. Use JavaScript to calculate the --accum variable.

The selection isn’t that onerous if we revisit our targets: hardcoding --accum would negate versatile HTML since transferring an merchandise or altering percentages would drive us to manually calculate the --accum variable once more.

JavaScript, nevertheless, makes this a trivial effort:

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

let accum = 0;

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

With --accum out of the way in which, we are able to rotate every conic-gradient() utilizing the from syntax, that tells the conic gradient the rotation’s place to begin. The factor is that it solely takes an angle, not a share. (I really feel like a share also needs to work wonderful, however that’s a subject for an additional time).

To work round this, we’ll need to create yet one more variable — let’s name it --offset — that is the same as --accum transformed to an angle. That manner, we are able to plug the worth into every conic-gradient():

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

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

We’re trying so much higher!

What’s left is to put all objects on high of one another. There are many methods to do that, after all, although the simplest could be CSS Grid.

.pie-chart {
  show: grid;
  place-items: middle;
}

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

This little little bit of CSS arranges all the slices within the lifeless middle of the .pie-chart container, the place every slice covers the container’s solely row and column. They slices received’t collide as a result of they’re correctly rotated!

Aside from these overlapping labels, we’re in actually, actually good condition! Let’s clear that stuff up.

Positioning labels

Proper now, the identify and share labels contained in the