How to Make a Pie Chart in CSS

How to make a pie chart in CSS

Oh my! Have you seen Google Chart Tools?

https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

This is stupid easy to implement, but my problem with it is the "external api" part. If google decides to can this or google goes down, bye bye chart! But as far as beauty and the selection of other charts, google charts is kinda a cool find.

Creating a static pie chart with CSS

Here is an idea based on this previous answer

.box {
  /* percentage to degree
    --s:0 for [0% 50%]
    --s:1 for [50% 100%]
   */
  --v:calc( ((18/5) * var(--p) - 90)*1deg);

  width:100px;
  height:100px;
  display:inline-block;
  border-radius:50%;
  background:
    linear-gradient(var(--v), yellowgreen 50%,transparent 0) 0 /calc((1 - var(--s))*100%),
    linear-gradient(var(--v), transparent 50%,#655        0) 0 /calc(var(--s)*100%),
    linear-gradient(to right, yellowgreen 50%,#655 0);
}

<div class="box" style="--p:5;--s:0"></div>
<div class="box" style="--p:20;--s:0"></div>
<div class="box" style="--p:50;--s:0"></div>
<div class="box" style="--p:70;--s:1"></div>
<div class="box" style="--p:95;--s:1"></div>

Percent pie chart with css only

New answer 2021

With some modern techniques we can improve the code. You can have rounded edges and also consider animation:

@property --p{
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

.pie {
  --p:20;      /* the percentage */
  --b:22px;    /* the thickness */
  --c:darkred; /* the color */
  --w:150px;   /* the size*/
  
  width:var(--w);
  aspect-ratio:1/1;
  position:relative;
  display:inline-grid;
  margin:5px;
  place-content:center;
  font-size:25px;
  font-weight:bold;
  font-family:sans-serif;
}
.pie:before,
.pie:after {
  content:"";
  position:absolute;
  border-radius:50%;
}
.pie:before {
  inset:0;
  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);
  -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)));
}
.pie:after {
  inset:calc(50% - var(--b)/2);
  background:var(--c);
  transform:rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(var(--w)/2 - 50%));
}
.animate {
  animation:p 1s .5s both;
}
.no-round:before {
  background-size:0 0,auto;
}
.no-round:after {
  content:none;
}
@keyframes p{
  from{--p:0;}
}

body {
  background:#ddd;
}

<div class="pie" style="--p:20"> 20%</div>
<div class="pie" style="--p:40;--c:darkblue;--b:10px"> 40%</div>
<div class="pie no-round" style="--p:60;--c:purple;--b:15px"> 60%</div>
<div class="pie animate" style="--p:80;--c:orange;"> 80%</div>
<div class="pie animate no-round" style="--p:90;--c:lightgreen"> 90%</div>

CSS Only Pie Chart - How to add spacing/padding between slices?

First I would recreate this with less of code relying on clip-path like below:

.palette {  height: 200px;  width: 200px;  position:relative;  overflow:hidden;}.palette > * {  position:absolute;  top:0;  left:0;  right:0;  bottom:0;  border:50px solid var(--c,red);  border-radius:50%;  clip-path:polygon(50% 50%, 50% 0%, 100% 0%,100% 33.745%); }.color1 {  transform:rotate(72deg);  --c:blue;}.color2 {  transform:rotate(144deg);  --c:orange;}.color3 {  transform:rotate(-72deg);  --c:green;}.color4 {  transform:rotate(-144deg);  --c:purple;}

<div class="palette">  <div class="color1"></div>  <div class="color2"></div>  <div class="color3"></div>  <div class="color4"></div>  <div class="color5"></div></div>

how to draw a configurable pie chart in css

You need to change your javascript to create the divs in the appropriate places in the DOM with the appropriate rotational offsets.

var setButti = function(n, p, f) {
        var total = n + p + f;
        var atrs = { 'tc-passed' : p*360/total, 'tc-failed' : f*360/total, 'tc-ne' : n*360/total };
        var butti = $('#buttiEl');
        butti.html('<div class="pieContainer"><div class="pieBackground"></div></div>');
        var offset = 0;
        for (var key in atrs) {
          var wedgeWidth = atrs[key];
          if (wedgeWidth > 180) {
              $('.pieContainer', butti).append(buildWedge(key, 180, offset));
              wedgeWidth -= 180;
              offset += 180;
          }
          $('.pieContainer', butti).append(buildWedge(key, wedgeWidth, offset));
          offset += wedgeWidth * 1;
        }
      };

function buildWedge(cssClass, wedgeWidth, offset) {
    var wedge = $('<div class="pie"></div>').
      css('-webkit-transform', 'rotate('+ wedgeWidth +'deg)').
      css('-moz-transform', 'rotate('+ wedgeWidth +'deg)').
      css('-o-transform', 'rotate('+ wedgeWidth+'deg)').
      css('transform', 'rotate('+wedgeWidth +'deg)');
    var container = $('<div class="'+cssClass+' hold"></div>').
      css('-webkit-transform', 'rotate('+ offset +'deg)').
      css('-moz-transform', 'rotate('+ offset +'deg)').
      css('-o-transform', 'rotate('+ offset +'deg)').
      css('transform', 'rotate('+offset +'deg)');
    container.append(wedge);
    return container;
}

JS Fiddle

---

Related Topics