Teach you step by step how to use CSS to create dynamic pie charts (with code)

60%

We also add CSS variables as inline styles.

• --p: This variable should contain the percentage value as a number (without the % sign). It should be the same as the content.
• --b: This variable will define the thickness of the border.
• --c: This variable will define the main color.

For the sake of this article and demonstration, I used single-character variables to keep the code short. But when using code in a production environment, it's better to think about more explicit variables. Examples: --percentage, --border-thickness, and --main-color.

CSS Settings for Pie Chart

We start by styling our content. This part is easy, the code is as follows:

.pie {
  --w: 150px;
  width: var(--w);
  aspect-ratio: 1;
  display: inline-grid;
  place-content: center;
  margin: 5px;
  font-size: 25px;
  font-weight: bold;
  font-family: sans-serif;
}

I define the element as inline-grid using place-content: center. We aspect-ratio: 1 is used to ensure that the element remains square. We could also use height: var(--w), but it’s always good to learn and use new CSS properties.

You may be wondering why I use a variable to define the width instead of simply setting width: 150px. I need to know the value of the width for future use, so I define it as a variable .

All the rest of the CSS is very basic text styling. Feel free to update it.

Let's move on to the fun part - the main shape of our component. To do this, we will use a pseudo-element with the following style:

.pie:before{
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 0;
  background: conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
}

A pseudo-element that covers all areas, position: absolute This is done thanks to inset: 0 . Yes, it is a new CSS property, which is the abbreviation of top, right, bottom, and right.

You can read more here

https://developer.mozilla.org/en-US/docs/Web/CSS/inset

Then we turn it into a circle ( border-radius: 50%) and apply a conic-gradient(). Note that we defined the style as inline Usage of CSS variables (--c for color and --p for percentage).

So far this will give us the following results:

We are getting closer! This conic-gradient() gives us a two-color gradient. Primary color from 0% to p%, the rest is transparent color (defined with hexadecimal value #0000).

In order to keep only the border part, we will use amask to hide the middle part. This time we will use radial-gradient():

radial-gradient(farthest-side,red calc(99% - var(--b)),blue calc(100% - var(--b)))

The above as a background application will provide us with the following information:

Note the use of variables that define the border thickness--b (shown in blue above).

Now imagine that the red part is the invisible part and the blue part is the visible part. If we use the same gradient for the properties, this is what we will get:

Our pie chart contains one element and a few lines of CSS code .

.pie {
  --w:150px;
  
  width: var(--w);
  aspect-ratio: 1;
  position: relative;
  display: inline-grid;
  place-content: center;
  margin: 5px;
  font-size: 25px;
  font-weight: bold;
  font-family: sans-serif;
}
.pie:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 0;
  background: conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}

And HTML:

60%

How to add rounded edgesFor this I will add an extra gradient layer to round the edge, and add a pseudo element to round the other edge. Here is an illustration to understand the trick:

(1) Code for dome edge:

.pie:before {
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
}

Except,

We also added a radial-gradient() placed at the top with a size equal to the border thickness defined by --b. (2) Code for rounding the other side:

.pie:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: calc(50% - var(--b)/2);
  background: var(--c);
  transform: rotate(calc(var(--p)*3.6deg)) translate(calc(50% - var(--w)/2));
}

该inset属性将伪元素的大小设置为等于--b。请记住，它是top,right和bottom的简写left。如果我们有

left = right = 50% - b/2

这意味着我们从每一边移动到中心减去等于的偏移量b/2- 所以我们最终的宽度等于2*b/2 = b。高度的逻辑相同。

angle = percentage*360deg/100

@property --p{
  syntax: '';
  inherits: true;
  initial-value: 0;
}

@keyframes p {
  from {--p:0}
}

animation: p 1s .5s both;