Clickable Pie Chart
/* Container for the pie chart */
.pie {
position: relative;
width: 800px;
height: 800px;
border-radius: 50%;
margin: 0 auto;
top: 50%;
transform: translateX(-30%);
background: conic-gradient(
#004d26 0%,
#004d26 4.545%,
#006633 4.545%,
#006633 9.09%,
#007a3d 9.09%,
#007a3d 13.636%,
#008c47 13.636%,
#008c47 18.182%,
#009f52 18.182%,
#009f52 22.727%,
#00b35d 22.727%,
#00b35d 27.273%,
#00c667 27.273%,
#00c667 31.818%,
#00da72 31.818%,
#00da72 36.364%,
#00ed7d 36.364%,
#00ed7d 40.909%,
#00ff87 40.909%,
#00ff87 45.454%,
#00ff87 50%,
#00ed7d 50%,
#00ed7d 54.545%,
#00da72 54.545%,
#00da72 59.09%,
#00c667 59.09%,
#00c667 63.636%,
#00b35d 63.636%,
#00b35d 68.182%,
#009f52 68.182%,
#009f52 72.727%,
#008c47 72.727%,
#008c47 77.273%,
#007a3d 77.273%,
#007a3d 81.818%,
#006633 81.818%,
#006633 86.364%,
#004d26 86.364%,
#004d26 90.909%,
#004119 90.909%,
#004119 95.454%,
#00340d 95.454%,
#00340d 100%
);
border: 5px solid #D2FF72; /* Darker border */
}
/* Inner white circle in the center */
.inner-circle {
position: absolute;
top: 50%;
left: 50%;
width: 100px; /* Width of the inner circle */
height: 100px; /* Height of the inner circle */
border-radius: 50%;
background: linear-gradient(135deg, #D2FF72, #B3F414);
transform: translate(-50%, -50%); /* Center the circle */
pointer-events: none; /* Allow clicks to go through */
box-shadow: 0px 0px 55px rgba(0, 0, 0, 0.8);
}
/* Each section of the pie chart */
.section {
position: absolute;
width: 100%;
height: 50%;
top: 50%;
left: 50%;
padding-left: 350px;
clip-path: polygon(100% 0, 100% 100%, 50% 50%);
transform-origin: 0% 0%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 16px; /* Font size */
cursor: default; /* Change cursor to default */
pointer-events: none; /* Prevent clicks on sections */
}
/* Rotate sections to place them properly in the pie */
.section:nth-child(1) { transform: rotate(0deg) translate(-50%, -50%); }
.section:nth-child(2) { transform: rotate(16.36deg) translate(-50%, -50%); }
.section:nth-child(3) { transform: rotate(32.72deg) translate(-50%, -50%); }
.section:nth-child(4) { transform: rotate(49.08deg) translate(-50%, -50%); }
.section:nth-child(5) { transform: rotate(65.44deg) translate(-50%, -50%);
}
.section:nth-child(6) { transform: rotate(81.80deg) translate(-50%, -50%);
font-size: 16px;
padding-left: 360px; }
.section:nth-child(7) { transform: rotate(98.16deg) translate(-50%, -50%); }
.section:nth-child(8) { transform: rotate(114.52deg) translate(-50%, -50%); }
.section:nth-child(9) { transform: rotate(130.88deg) translate(-50%, -50%); }
.section:nth-child(10) { transform: rotate(147.24deg) translate(-50%, -50%); }
.section:nth-child(11) { transform: rotate(163.60deg) translate(-50%, -50%);
padding-left: 350px;
font-size: 14px;}
.section:nth-child(12) { transform: rotate(179.96deg) translate(-50%, -50%); }
.section:nth-child(13) { transform: rotate(196.32deg) translate(-50%, -50%); }
.section:nth-child(14) { transform: rotate(212.68deg) translate(-50%, -50%); }
.section:nth-child(15) { transform: rotate(229.04deg) translate(-50%, -50%); }
.section:nth-child(16) { transform: rotate(245.40deg) translate(-50%, -50%); }
.section:nth-child(17) { transform: rotate(261.76deg) translate(-50%, -50%); }
.section:nth-child(18) { transform: rotate(278.12deg) translate(-50%, -50%); }
.section:nth-child(19) { transform: rotate(294.48deg) translate(-50%, -50%); }
.section:nth-child(20) { transform: rotate(310.84deg) translate(-50%, -50%); }
.section:nth-child(21) { transform: rotate(327.20deg) translate(-50%, -50%); }
.section:nth-child(22) { transform: rotate(343.56deg) translate(-50%, -50%); }
.section:nth-child(23) { transform: rotate(360deg) translate(-50%, -50%); }
.section a {
pointer-events: auto; /* Allow clicks on links */
color: white; /* Keep text color */
text-decoration: none; /* Remove underline */
width: 100%; /* Make link occupy the full width of the section */
box-sizing: border-box; /* Include padding in width */
text-align: center; /* Center align the text */
}
