CSS Donut Chart
After scouring the web and stackoverflow posts for an easy half donut graph just using CSS i came up empty handed. There seems to be a lot of ways of doing this, but none of them are great and a lot of seem over-complex. The below video details the steps to get the most simple CSS half donut graph possible. Please note that you may have to use vendor specific tags if your target platform is different from mine

The code for the video

<!DOCTYPE html>
<html> 
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.shape{
width: 100px;
height: 100px;
background-color: transparent;
border: 50px solid transparent;

border-top: 50px solid #375c89;
border-left: 50px solid #375c89;
border-radius: 50%;
clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 50% 50%);
transform: rotate(45deg);

}

</style>
</head>
<body>

<div class="shape" />

</body>
</html>

 


Written by admin