How do you make a pie chart using html and css?

is all the HTML we need to generate the pie.

1B) THE CSS

pie-chart.css

/* (A) PIE CHART */
.pie {
  /* (A1) CIRCLE */
  width: 300px; height: 300px;
  border-radius: 50%;
 
  /* (A2) SEGMENTS */
  background: conic-gradient(
    red 0deg 45deg,
    green 45deg 190deg,
    blue 190deg 360deg
  );
}

• (A1) width: 300px height: 300px will create a square, and adding border-radius: 50% turns it into a circle.
• (A2) Build the segments using conic-gradient, how it works is dreadfully simple. As you already know, a full circle is 360 degrees. So we just specify the segments using COLOR START-DEGREE END-DEGREE.

PART B) THE LEGEND

2A) THE HTML

pie-chart.html

  
 
First
  
 
Second
  
 
Third

Now, a few tutorials on the Internet do “brute force calculations” to put the labels/legend into the pie chart itself. I figured that is “not simple”, and the easiest way is to just create a separate legend.

2B) THE CSS

pie-chart.css

/* (B) LEGEND */
/* (B1) LEGEND CONTAINER */
.legend {
  display: grid;
  grid-template-columns: 50px auto;
  margin-top: 30px;
}
 
/* (B2) SEGMENTS */
.legend div { padding: 10px; }
.segment1 { background: red; }
.segment2 { background: green; }
.segment3 { background: blue; }

Not much of a mystery here either – The legend is just a “grid table”. The first cell is the “color block”, followed by the name of the segment itself.

IT WORKS, BUT NOT FOR COMPLEX PIES.

This simple pie chart works great if you only have a few segments, but it quickly grows painful when there are a lot of segments to deal with. Manually calculating the segments, assigning the colors, updating the legend is not fun to deal with… So a bit of Javascript to “automate” the calculation will be great – I shall leave that as a possible future update.

COMPATIBILITY CHECKS

• CSS Grid – CanIUse
• CSS Conic Gradient – CanIUse

CSS grid and conic gradient are well-supported on all modern “Grade A” browsers.

LINKS & REFERENCES

• Gantt Chart – Code Boxx
• Bar Chart – Code Boxx
• Donut Chart – Code Boxx
• Example on CodePen – Pure CSS Pie Chart

INFOGRAPHIC CHEAT SHEET

Pure CSS Pie Chart (Click To Enlarge)

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!