Pie chart breaks if one slice is bigger than half the pie - html

Question

I wrote some JavaScript code to generate Pie Charts for me, but when one Slice is bigger than half, the whole thing breaks. Using clip to make half-circles, it is not possible to display more than half, but I cannot understand, why the big part becomes smaller with white on either site.
I assume it would be easiest to change the code to recognize the biggest slice and jest make it a full circle in the bag of the others, but I really would prefer if there were another way.
.pie_container {
width: 500px;
height: 500px;
position: relative;
}
.inner-slice {
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
clip: rect(0px, 250px, 500px, 0px);
}
.outer-slice {
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
clip: rect(0px, 500px, 500px, 250px);
}
<div class="pie_container">
<div class="outer-slice" style="transform: rotate(0deg);">
<div class="inner-slice" style="background-color: blue;transform: rotate(40deg);"></div>
</div>
<div class="outer-slice" style="transform: rotate(40deg);">
<div class="inner-slice" style="background-color: green;transform: rotate(40deg);"></div>
</div>
<div class="outer-slice" style="transform: rotate(80deg);">
<div class="inner-slice" style="background-color: yellow;transform: rotate(40deg);"></div>
</div>
<div class="outer-slice" style="transform: rotate(120deg);">
<div class="inner-slice" style="background-color: orange;transform: rotate(40deg);"></div>
</div>
<div class="outer-slice" style="transform: rotate(160deg);">
<div class="inner-slice" style="background-color: red;transform: rotate(200deg);"></div>
</div>
</div>

Answer 1

You could use a conic-gradient background image for the pie chart div instead.
This diagram
was produced with CSS:
.pie_container {
width: 500px;
height: 500px;
position: relative;
border-radius: 50%;
background-repeat: no-repeat no-repeat;
background-size: 100% 100%;
background-position: center center;
}
and a conic gradient background-image in the element itself:
<div class="pie_container" style="background-image: conic-gradient(blue, blue 40deg, green 40deg, green 80deg, yellow 80deg, yellow 120deg, orange 120deg, orange 160deg, red 160deg, red 360deg);">
No need for other elements.
.pie_container {
width: 500px;
height: 500px;
position: relative;
border-radius: 50%;
background-repeat: no-repeat no-repeat;
background-size: 100% 100%;
background-position: center center;
}
<div class="pie_container" style="background-image: conic-gradient(blue, blue 40deg, green 40deg, green 80deg, yellow 80deg, yellow 120deg, orange 120deg, orange 160deg, red 160deg, red 360deg);"></div>

Answer 2

I rewrote my code to give me points on a clip-path, as suggested in this answer to a different post: How to draw a circle sector in CSS?
I took the clip-path, made the background-color transparent and added a box-shadow to make it a ring peace instead of a pie slice.
.slice {
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
background-color: transparent;
}
.slice:hover {
transform: scale(1.1);
}
.ring {
position: relative;
width: 400px;
height: 400px;
margin: 25px;
}
.middleText {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 18pt;
}
<div id="ring_diagram">
<div class="ring">
<span title="Data 1: 34 (52.31%)"><div class="slice slice1" style="box-shadow: red 0px 0px 0px 67px inset; clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%, 39.1633% 124.213%);"></div></span>
<span title="Data 2: 26 (40%)"> <div class="slice slice2" style="box-shadow: blue 0px 0px 0px 67px inset; clip-path: polygon(50% 50%, 39.1633% 124.213%, 0% 100%, 0% 0%, 0% 0%, 0% 0%, 15.1458% -16.4092%);"></div></span>
<span title="Data 3: 3 (4.62%)"> <div class="slice slice3" style="box-shadow: yellow 0px 0px 0px 67px inset; clip-path: polygon(50% 50%, 15.1458% -16.4092%, 35.5905% -23.6028%, 35.5905% -23.6028%, 35.5905% -23.6028%, 35.5905% -23.6028%, 35.5905% -23.6028%);"></div></span>
<span title="Data 4: 2 (3.08%)"> <div class="slice slice4" style="box-shadow: green 0px 0px 0px 67px inset; clip-path: polygon(50% 50%, 35.5905% -23.6028%, 50% -25%, 50% -25%, 50% -25%, 50% -25%, 50% -25%);"></div></span>
<div class="middleText"><h3>Text</h3>65</div>
</div>
</div>