cancel
Showing results for 
Search instead for 
Did you mean: 
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
September Update

Check it Out!

Click here to learn more about the September 2022 updates!

Power BI Dev Camp Session 26

Check it Out!

Mark your calendars and join us on Thursday, September 29 at 11a PDT for a great session with Ted Pattison!

Top Solution Authors