how to center a div between two percentages of a css pie chart (conic-gradient)

Question

I'm trying to create a pie charts using css conic-gradient, but can't figure out how to center label of a particular color to display at the center of two percentages while keeping the proper radius and show it a little bit outside that graph area.

Here's the code so far:

.pie-container{
  position: relative;
  width: 300px;
  height: 300px;
  background: radial-gradient(white 30%, transparent 31%), conic-gradient(#66991A 0% 20%, #FF99E6 20% 35%, #CCFF1A 35% 40%, #FF1A66 40% 70%, #E6331A 70% 100%);
  display: inline-block;
  border-radius: 50%;
  float:right;
  margin-right:40%;
}
.center-white{
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  height: 300px;
  padding-top: 42%;
}
.main-label{
  font-size:22px;
  padding-top:5px;
}
.chart-1-label{
  position: absolute;
    font-weight: bold;
    font-size: 14px;
    --d: 300px;
    --p: 20;
    --a:
    calc(.5*var(--p)/100*360deg - 90deg);
    --pos:
    rotate(var(--a)) translate(calc(.25*var(--d))) rotate(calc(-1*var(--a)));
    transform: translate(-50%, -50%) var(--pos);
    background: white;
    padding: 2px;
}
.chart-2-label{
  position: absolute;
  top: 170px;
  left: 300px;
  font-weight: bold;
  font-size: 15px;
}

<div class="pie-container">
  <div class="center-white">Visits <div class="main-label">1M</div></div>
  <div class="chart-1-label">20%</div>
  <div class="chart-2-label">15%</div>
</div>

I want this label "20%" to appear similar to "15%" but along with the green graph area. And then apply the same to 15%, currently its position is manually fixed.

Any help is much appreciated. Thank you.

Answer 1

Try this css for chart-1:

.chart-1-label {
    position: absolute;
    font-weight: bold;
    font-size: 14px;
    --d: 2030px;
    --p: 21;
    --a: calc(.5*var(--p)/100*360deg - 90deg);
    --pos: rotate(var(--a)) translate(calc(.25*var(--d))) rotate(calc(-1*var(--a)));
    transform: translate(-50%, -50%) var(--pos);
    background: white;
    padding: 2px;
}