I've got a number located in result.score
. Essentially, if the following calculation {Math.round((result.score / 89).toFixed(2) * 100)}
is 0 -> 24 I would like to make the pathColor:
in CircularProgressbar
red, if 25 -> 50 I would like to make it yellow and if it's 51 -> 100 I would like to make it green. What is the easiest way to do this?
const Graph = () => (
<div class="score">
{results.length > 0 && (
<div>
{results.map((result) => (
<CircularProgressbar
value={result.score}
text={`${Math.round((result.score / 89).toFixed(2) * 100)}%`}
styles={buildStyles({
pathColor: "#2bad60",
textColor: "#2bad60",
trailColor: "#0b0c18",
backgroundColor: "#3e98c7",
})}
/>
))}
</div>
)}
</div>
);
Thank you.
pathColor: #2bad60
based on the result from Math.round((result.score / 89).toFixed(2) * 100). Not sure what other information is required.