Attempting to Make the Excellent Pie Chart in CSS

Making it a pie chart

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

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

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

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

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

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

This mainly 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 problem? The pie chart is drawn in a single conic-gradient(), which equals a single component. You might not see it, however that’s horrible! If we wish to present every merchandise’s weight inside data-percentage — making every part prettier — then we would wish a approach to entry all these percentages from the mum or dad component. That’s unattainable!

The one method 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, nonetheless, that we are able to’t use conic-gradient(), however somewhat we’ll have to make use of multiple.

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 prime 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 presently restricted to Chromium as I’m scripting 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 items. So we’ll parse the data-percentage attribute as a  after which divide it by 100 to get our proportion in decimal type.

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

We nonetheless want it as a proportion, 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 proportion, after which grow 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 help for the brand new attr() syntax:

Now that each one the slices are achieved, you’ll discover every of them begins from the highest and goes in a clockwise path. We have to place these, you realize, 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 relies on the variety of objects that precede it. We’ll should rotate an merchandise by no matter measurement the slice earlier than it’s. It will be perfect to have an accumulator variable (like --accum) that holds the sum of the chances earlier than every merchandise. Nevertheless, because of the method 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. However it appears we’re pressured into two choices:

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

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

JavaScript, nonetheless, 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 best way, we are able to rotate every conic-gradient() utilizing the from syntax, that tells the conic gradient the rotation’s start line. The factor is that it solely takes an angle, not a proportion. (I really feel like a proportion must also work advantageous, however that’s a subject for one more time).

To work round this, we’ll should create yet one more variable — let’s name it --offset — that is the same as --accum transformed to an angle. That method, 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 quite a bit higher!

What’s left is to put all objects on prime of one another. There are many methods to do that, in fact, although the best could be CSS Grid.

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

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

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

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

Positioning labels

Proper now, the identify and proportion labels contained in the