I don't know if I need to use js with my css to change the color of my graph. The color of the graph must depend the number inside it. The numbers with styling I want: 20<= green, >20 or ==30 yellow, >30 red. I already styled the graph with green but like I said I want to make this dynamic with conditional CSS. I also tried using ngClasses but I am not familiar with them and don't know how to use them yet.

The class ppc-progress-fill is styled with green.

My HTML:

<div class="progressDiv">
            <div class="statChartHolder">
                <div class="progress-pie-chart"><!--Pie Chart -->
                    <div class="ppc-progress">
                        <div class="ppc-progress-fill" [ngClass="{'red' :colorStatus==1, 'yellow' :colorStatus==2, 'green' : colorStatus==3}"]></div>
                    </div>
                    <div class="ppc-percents">
                    <div class="pcc-percents-wrapper">
                        <span>49</span>
                        <span id="pending">projects pending</span>
                    </div>
                    </div>  
                </div><!--End Chart -->
            </div>    
        </div>

my CSS: This has the color of circle:

    .ppc-progress .ppc-progress-fill {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  height: 200px;
  background: #81CE97;
  transform: rotate(90deg);
}

this has the color of the text:

    .ppc-percents span {
  display: block;
  font-size: 2.6em;
  font-weight: bold;
  color: #81CE97;
}

enter image description here