Prime Community Forum

Posted: **06 Jan 2021, 22:41**

Hello!

How to change the fill color according to the value of the circle?

<div class="p-col-12 p-lg-3 p-md-6">
                    <div class="status-title" style="color:#f6a821">Mobile</div>
                    <div class="circle2">
                        <i class="pi pi-mobile"></i>
                        <span>50</span>
                    </div>
                </div>

Posted: **08 Jan 2021, 13:56**

Hi,
You can try the below code?

Code: Select all

circleValue = 50;

Code: Select all

<div class="p-col-12 p-lg-3 p-md-6">
    <div class="status-title" style="color:#f6a821">Mobile</div>
    <div class="circle2" [ngStyle]="{ borderTopColor: circleValue === 50 ? 'red' : 'yellow'}">
        <i class="pi pi-mobile"></i>
        <span>{{circleValue}}</span>
    </div>
</div>

Posted: **06 Feb 2021, 22:49**

Thanks for your reply

What I am looking for is that the color is painted according to the value

If I put a value of 30 advance up to 30% of the color

Posted: **15 Feb 2021, 14:35**

Hi,
You can use our new Knob component. (https://primefaces.org/primeng/showcase/#/knob)

Prime Community Forum

How to change circle values in dashboard

How to change circle values in dashboard

Re: How to change circle values in dashboard

Re: How to change circle values in dashboard

Re: How to change circle values in dashboard