How to make a pie chart in CSS

Question

How can I create a pie chart with CSS like the one below?

Answer 1

I find this the easiest CSS-only solution. Somewhat simplified below.

    .pieContainer {        height: 150px;        position: relative;      }            .pieBackground {        position: absolute;        width: 150px;        height: 150px;        border-radius: 100%;        box-shadow: 0px 0px 8px rgba(0,0,0,0.5);      }             .pie {        transition: all 1s;        position: absolute;        width: 150px;        height: 150px;        border-radius: 100%;        clip: rect(0px, 75px, 150px, 0px);      }            .hold {        position: absolute;        width: 150px;        height: 150px;        border-radius: 100%;        clip: rect(0px, 150px, 150px, 75px);      }            #pieSlice1 .pie {        background-color: #1b458b;        transform:rotate(30deg);      }            #pieSlice2 {        transform: rotate(30deg);      }            #pieSlice2 .pie {        background-color: #0a0;        transform: rotate(60deg);      }            #pieSlice3 {        transform: rotate(90deg);      }            #pieSlice3 .pie {        background-color: #f80;        transform: rotate(120deg);      }            #pieSlice4 {        transform: rotate(210deg);      }            #pieSlice4 .pie {        background-color: #08f;        transform: rotate(10deg);      }            #pieSlice5 {        transform: rotate(220deg);      }            #pieSlice5 .pie {        background-color: #a04;        transform: rotate(70deg);      }            #pieSlice6 {        transform: rotate(290deg);      }            #pieSlice6 .pie {        background-color: #ffd700;        transform: rotate(70deg);      }            .innerCircle {        position: absolute;        width: 120px;        height: 120px;        background-color: #444;        border-radius: 100%;        top: 15px;        left: 15px;         box-shadow: 0px 0px 8px rgba(0,0,0,0.5) inset;        color: white;      }      .innerCircle .content {        position: absolute;        display: block;        width: 120px;        top: 30px;        left: 0;        text-align: center;        font-size: 14px;      }

    <div class="pieContainer">        <div class="pieBackground"></div>        <div id="pieSlice1" class="hold"><div class="pie"></div></div>        <div id="pieSlice2" class="hold"><div class="pie"></div></div>        <div id="pieSlice3" class="hold"><div class="pie"></div></div>        <div id="pieSlice4" class="hold"><div class="pie"></div></div>        <div id="pieSlice5" class="hold"><div class="pie"></div></div>        <div id="pieSlice6" class="hold"><div class="pie"></div></div>        <div class="innerCircle"><div class="content"><b>Data</b><br>from 16<sup>th</sup> April, 2014</div></div>      </div>

Answer 2

I saw some people opting for Google Developers Tool, its very tough and it also uses JS and you only want CSS. So here is the most easy way, Pure CSS, made by using background gradient.

.pie {    width: 400px;    height: 400px;    background-image: conic-gradient(orange 64%, blue 17%, black);    border-radius: 50%  }

<div class="pie"></div>