bar KPI card

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

Need Help

BIstvan
2 years ago
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

6 Replies

BIstvan
Resolver I
2 years ago
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
  Impactful Individual
  2 years ago
  Hi BIstvan ,
  
  Can it be possible to show bars in different colors (each bar should have different color) ?

Anonymous

Not applicable

2 years ago

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&colon;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.

bar KPI card.pbix44 KB

BIstvan
Resolver I
2 years ago
Anonymous Indeed. With SVG images images you can do a lot more. Incorporate them in to tables or matrixes

BIstvan
Resolver I
2 years ago
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
  Resolver I
  2 years ago
  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

Forum Discussion

bar KPI card

6 Replies

Related content

Ranking KPI card

New PBI KPI Card?

KPI Card Question

Navigation from Card or KPI Card to report

KPI card?