Forum Discussion

Nfuentes86's avatar
Nfuentes86
Helper I
1 year ago
Solved

Icon colors

 

Help! I need the icon color to acutally display YELLOW ( second pic is photoshop). The standard yellow color on power bi is more of an orange color. I decided to try to create my own icons (first pic) and its not displaying the circle in my matrix. HELP!

Need Help
  • danextian's avatar
    danextian
    1 year ago

    Hi Nfuentes86 

    This is a sample DAX measure that returns an SVG i con based on certain conditions.

     

    Status Icon =
    VAR Threshold = 100000
    VAR SalesAmount = [Sales] -- Replace this with your actual measure
    VAR Color =
    SWITCH(
    TRUE(),
    SalesAmount >= Threshold, "#28a745", -- Green
    SalesAmount >= Threshold * 0.5, "#ffc107", -- Yellow
    "#dc3545" -- Red
    )
    VAR Circle =
    "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'>
    <circle cx='8' cy='8' r='6' fill='" & Color & "' />
    </svg>"
    RETURN "data&colon;image/svg+xml;charset=UTF-8," & Circle

     

    In conditional formatting - Icon - use field value and then this measure.

12 Replies

  • kushanNa's avatar
    kushanNa
    Super User
    1 year ago

    hi Nfuentes86 

     

    Something like this is what you need? 

     

     

     

    following is the Calculated column I used to generate the result 

     

    ResultWithIconq1 = 
VAR StartVal = 'Table'[FLAG]

VAR RedIconWithText = 
    "<svg xmlns='http://www.w3.org/2000/svg' width='70' height='16'>
        <circle cx='8' cy='8' r='6' stroke='black' stroke-width='1' fill='red'/>
        <text x='18' y='12' font-size='12' font-family='Segoe UI'>" & StartVal & "</text>
     </svg>"

VAR YellowIconWithText = 
    "<svg xmlns='http://www.w3.org/2000/svg' width='70' height='16'>
        <circle cx='8' cy='8' r='6' stroke='black' stroke-width='1' fill='yellow'/>
        <text x='18' y='12' font-size='12' font-family='Segoe UI'>" & StartVal & "</text>
     </svg>"

VAR GreenIconWithText = 
    "<svg xmlns='http://www.w3.org/2000/svg' width='70' height='16'>
        <circle cx='8' cy='8' r='6' stroke='black' stroke-width='1' fill='green'/>
        <text x='18' y='12' font-size='12' font-family='Segoe UI'>" & StartVal & "</text>
     </svg>"

VAR JustText =
    "<svg xmlns='http://www.w3.org/2000/svg' width='70' height='16'>
        <text x='5' y='12' font-size='12' font-family='Segoe UI'>" & StartVal & "</text>
     </svg>"

RETURN
    "data&colon;image/svg+xml;utf8," & 
        IF(StartVal < 1, RedIconWithText, 
            IF(StartVal >= 1 && StartVal < 2, YellowIconWithText, 
                IF(StartVal >= 2, GreenIconWithText, JustText)))

     

    column data category should be in Image URL format 

    • Syndicate_Admin's avatar
      Syndicate_Admin
      Administrator
      1 year ago

      Hello, I tried that DAX measure you put but what happens is that the icons don't come out as they would to you.

      • kushanNa's avatar
        kushanNa
        Super User
        1 year ago

        Hi Syndicate_Admin 

         

        you will need to change the svg properties in the DAX according to the size you need , just try to increase the number and play around with it untill you get the size you need and also once you are done , you can change the row width and height using this setting 

         

         

  • danextian's avatar
    danextian
    Super User
    1 year ago

    Hi Nfuentes86 

    This is a sample DAX measure that returns an SVG i con based on certain conditions.

     

    Status Icon =
    VAR Threshold = 100000
    VAR SalesAmount = [Sales] -- Replace this with your actual measure
    VAR Color =
    SWITCH(
    TRUE(),
    SalesAmount >= Threshold, "#28a745", -- Green
    SalesAmount >= Threshold * 0.5, "#ffc107", -- Yellow
    "#dc3545" -- Red
    )
    VAR Circle =
    "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'>
    <circle cx='8' cy='8' r='6' fill='" & Color & "' />
    </svg>"
    RETURN "data&colon;image/svg+xml;charset=UTF-8," & Circle

     

    In conditional formatting - Icon - use field value and then this measure.

  • v-kathullac's avatar
    v-kathullac
    Community Support
    1 year ago

    Hi Nfuentes86  ,

    we would like to follow up to see if the solution provided by the super users resolved your issue. Please let us know if you need any further assistance.

    If our super user response resolved your issue, please mark it as "Accept as solution" and click "Yes" if you found it helpful.


    Regards,

    Chaithanya.

  • v-kathullac's avatar
    v-kathullac
    Community Support
    1 year ago

    Hi @Nfuentes86  ,

    we would like to follow up to see if the solution provided by the super users resolved your issue. Please let us know if you need any further assistance.

    If our super user response resolved your issue, please mark it as "Accept as solution" and click "Yes" if you found it helpful.


    Regards,

    Chaithanya.

  • v-kathullac's avatar
    v-kathullac
    Community Support
    1 year ago

    Hi @Nfuentes86  ,

    we would like to follow up to see if the solution provided by the super users resolved your issue. Please let us know if you need any further assistance.

    If our super user response resolved your issue, please mark it as "Accept as solution" and click "Yes" if you found it helpful.


    Regards,

    Chaithanya.