How to change circle values in dashboard

Post Reply
fensefernando
Posts: 7
Joined: 24 Jun 2015, 22:46
Contact:

06 Jan 2021, 22:41

Hello!

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

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">
                        <i class="pi pi-mobile"></i>
                        <span>50</span>
                    </div>
                </div>

merve7
Posts: 680
Joined: 12 Sep 2017, 10:44

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>
Image

fensefernando
Posts: 7
Joined: 24 Jun 2015, 22:46
Contact:

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

merve7
Posts: 680
Joined: 12 Sep 2017, 10:44

15 Feb 2021, 14:35

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

Post Reply

Return to “Apollo - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest