Power Platform Community Forum Thread Details

Greetings everyone,
I would need a little help with a donut chart.

I've created it as an SVG image in Power Apps, but now I'm unsure if it's possible to fill it with quotes until it's fully loaded. Essentially, it should use these three colors and have the capability to be filled up to 100%.

my code

With(
 { 
 segmentPercentage: Quote ,
 strokeColor: "#A1A4A4", // Replace with your actual stroke color variable
 strokeWidth: 2, // Replace with your actual stroke width variable
 fill1Color: "#F6D17B", // Replace with your actual fill color for path 1
 fill2Color: "#66ACD7", // Replace with your actual fill color for path 2
 fill3Color: "#254D6D" // Replace with your actual fill color for path 3
 },
 "data&colon;image/svg+xml," & EncodeUrl(
 Concatenate(
 "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200' fill='none'>
 <mask id='path-1-inside-1_392_5157' fill='white'>
 <path d='M9.3914 57.6906C0.203655 77.3669 -2.32946 99.4992 2.17491 120.743C6.67927 141.986 17.9763 161.186 34.3586 175.44C50.7409 189.695 71.318 198.229 92.9801 199.753C114.642 201.278 136.212 195.709 154.429 183.89C172.646 172.07 186.521 154.642 193.956 134.239C201.391 113.835 201.983 91.5666 195.641 70.7975C189.3 50.0284 176.37 31.8881 158.806 19.118C141.242 6.34801 119.998 -0.357591 98.2856 0.0146965L98.9714 40.0088C111.999 39.7854 124.745 43.8088 135.283 51.4708C145.822 59.1328 153.58 70.0171 157.385 82.4785C161.19 94.9399 160.835 108.301 156.374 120.543C151.912 132.785 143.588 143.242 132.657 150.334C121.727 157.426 108.785 160.767 95.7881 159.852C82.7908 158.937 70.4445 153.817 60.6152 145.264C50.7858 136.711 44.0076 125.192 41.3049 112.446C38.6023 99.6995 40.1222 86.4201 45.6348 74.6144L9.3914 57.6906Z'/>
 </mask>
 <path d='M9.3914 57.6906C0.203655 77.3669 -2.32946 99.4992 2.17491 120.743C6.67927 141.986 17.9763 161.186 34.3586 175.44C50.7409 189.695 71.318 198.229 92.9801 199.753C114.642 201.278 136.212 195.709 154.429 183.89C172.646 172.07 186.521 154.642 193.956 134.239C201.391 113.835 201.983 91.5666 195.641 70.7975C189.3 50.0284 176.37 31.8881 158.806 19.118C141.242 6.34801 119.998 -0.357591 98.2856 0.0146965L98.9714 40.0088C111.999 39.7854 124.745 43.8088 135.283 51.4708C145.822 59.1328 153.58 70.0171 157.385 82.4785C161.19 94.9399 160.835 108.301 156.374 120.543C151.912 132.785 143.588 143.242 132.657 150.334C121.727 157.426 108.785 160.767 95.7881 159.852C82.7908 158.937 70.4445 153.817 60.6152 145.264C50.7858 136.711 44.0076 125.192 41.3049 112.446C38.6023 99.6995 40.1222 86.4201 45.6348 74.6144L9.3914 57.6906Z' 
 stroke='" & strokeColor & "' stroke-width='" & Text(strokeWidth) & "' mask='url(#path-1-inside-1_392_5157)'/>
 <path d='M45.3179 16.2751C61.1418 5.94021 79.5705 0.301256 98.4681 0.0117339L99.0809 40.007C87.7423 40.1807 76.6851 43.5641 67.1907 49.765L45.3179 16.2751Z' fill='" & fill1Color & "'/>
 <path d='M9.12509 58.2657C17.0128 41.0905 29.6063 26.5022 45.446 16.1915L67.2676 49.7149C57.7638 55.9013 50.2077 64.6543 45.4751 74.9594L9.12509 58.2657Z' fill='" & fill2Color & "'/>
 <path d='M0.903034 113.409C-1.63118 94.6794 1.19412 75.6155 9.05147 58.4264L45.4309 75.0558C40.7165 85.3693 39.0213 96.8077 40.5418 108.045L0.903034 113.409Z' fill='" & fill3Color & "'/>
 </svg>"
 )
 )
)

How to dynamically set the value of a donut chart. Each color represents a different layer.

Based on the details above.

When the capacity of all layers is filled, the donut reaches 100%.

Is it possible or any advice would be welcome.

Thank you .

Categories:

Building Power Apps