HTML CSS
(a quick guide & example)
DONUT CHART = PIE CHART WITH A HOLE IN THE MIDDLE <div class="donut"> <div class="hole"><div> </div>
.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; }
CENTER SMALLER CIRCLE .donut { display: flex; align-items: center; justify-content: center; }