bar KPI card

[powerbiexpert22]

can it be possible to show like below in KPI card?

[BIstvan]

@powerbiexpert22 You can build the bars with different colors. Now it depends if you use unicode shapes there are websites full of them.

Check the one below.
Unicode Shapes Text Symbols - Copy Paste Dump (r74n.com).

Or if you choose the SVG bar method then you need to edit the SVG code to fit your calculations. 

The color is the slightest issue

[BIstvan · Accepted solution]

@powerbiexpert22  Check the below measure using the SVG method. You can play with the colors at your will

PPT SVG BAR =

VAR PERC = [Sales21] / [Sales20] - 1

VAR PERCCOLOR1 =

    IF(PERC <= 0.1, "BLACK", "RED")

VAR PERCCOLOR2 =

    IF(PERC <= 0.2, "BLACK", "RED")

VAR PERCCOLOR3 =

    IF(PERC <= 0.3, "BLACK", "RED")

VAR PERCCOLOR4 =

    IF(PERC <= 0.4, "BLACK", "RED")

VAR PERCCOLOR5 =

    IF(PERC <= 0.5, "BLACK", "RED")

VAR PERCCOLOR6 =

    IF(PERC <= 0.6, "BLACK", "RED")

VAR PERCCOLOR7 =

    IF(PERC <= 0.7, "BLACK", "RED")

VAR PERCCOLOR8 =

    IF(PERC <= 0.8, "BLACK", "RED")

VAR PERCCOLOR9 =

    IF(PERC <= 0.9, "BLACK", "RED")

VAR PERCCOLOR10 =

    IF(PERC <= 1, "BLACK", "RED")

VAR IMG =

"data&colon;image/svg+xml;utf8,<svg width='1312' height='73' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' overflow='hidden'>

<defs><clipPath id='clip0'><rect x='109' y='614' width='1312' height='73'/>

</clipPath></defs><g clip-path='url(#clip0)' transform='translate(-109 -614)'>

<rect x='109' y='614' width='84.9999' height='73.0002' fill='"&PERCCOLOR1&"'/>

<rect x='194' y='614' width='52.0003' height='73.0002' fill='#FFFFFF'/>

<rect x='331' y='614' width='51.9999' height='73.0002' fill='#FFFFFF'/>

<rect x='468' y='614' width='52.0003' height='73.0002' fill='#FFFFFF'/>

<rect x='605' y='614' width='50.9999' height='72.0002' fill='#FFFFFF'/>

<rect x='246' y='614' width='84.9999' height='73.0002' fill='"&PERCCOLOR2&"'/>

<rect x='383' y='614' width='84.9999' height='73.0002' fill='"&PERCCOLOR3&"'/>

<rect x='520' y='614' width='84.9999' height='73.0002' fill='"&PERCCOLOR4&"'/>

<rect x='656' y='614' width='86.0003' height='72.0002' fill='"&PERCCOLOR5&"'/>

<rect x='740' y='614' width='51.9999' height='72.0002' fill='#FFFFFF'/>

<rect x='793' y='614' width='85.9999' height='72.0002' fill='"&PERCCOLOR6&"'/>

<rect x='927' y='614' width='85.9999' height='72.0002' fill='"&PERCCOLOR7&"'/>

<rect x='877' y='614' width='52.0002' height='72.0002' fill='#FFFFFF'/>

<rect x='1063' y='614' width='85.0002' height='72.0002' fill='"&PERCCOLOR8&"'/>

<rect x='1013' y='614' width='51.9999' height='72.0002' fill='#FFFFFF'/>

<rect x='1147' y='614' width='50.9999' height='72.0002' fill='#FFFFFF'/>

<rect x='1199' y='614' width='84.9999' height='72.0002' fill='"&PERCCOLOR9&"'/>

<rect x='1285' y='614' width='51.0002' height='72.0002' fill='#FFFFFF'/>

<rect x='1336' y='614' width='84.9999' height='72.0002' fill='"&PERCCOLOR10&"'/>

</g></svg>"

RETURN

IMG

[Anonymous]

Hi @powerbiexpert22 ,

Your solution is great, @BIstvan . It worked like a charm! Here I have another idea in mind, and I would like to share it for reference. 

You can use svg images to draw the desired pattern. You can refer to the example below.

Measure = 
"data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg' width='102' height='12'>
<rect x='0' y='0' stroke='green' stroke-width='4' width='102' height='12' fill='rgba(0,0,0,0)'>  </rect>
    <rect x='1' y='1' width='"&100*[Private Count]&"' height='10' fill='deepskyblue' />
    <rect x='"&1+100*[Private Count]&"' y='1' width='"&100*[Public Count]&"' height='10' fill='blue'/>
    <rect x='"&1+100*[Private Count]+100*[Public Count]&"' y='1' width='"&100*[Business Count]&"' height='10' fill='red'/> 

<text x='"&100*[Private Count]&"' y='8' text-anchor='end' font-size='5'>"&100*ROUND([Private Count],2)&"%" &"</text>
<text x='"&100*[Private Count]+100*[Public Count]&"' y='8' text-anchor='end' font-size='5'>"&100*ROUND([Public Count],2)&"%" &"</text>
<text x='100' y='8' text-anchor='end' font-size='5'>"&100*ROUND([Business Count],2)&"%" &"</text>

</svg>"

Best Regards,

Clara Gong

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

[BIstvan]

@Anonymous  Indeed. With SVG images images you can do a lot more. Incorporate them in to tables or matrixes

[BIstvan]

@powerbiexpert22  You can check the below video from @Bas Dohmen

It explains you in detail how to do it

https://youtu.be/KgkOY4-sUUQ?si=3b9AcpmVclDYPNNF

[powerbiexpert22]

Hi @BIstvan ,

Can it be possible to show bars in different colors (each bar should have different color) ?