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
Join Arun Ulag at MPPC23

Join Arun Ulag at MPPC23

Get a sneak peek into this year's Power Platform Conference Keynote.

PBI Sept Update Carousel

Power BI September 2023 Update

Take a look at the September 2023 Power BI update to learn more.

Learn Live

Learn Live: Event Series

Join Microsoft Reactor and learn from developers.

Dashboard in a day with date

Exclusive opportunity for Women!

Join us for a free, hands-on Microsoft workshop led by women trainers for women where you will learn how to build a Dashboard in a Day!

Top Solution Authors
Top Kudoed Authors