Insightful Power BI Solutions  ·  14. January 2025

Customized Progress Bar - Creating a SVG from Scratch

 

Using SVGs in Power BI is a game-changer when it comes to creating custom visuals. For example, I designed a progress bar that already includes text and a percentage, something that would require multiple visual elements if done with native Power BI visuals. The beauty of using SVGs is not just in the customization, but also in the ability to reuse your custom SVGs across multiple reports, saving you time and effort. 

 

So let's get started with creating your own Porgress Bar!

Ask Chat GPT

In times like these, it's important to use any available tools to boost your productivity. Let’s leverage ChatGPT to help create the required code.

The Answer:

<svg width="400" height="50" xmlns="http://www.w3.org/2000/svg">
  <!-- Background of the status bar -->
  <rect x="10" y="10" width="300" height="30" fill="#e0e0e0" rx="5" ry="5" />
  
  <!-- Progress within the status bar -->
  <rect x="10" y="10" width="200" height="30" fill="#76c7c0" rx="5" ry="5" />
  
  <!-- Border around the status bar -->
  <rect x="10" y="10" width="300" height="30" fill="none" stroke="#000" rx="5" ry="5" />
  <!-- Percentage text outside the bar -->
  <text x="320" y="32" font-family="Arial" font-size="18" fill="#000">66%</text>
</svg>

 

Further adaptions

The Answer:

<svg width='400' height='50' xmlns='http://www.w3.org/2000/svg'>
  <!-- Background of the status bar -->
  <rect x='10' y='10' width='300' height='30' fill='#e0e0e0' rx='5' ry='5' />
  
  <!-- Progress within the status bar -->
  <rect x='10' y='10' width='200' height='30' fill='#76c7c0' rx='5' ry='5' />
  
  <!-- Border around the status bar -->
  <rect x='10' y='10' width='300' height='30' fill='none' stroke='#000' rx='5' ry='5' />
  <!-- Percentage text outside the bar -->
  <text x='320' y='32' font-family='Arial' font-size='18' fill='#000'>66%</text>
</svg>

The Answer:

'<svg width='400' height='50' xmlns='http://www.w3.org/2000/svg'>
  <!-- Background of the status bar -->
  <rect x='10' y='10' width='300' height='30' fill='#e0e0e0' rx='5' ry='5' />
  
  <!-- Progress within the status bar -->
  <rect x='10' y='10' width='200' height='30' fill='#76c7c0' rx='5' ry='5' />
  
  <!-- Border around the status bar -->
  <rect x='10' y='10' width='300' height='30' fill='none' stroke='#000' rx='5' ry='5' />
  <!-- Percentage text outside the bar -->
  <text x='320' y='32' font-family='Arial' font-size='18' fill='#000'>66%</text>
</svg>'

The Answer:

"<svg width='400' height='50' xmlns='http://www.w3.org/2000/svg'>
  <!-- Background of the status bar -->
  <rect x='10' y='10' width='300' height='30' fill='#e0e0e0' rx='5' ry='5' />
  
  <!-- Progress within the status bar -->
  <rect x='10' y='10' width='200' height='30' fill='#76c7c0' rx='5' ry='5' />
  
  <!-- Border around the status bar -->
  <rect x='10' y='10' width='300' height='30' fill='none' stroke='#000' rx='5' ry='5' />
  <!-- Percentage text outside the bar -->
  <text x='320' y='32' font-family='Arial' font-size='18' fill='#000'>66%</text>
</svg>"

The Answer:

"data:image/svg+xml;utf8," & 
"<svg width='400' height='50' xmlns='http://www.w3.org/2000/svg'>
  <!-- Background of the status bar -->
  <rect x='10' y='10' width='300' height='30' fill='#e0e0e0' rx='5' ry='5' />
  
  <!-- Progress within the status bar -->
  <rect x='10' y='10' width='200' height='30' fill='#76c7c0' rx='5' ry='5' />
  
  <!-- Border around the status bar -->
  <rect x='10' y='10' width='300' height='30' fill='none' stroke='#000' rx='5' ry='5' />
  <!-- Percentage text outside the bar -->
  <text x='320' y='32' font-family='Arial' font-size='18' fill='#000'>66%</text>
</svg>"

The final SVG

SVG Auftraege Progress =

VAR Width = 500

VAR Height = 25

 

VAR ActualWidth = 400 * DIVIDE([Sum Auftraege verrechnet],[Sum Auftraege])

VAR WidthOpen = 400

 

Var FontSize = 14

 

VAR ColorBarActual = "#4197AB"

VAR ColorBarOpen = "#D0D0D0"

 

--- Progress Bar Info ---

VAR PERCENTAGEFILL = DIVIDE([Sum Auftraege verrechnet],[Sum Auftraege]) * 100

 

RETURN

"data:image/svg+xml;utf8," &

"<svg width=' "& Width &" ' height=' "& Height &" ' viewBox='-2 -2 "& Width &" +40 "& Height &" +2 ' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' display= 'block'  overflow='visible'>

<rect id='track' x='' y='-2' rx='0' ry='0' width=' "& WidthOpen &" ' height= ' "& Height &" ' fill=' "& ColorBarOpen &" ' />

<rect id='fill' x='0' y='-2' rx='0' ry='0' width="& "'"& ActualWidth &"'"&" height=' "& Height &" ' fill='"& ColorBarActual &"'></rect>

<use href='#mySymbol' x='0' y='-2' style='opacity:1.0' />

<text x='410' y='15' font-size = ' "& FontSize &" ' font-weight='medium' font-family='Tahoma' >"&FORMAT(PERCENTAGEFILL/100, "0%")&"</text>

 

</svg>"

Adapt Data Type

The last step is adpating the data type of the SVG in Power BI to Image URL. Now you can use it in a table, a matrix or a card visual. 

Summary

I hope you had as much fun as I had with playing around with generating code for SVGs . And hopefully you will apply this technic to create your own visuals! 

Cming soon: More Posts you might enjoy

😍 From LinkedIn to Insights: Building Dashboards for Personal Branding

COMING SOON

👌 How to Make Stacked Bar Charts More Readable in Power BI Without Bookmarks

Check it out!

Tags: SVGs in Power BI, Power BI Progress Bar Tutorial, Power BI Customization Tips, Advanced Power BI Visual Techniques

Write a comment

Comments: 0