Donut char via SVG

(0) Share

Report

Posted on by Filistyn

290

Hey!

I am trying to display a vacation value via donut char, which is SVG.

The code is:

"data&colon;image/svg+xml," & EncodeUrl(
 "<svg width='100%' height='100%' viewBox='0 0 42 42' class='donut' xmlns='http://www.w3.org/2000/svg'>
 <circle class='donut-hole' cx='21' cy='21' r='15.91549430918954' fill='#fff'></circle>
 <circle class='donut-ring' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='#ce4b99' stroke-width='3'></circle>
 <circle class='donut-segment' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='#d2d3d4' stroke-width='3' stroke-dasharray='" & (ThisItem.VacationValue) & "' stroke-dashoffset='25'></circle>
</svg>"
)

And it should display a value of VacationValue column inside the donut char/150 (so its how many vacation you still have out of 150. But this code displays just displays random donut chars. Also it should dynamically change the overlay.

Video example with time: https://youtu.be/S-YUearXrBA?t=310

Could someone help?

Categories:

Building Power Apps

I have the same question (0)

All responses (5)

Answers (0)

Sort by

timl 37,283 Super User 2026 Season 2 on at

Like
a
(0)

Report
Copy link

Link copied!
Hi @Filistyn

For the stroke-dasharray value of your donut-segment, you need 2 values that add up to 100%.

Let's say ThisItem.VacationValue is 50 (eg 50 vacation days out of 150 days), this would be 33% so stroke-dasharray would need to be '33 66'.

The calculation to derive 33% would be this - (50/150) * 100. Therefore, the formula you would use would look like this:

With({segmentPercentage:(ThisItem.VacationValue/150) * 100}, "data&colon;image/svg+xml," & EncodeUrl( "<svg width='100%' height='100%' viewBox='0 0 42 42' class='donut' xmlns='http://www.w3.org/2000/svg'> <circle class='donut-hole' cx='21' cy='21' r='15.91549430918954' fill='#fff'></circle> <circle class='donut-ring' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='#ce4b99' stroke-width='3'></circle> <circle class='donut-segment' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='#d2d3d4' stroke-width='3' stroke-dasharray='" & segmentPercentage & " " & 100-segmentPercentage & "' stroke-dashoffset='250'></circle> </svg>" ) )

Was this reply helpful? Yes No
Filistyn 290 on at

Like
a
(0)

Report
Copy link

Link copied!

Thank you for your answer. I have tried your code and the image has completely dissapeared 😞

Was this reply helpful? Yes No
timl 37,283 Super User 2026 Season 2 on at

Like
a
(0)

Report
Copy link

Link copied!

Hi @Filistyn

Unfortunately, the code editor here is HTML escaping the characters and replacing the colon character with &colon;

In your formula, can you confirm that this line includes a colon character like so?

"data&colon;image/svg+xml," & EncodeUrl(

Was this reply helpful? Yes No
Filistyn 290 on at

Like
a
(0)

Report
Copy link

Link copied!

I can confirm

Was this reply helpful? Yes No
timl 37,283 Super User 2026 Season 2 on at

Like
a
(0)

Report
Copy link

Link copied!

@Filistyn

Can you confirm the value of ThisItem.VacationValue that doesn't work for you? If you hardcode a value of 50, for example, does the chart show like in my screenshot above?

Was this reply helpful? Yes No