HTML visuals in Power BI
Power BI has become a staple tool for data analysts and business intelligence developers, offering powerful capabilities for visualizing and analyzing data. While Power BI provides an extensive library of visualization options out of the box, there are times when users crave more flexibility and customization. This is where the use of HTML visuals comes into play, allowing users to unleash their creativity and build highly customized visualizations within Power BI reports.
Understanding HTML Visuals
HTML visuals in Power BI enable users to embed custom HTML code directly within their reports, offering virtually limitless possibilities for visualization design. This feature empowers users to create unique visualizations that go beyond the capabilities of standard Power BI visuals.
Advantages of HTML Visuals
How to visualize HTML visuals in Power BI?
By using a custom visual for HTML codes like below:
领英推荐
Create a LinkedIn button like the one I have:
LinkedIN Icon = "<!DOCTYPE html>
<html lang="""&"en"""&">
<head>
<meta charset="""&"UTF-8"""&">
<meta name="""&"viewport"""&" content="""&"width=100px, height=200px, initial-scale=1.0"""&">
<title>Social Icons</title>
<style>
ul {
list-style: none;
}
.example-2 {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: flex-end;
}
.example-2 .icon-content {
margin: 0 10px;
position: relative;
}
.example-2 .icon-content .tooltip {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
color: #fff;
padding: 6px 10px;
height: 25px;
max-width: 100px;
white-space: nowrap;
border-radius: 5px;
opacity: 0;
visibility: hidden;
font-size: 10px;
transition: all 0.3s ease;
}
.example-2 .icon-content:hover .tooltip {
opacity: 1;
visibility: visible;
top: -30px;
}
.example-2 .icon-content a {
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
color: #4d4d4d;
background-color: #fff;
transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover {
box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
}
.example-2 .icon-content a svg {
position: relative;
z-index: 1;
width: 20px;
height: 20px;
}
.example-2 .icon-content a:hover {
color: white;
}
.example-2 .icon-content a .filled {
position: absolute;
top: auto;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background-color: #000;
transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover .filled {
height: 100%;
}
.example-2 .icon-content a[data-social="""&"linkedin"""&"] .filled,
.example-2 .icon-content a[data-social="""&"linkedin"""&"] ~ .tooltip {
background-color: #0274b3;
}
</style>
</head>
<body>
<ul class="""&"example-2"""&">
<li class="""&"icon-content"""&">
<a
href="""&"https://www.dhirubhai.net/in/minasaad1/"""&"
aria-label="""&"LinkedIn"""&"
data-social="""&"linkedin"""&"
>
<div class="""&"filled"""&"></div>
<svg
xmlns="""&"https://www.w3.org/2000/svg"""&"
width="""&"16"""&"
height="""&"16"""&"
fill="""&"currentColor"""&"
class="""&"bi bi-linkedin"""&"
viewBox="""&"0 0 16 16"""&"
xml:space="""&"preserve"""&"
>
<path
d="""&"M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"""&"
fill="""&"currentColor"""&"
></path>
</svg>
</a>
<div class="""&"tooltip"""&">My LinkedIn</div>
</li>
</ul>
</body>
</html>
"
Best Practices for Using HTML Visuals
Let me know your opinion and if you used HTML visuals before
Where could we study HTML specifically for PBI visuals ? This knowledge can unlock new levels for designing skills.
Data Strategy | Systems Thinking | AI & Analytics | Lean Six Sigma
6 个月Next level Power BI wizardry Mina Saad ?? will definitely take a look at html for future projects ????
Assistente de Sistemas II na Cesari Multimodal | Power BI | SQL | Analytics |
6 个月Guilherme Sozio Borlenghi
Data & BI Engineer | Power BI | SSAS Tabular | DAX | SQL | Python
6 个月Wow, I'll definitely give it a try.