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

Calling all Data Engineers! Fabric Data Engineer (Exam DP-700) live sessions are back! Starting October 16th. Sign up.

Reply
Babak_Samet
New Contributor

Status icons with dynamic numbers in a cell

Hello Power BI Community,

Iโ€™m working on a report where I need to display multiple status icons (in SVG format) in a table, with dynamic numbers overlaid on top of the icons. The status icons represent different status types (A to D), and each status is associated with a number (starting from 1), which is calculated based on other columns in the dataset. 

Hereโ€™s what Iโ€™m trying to achieve:

  1. Display SVG icons representing different statuses (A, B, C, D) in a single row of a table.
  2. Overlay a dynamic number inside or on top of the corresponding SVG icon based on a calculated value. Ideally, the numbers should appear inside the icon itself, similar to how DAX measures generate SVG images dynamically.

I created a DAX measure to return the corresponding icon URL based on the status and added the measure to a Table visual. The icons however do not display correctly even when I set the Data Category to "Image URL". Iโ€™m also struggling to figure out how to overlay dynamic numbers on top of or inside the icons. 
Here is an example of the measure I created for this porpuse:

StatusA_SVG =
IF(
NOT(ISBLANK([StatusAValue])),
"<svg width='40' height='40' xmlns='http://www.w3.org/2000/svg'>
<circle cx='20' cy='20' r='18' fill='blue' />
<text x='20' y='25' font-size='16' fill='white' text-anchor='middle'>" & [StatusAValue] & "</text>
</svg>",
BLANK()
)


Is there a way to overlay dynamic numbers on top of external SVG icons in Power BI, similar to how text can be added to dynamically generated SVGs in DAX? 
If overlaying numbers directly inside SVG icons isnโ€™t possible, are there alternative approaches to display icons and their associated numbers together in a table format?

I would really appreciate any guidance or suggestions on the best way to display these status icons with dynamic numbers in Power BI.

Thanks in advance for your help!

 

 

 

1 ACCEPTED SOLUTION
lbendlin
Esteemed Contributor III

You are nearly there, just need to make your text string look like an actual image URL.

 

Add the required prefix as explained here.

 

Use SVG Images in Power BI: Part 3 - DataVeld

 

You will also want to add a viewport.

View solution in original post

1 REPLY 1
lbendlin
Esteemed Contributor III

You are nearly there, just need to make your text string look like an actual image URL.

 

Add the required prefix as explained here.

 

Use SVG Images in Power BI: Part 3 - DataVeld

 

You will also want to add a viewport.

Helpful resources

Announcements
Users online (4,584)