5 KPI Card Examples Created With HTML in Power BI
As dashboard designers, we know that KPI cards play a crucial role in the structure of dashboards, such that even sometimes, a whole dashboard might be dedicated only to KPIs (KPI Dashboard).
On the other hand, HTML is the language for the structure of web pages. Using HTML in Power BI can help immensely in the alignment of text or numbers; Also, by adding CSS, we can add color or style to every component. Besides the alignment, another advantage of using HTML with CSS in Power BI is that we can format every element based on our desired conditions, even for the border of visuals.
In this article, I demonstrated five examples of KPI cards that I created with HTML and CSS in Power BI. I tried to make the KPI cards simple and straightforward. In the below examples, I put multiple KPI cards just for demonstrations, but the code is for the last card.
HTML Custom Visual
I used below HTML custom visuals in my reports, but in this article, because of the character limit of the HTML VizCreator, I used the HTML Content visual. You can import them by clicking on Get more visuals in Power BI and start coding in a measure and drag those measures into these visuals.
1- Simple KPI Card:
KPI profit =
VAR _profit = FORMAT([Profit], "$#,##0")
VAR _change = FORMAT([MoM change] , "0.00%")
VAR _sign = IF([MoM change] >= 0, "<span style='color: green;'>▲",
"<span style='color: red;'>▼" )
RETURN
"<table style='width:300px; height:150px; border:1px solid;
border-color:#d3d3d3; border-radius: 15px 15px 15px 15px;
background-color:#eff066'>
<tbody>
<tr>
<td style='width: 10%;'></td>
<td style='width: 90%; color: black'>Profit  
<b> <span style='font-size:30px'>"&_profit&" </b> </td>
</tr>
<tr>
<td style='width: 10%;'></td>
<td style='width: 90%'>"&_sign&"
<b><span style='font-size:14px;color: black'>"&_change&"</b>
<span style='font-size:12px; color: black'> vs last month
</td>
</tr>
</tbody>
</table>" 2- Simple KPI Card With Line Break:
KPI with line =
VAR _profit = FORMAT([Profit], "$#,##0")
VAR _change = FORMAT([MoM change] , "0%")
VAR _sign = IF([MoM change] >= 0, "<span style='color: green;'>▲",
"<span style='color: red;'>▼" )
RETURN
"
<table style=' width: 250px; height: 150px; border: 1px solid;
border-color:black; border-radius: 5px 5px 5px 5px;
background-color: #343434'>
<tbody>
<tr>
<td colspan='2' style='font-size:20px; color:white; text-align:center;
vertical-align: middle'><b> Profit </b> </td>
</tr>
<tr>
<td colspan='2'><hr style='height:1px; width:230px; margin: auto;
border:none; background: white'> </td>
</tr>
<tr>
<td style='width: 50%; text-align:center; vertical-align: middle'>
<span style='font-size:20px; color: white'>"&_profit&"
</td>
<td style='width: 50%; text-align:center; vertical-align:middle'>"&_sign&"
<span style='font-size:18px; color: white'>"&_change&"
</td>
</tr>
</tbody>
</table>
" 3- KPI Card with Gradient as Background:
KPI with gradient =
VAR _profit = FORMAT([Profit], "$#,##0")
VAR _change = FORMAT([MoM change] , "0.00%")
VAR _sign = IF([MoM change] >= 0, "<span style='color: green;'>▲" ,
"<span style='color: red;'>▼")
RETURN
"<table style='width: 300px; height: 150px; border: 1px solid;
border-color: #d3d3d3; border-radius: 15px 15px 15px 15px;
background: linear-gradient( 64.3deg,rgba(254,122,152,0.81) 17.7%,rgba(255,206,134,1) 64.7%,rgba(172,253,163,0.64) 112.1%);'>
<tbody>
<tr>
<td style='width: 10%;'></td>
<td style='width: 90%; color: black'>Profit   <b><span style='font-size:30px'>"&_cur_profit&"</b></td>
</tr>
<tr>
<td style='width: 10%;'></td>
<td style='width: 90%'>"&_f_change&" <b><span style='font-size:14px; color: black'>"&_change&"</b><span style='font-size:12px; color: black'> vs last month</td>
</tr>
</tbody>
</table>" 4- KPI Card with Gradient as Vertical Line:
KPI gradient vertical line =
VAR _Net = FORMAT([Net Sales], "$#,##0")
VAR _change = FORMAT([Net Sales change] , "0.00%")
VAR _sign = IF([Net Sales change] >= 0, "<span style='color: green;'>▲" ,
"<span style='color: red;'>▼" )
VAR _color = IF([Net Sales change] >= 0, "green" , "red")
RETURN
"<div style='border-left: 8px solid; height: 110px;
border-image:
linear-gradient(to bottom,"&_color&",rgba(0, 0, 0, 0)) 1 100%'
>
<p style='font-size:22px'> Net sales</p>
<h1> "&_Net&" 
<span style='font-size:16px'>"&_sign&" "&_change&"
</h1>
</div>
"5- KPI Card with Progress Bar:
Progress Bar Stores =
VAR _1_target = Stores[Store 1 target]
VAR _2_target = Stores[Store 2 target]
VAR _3_target = Stores[Store 3 target]
VAR _4_target = Stores[Store 4 target]
RETURN
"
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: 50px 30px 50px 30px 50px 30px 50px 30px 50px;
background: linear-gradient(to right, #F3F9A7, #CAC531);
padding: 10px;
}
.grid-item {
padding: 10px;
font-size: 30px;
text-align: center;
}
.grid-item-1 {
padding: 20px;
font-size: 16px;
text-align: left;
}
.grid-item-2 {
padding: 5px;
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class='grid-container'>
<div class='grid-item-2'><b>Stores Targets</b></div>
<div class='grid-item-1'>Store one <span style='font-size:14px'>
"&_1_target&"%</div>
<div class='grid-item'>
<progress style='width:100%; height:25px; accent-color: #5A5A5A'
max='100' value='"&_1_target&"'>
</progress></div>
<div class='grid-item-1'>Store two <span style='font-size:14px'>
"&_2_target&"%</div>
<div class='grid-item'>
<progress style='width:100%; height:25px; accent-color: #5A5A5A'
max='100' value='"&_2_target&"'>
</progress></div>
<div class='grid-item-1'>Store three <span style='font-size:14px'>
"&_3_target&"%</div>
<div class='grid-item'>
<progress style='width:100%; height:25px; accent-color: #5A5A5A'
max='100' value='"&_3_target&"'>
</progress></div>
<div class='grid-item-1'>Store four <span style='font-size:14px'>
"&_4_target&"%</div>
<div class='grid-item'>
<progress style='width:100%; height:25px; accent-color: #5A5A5A'
max='100' value='"&_4_target&"'>
</progress></div>
</div>
</body>
</html>
"
Progress Bar KPI card =
VAR _profit = FORMAT([CUR], "$#,##0")
VAR _change = FORMAT([MoM change] , "0.00%")
VAR _sign = IF([MoM change] >= 0, "<span style='color: green;'>▲</span>",
"<span style='color: red;'>▼</span>" )
VAR _target= [Profit Target]
RETURN
"
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: minmax(30px, auto);
background: linear-gradient(to right, #F3F9A7, #CAC531);
border-radius: 15px 15px 15px 15px;
padding: 10px;
}
.grid-item {
padding: 20px;
font-size: 20px;
text-align: center;
}
.grid-item-2 {
padding: 20px;
font-size: 60px;
text-align: center;
}
</style>
</head>
<body>
<div class='grid-container'>
<div class='grid-item'><b>Profit</b>
<span style='font-size:14px'>(target $120k)</span>
<progress style='width:120px; height:18px;
accent-color: #5A5A5A'; max='100'; value='"&_target&"'>
</progress>
</div>
<div class='grid-item-2'><b>"&_target&"</b>
<span style='font-size:22px'>%</span><br>
<span style='font-size:16px'>
( "&_profit&" "&_sign&""&_change&" MoM )
</div>
</div>
</body>
"Resources:
I learned a lot about HTML in Power BI and how to use it by watching Youtube videos on the BI Samurai Youtube channel. Also, there is a comprehensive resource of Power BI files on the BI Samurai website; that shows every specific HTML use case in Power BI.
I learned the basics of HTML and CSS from the freeCodeCamp responsive web design course. But after I learned the basics, I googled what I wanted to do. Also, learning CSS grids and HTML table tags helped me a lot in aligning objects.
I used the CSS Gradient website for creating gradients, and I just copied the code and pasted it into my code as the background of KPI cards. It is a handy website, and even if you don’t have time, you can use the pre-made gradients of their websites.
Conclusion:
At first, seeing the entire code might be scary. But most of it is simply a repetition of code from other examples. The learning curve might be steep to learn HTML and CSS, but the outcome is something worth it. We can do many things with HTML in Power BI, and the number of possible custom things we can add to our dashboards is endless. Here, I just showed a few examples of them. I hope you like it.
Thanks for reading.
