Conditional formatting - want to see number and icon color coding

[data8888]

Hi, 

I am trying to get my conditional formating to look like this to show ranking data. Is this something that can be done? For now, I can only get it to show the "Circle" Icon with the data on the side. How do I make it so that it can be a Circle Icon with the data point in the middle of the circle with color coding - Red (lowest) to Green (highest). Any guidance or help is appreciated.

[lbendlin · Accepted solution]

Consider using SVG for that.

[v-karpurapud]

Hello @data8888 
Hope you are doing well!

I hope this information is helpful. Please let me know if you have any further questions or if you'd like to discuss this further. If this answers your question, please Accept it as a solution and give it a 'Kudos' so others can find it easily.

Thank you.

[v-karpurapud]

Hi @data8888 

I wanted to check if you had the opportunity to review the information provided. Please feel free to contact us if you have any further questions. If my response has addressed your query, please accept it as a solution and give a 'Kudos' so other members can easily find it.

Thank you.

[v-karpurapud]

Hi @data8888 

May I ask if you have resolved this issue? If so, please mark the helpful reply and accept it as the solution. This will be helpful for other community members who have similar problems to solve it faster.

Thank you.

[v-karpurapud · Accepted solution]

Hi @data8888

Thanks for reaching out to Microsoft Fabric Community Forum.

I appreciate the insights shared by @lbendlin . Thank you for your prompt response. 

Power BI does not support placing text inside an icon directly. However, we can dynamically generate an SVG column using DAX . This SVG will create a circle with the rank number inside it.  Follow these steps:

1. Create an SVG Column with Circles:

• In Power BI Desktop, navigate to the Modeling tab and select New Column. 
• Use the following DAX formula to generate the SVG for the circles.

DAX

Rating_SVG =

VAR RatingValue = 'Sheet3'[Rating]

VAR Color = "green"  

RETURN

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

   "<svg width='50' height='50' xmlns='http://www.w3.org/2000/svg'>

     <circle cx='25' cy='25' r='20' fill='" & Color & "' />

      <text x='25' y='30' font-size='16' font-weight='bold' fill='white' text-anchor='middle'>" & RatingValue

      </text>

 </svg>"

2. Format the SVG Column.

• In the Fields pane, select the Rating_SVG column, then navigate to the Column Tools tab and set the Data Category to "Image URL".
• Add the Rating_SVG column to a visual.

This will create a  circle with the number in the center.If the issue persists after these steps,  share the details.

If my response has resolved your query, please mark it as the Accepted Solution to help others. Additionally, I would appreciate a 'Kudos' if you found my response helpful.

Thank you!
 

[lbendlin · Accepted solution]

Consider using SVG for that.