HTML CSS

PURE HTML CSS DONUT CHART

(a quick guide & example)

DONUT CHART = PIE CHART WITH A HOLE IN THE MIDDLE <div class="donut">   <div class="hole"><div> </div>

DONUT CHART HTML

01

CSS - DRAW A PIE CHART

02

.donut {   DRAW A CIRCLE   width: 300px; height: 300px;   border-radius: 50%;

  DRAW SEGMENTS   background: conic-gradient(     red 0deg 80deg,     green 80deg 190deg,     blue 190deg 360deg   ); }

DRAW SMALLER CIRCLE .hole {   width: 180px; height: 180px;   border-radius: 50%;   background: #fff; }

CSS - "CONVERT" TO DONUT CHART

03

CENTER SMALLER CIRCLE .donut {   display: flex;   align-items: center;   justify-content: center; }