How to fill correctly the strokeDasharray - reactjs

Question

The bounty expires in 5 days. Answers to this question are eligible for a +50 reputation bounty.
Qoomit is looking for an answer from a reputable source.
I'm trying to accomplish this... in this example the green stroke is filled when the people selected (1), and the gray ones are the total of people (6)
other example is green stroke is filled (3) and total (6)
what I accomplished by now, it doesn't fill correctly,
const [personQuantity, setPersonQuantity] = useState(2)
const [payingFor, setPayingFor] = useState(1)
useEffect(() => {
let amountPerPerson = subtotal / personQuantity
let perPerson = amountPerPerson * payingFor
setPerPerson(perPerson)
if (personQuantity >= payingFor && personQuantity > 2) {
setActivate(true)
} else {
setActivate(false)
}
}, [personQuantity, payingFor])
const fillPercentage = (payingFor / personQuantity) * 100
return (
<>
<div className="h-20 w-20 ">
<svg className="circular-chart " viewBox="0 0 36 36">
<path
fill="none"
strokeWidth="4"
strokeDasharray={`${fillPercentage + 1},1`}
className="circle-bg bg-DARK_1 stroke-2 stroke-white"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path
strokeWidth="4"
strokeLinecap="round"
fill="none"
className="circle stroke-LIGHT_GREEN_1 transition-opacity delay-150 ease-in-out"
strokeDasharray={`${fillPercentage}, 100`}
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
</svg>
</div>

Answer 1

as stated by enxaneta, you use path of 100 percent, so you should make the math so that the white draws the person's number separated by a gap percent space and the green fills the number of slots including intermediate spaces.
So assuming subtotal is the total number of persons and payingFor is the number of persons that should be green, we have :
let pathSize = 100
let gapSize = 1
let percentForOne = (pathSize / subtotal)
let greenedPercent = (percentForOne * payingFor) - gapSize
let notGreenedPercent = (percentForOne * (subtotal - payingFor)) + gapSize
so for white :
strokeDasharray={`${percentForOne} - ${gapSize},${gapSize}`}
then for green :
strokeDasharray={`${greenedPercent},${notGreenedPercent}`}
Please note that it will be incorrect with more than 100 persons because these would imply more than 100 gaps of 1 percent and negative space between them, so you should probably put the gapSize to 0 when subtotal is more than ~40 (esthetic value)
As a second note, while using a path to approximate a circle do work, I recommend using <circle cx="18" cy="18" r="15.9155" pathlength=100> and in both case you will need to rotate the figure by -90deg to achieve the vertical origin of the drawing transform: rotate(-90deg)
I did a demo on this codepen (with fixed values)