Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.

Reply
wujunmin
Advocate I
Advocate I

Apple watch's donut chart by DAX

One day I saw apple's ads, these donut charts are amazing: 

wujunmin_0-1663894176139.png

So, I put one of them (right one) in Power BI by DAX:

wujunmin_1-1663894432410.png

Here is the measure: 

 

Chart = 
VAR Pct=0.66 // repalce 0.66 with your percent measure
VAR SVG=
    "<svg viewbox='0 0 110 60' xmlns='http://www.w3.org/2000/svg'>
        <circle cx='55' cy='55' r='50' fill='none' stroke='LightGrey' stroke-opacity='0.4' stroke-width='10' stroke-linecap='round' stroke-dasharray='" & PI()*50 & "' stroke-dashoffset='" & PI()*50 & "'/>
         <g id='wujunmin'>
            <circle cx='55' cy='5' r='5' fill='White' fill-opacity='0.8' stroke='#228FF1'  stroke-width='2.5'/>
            <animateTransform attributeName='transform' type='rotate' from='-90 55 55' to='"&180*pct-90 &" 55 55' begin='0s' dur='3s' fill='freeze'/>
        </g>
        <text x='55' y='45' text-anchor='middle' dominant-baseline='middle' font-size='25' fill='white'>"&ROUND(Pct*100,0)&"</text>
    </svg>"
RETURN
  SVG

 

 

You need HTML Content to get the result: 

wujunmin_2-1663894811785.png

This chart even has some kind of animation:

6.gif

 

0 REPLIES 0

Helpful resources

Announcements
Microsoft Fabric Learn Together

Microsoft Fabric Learn Together

Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City

PBI_APRIL_CAROUSEL1

Power BI Monthly Update - April 2024

Check out the April 2024 Power BI update to learn about new features.

April Fabric Community Update

Fabric Community Update - April 2024

Find out what's new and trending in the Fabric Community.