No sé si necesito usar js con mi css para cambiar el color de mi gráfico. El color del gráfico debe depender del número dentro de él. Los números con el estilo que quiero: 20<= verde, >20 o ==30 amarillo, >30 rojo. Ya le di estilo al gráfico con verde pero, como dije, quiero hacer esto dinámico con CSS condicional. También intenté usar ngClasses pero no estoy familiarizado con ellos y aún no sé cómo usarlos.
La clase ppc-progress-fill tiene un estilo verde.
Mi 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>mi CSS: Esto tiene el color del círculo:
.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); }esto tiene el color del texto:
.ppc-percents span { display: block; font-size: 2.6em; font-weight: bold; color: #81CE97; }