How to create Pie Chart within few minutes?

If you regularly follow our post from the beginning or if you have knowledge on CSS then this article will be very interesting for you. We saw pie chart in several web sites and applications which generally show site or business health, and most of the time we use third party or complicated paid version pie chart. But today we will learn that how you can easily create pie chart within few minutes.

We can create different type of pie chart but today we will discuss on only one pie chart which help you to create any kind of pie chart using the same concept.

Before start discussing about the topic you can see image below to know that what you actually going to do.

0%

20%

40%

60%

80%

So let's start from HTML where you have to create a circle using CSS properties.

<div class=”pie-chart”></div>

Now the time to get circle shape using following CSS properties.

0%

.pie-chart {
  width: 200px; 
  height: 200px;
  border-radius: 50%;
  background: #ff0000;
}

The above width and height property will give you the pie chart size which you can change based on your requirement and hopefully don’t necessary to discuss about each CSS properties and if you wants to know more about the CSS properties then you have read our previous posts on CSS. So now we need to add different color in half circle using simple linear gradient. Add one more CSS property on above class.

.pie-chart {
  width: 200px; 
  height: 200px;
  border-radius: 50%;
  background: #ff0000;
  background-image:linear-gradient(to right, transparent 50%, #333 0);

}

For masking we have to add pseudo-element so use following CSS properties.
. pie-chart::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;

}

50%

Now the time to rotate based on the given value which also you can manage dynamically. So use following CSS properties to rotate half circle based on given percentage.

@keyframes spin {
 to { transform: rotate(.5turn); }
}
@keyframes bg {
 50% { background: #333; }
}   

.pie-chart::before {
 content: '';
 position: absolute;
 top: 0; left: 50%;
 width: 50%; height: 100%;
 border-radius: 0 100% 100% 0 / 50%;
 background-color: inherit;
 transform-origin: left;
 animation: spin 50s linear infinite, bg 100s step-end infinite;
 animation-play-state: paused;
 animation-delay: inherit;
}

And if you merge all css then the complete css will be same as below.

.pie-chart {
 display: inline-block;
 position: relative;
 width: 200px;
 line-height: 200px;
 border-radius: 50%;
 background: #ff0000;
 background-image: linear-gradient(to right, transparent 50%, #333 0);
 color: transparent;
 text-align: center;
}

@keyframes spin {
 to { transform: rotate(.5turn); }
}
@keyframes bg {
 50% { background: #333; }
}   

.pie-chart::before {
 content: '';
 position: absolute;
 top: 0; left: 50%;
 width: 50%; height: 100%;
 border-radius: 0 100% 100% 0 / 50%;
 background-color: inherit;
 transform-origin: left;
 animation: spin 50s linear infinite, bg 100s step-end infinite;
 animation-play-state: paused;
 animation-delay: inherit;
}

Let's apply them on html elements and change value to see result.

<div style="animation-delay: 0s;" class="pie-chart">0%</div>

<div style="animation-delay: -20s;" class="pie-chart">20%</div>

<div style="animation-delay: -40s;" class="pie-chart">40%</div>

<div style="animation-delay: -60s;" class="pie-chart">60%</div>

<div style="animation-delay: -80s;" class="pie-chart">80%</div>

Use minus value in 'animation-delay:' upto -100, to see how it works easily.

0%

20%

40%

60%

80%