Vibe-Coded Custom Visual for Power BI: KPI Card With Sparkline, no SVG, fully Accessible! 📈
- Elena Drakulevska
- Mar 16
- 4 min read
Sometimes you start experimenting with something small… and suddenly a whole little universe appears.
This happened while I was playing with the idea of a custom KPI card visual in Power BI.
I absolutely love KPI cards, but I’ve never shipped a custom SVG KPI to clients before. Once you do that, they can get a bit… stuck with it.
So I decided to explore a different path.
Following the fantastic tutorial by Phil Seamark, I built my first custom visual!
And I had SO much fun with it!!
The result is a compact KPI visual that combines a KPI value, context, and trend in one place without requiring SVG coding!
Current KPI Card Functionality ✨
Right now the visual includes:
KPI value + label
Comparison value
Optional sparkline
Toggle between line sparkline or bar sparkline (yes… rounded bars)
Option to show or hide axis labels
Support for tooltips
And here’s something that made me especially happy:
It’s accessible. ♿
Screen readers can read the KPI value, comparison, sparkline, and supporting information, which is something people often assume isn’t possible with this type of card visuals.
I also hid an Easter egg (another cool feature), can you find it?
No SVG Coding Required ✨
One of the biggest barriers with SVG visuals in Power BI is that they often feel like a black box. You write complex DAX. You embed SVG code. And once it works… you almost don’t want to touch it again.
This visual takes a different approach. You don’t need to write SVG code at all.
Everything can be configured directly in the Power BI formatting pane, which means you can actually see what you built and adjust it like you would with any other visual.
This opens up a really interesting possibility: You can start delivering custom visuals to clients without locking them into something they can’t understand or modify.
Instead of handing over a mysterious SVG measure, you give them something they can explore, tweak, and use with confidence.
And that makes custom visuals a lot more practical in real-world projects.
Why Sparklines? (A UX Perspective)
People sometimes say sparklines don’t show enough information.
I actually see them differently. So, it depends!
Sparklines are not meant to replace full charts. Their purpose is instant pattern recognition.
They help you answer questions like:
Is the trend going up or down?
Is the pattern stable?
Is something unusual happening?
All of that can be understood at a glance.
And if you do want more detail, the visual gives you options:
Turn on axis labels
Hover to see exact values
So it becomes a hybrid: a compact trend indicator when you need speed, and a mini chart when you want more context.
Current Limitations ⚠️
This visual is still in beta, so a few features are not there yet.
At the moment, there is no support for:
conditional formatting
targets or goal markers
multiple KPIs in one visual
some of the layout flexibility you normally get with native visuals, like padding and spacing between the title, value, and supporting elements
I wanted to release it now so people can start experimenting with it instead of waiting for a “finished” version.
So think of this as version 0.9.0.0: already fun to use, already very capable, and still very much evolving.
More is coming, my brain is racing with ideas!
How To Build a Custom Visual in Power BI 🧭
If you’re curious about building your own custom visual, I followed the step-by-step guide from Phil Seamark. Also, check out some crazy stuff he has built!!
A couple of small reminders from my side if you try it yourself:
Install everything from the tutorial and restart your laptop
Make sure you change to the project directory in the terminal
Start the visual server in one terminal and work in another (otherwise the server might stop working)
Once everything is set up, you’re ready to start experimenting.
Want to Try the KPI Card Yourself? 🚀
You can download the visual and start experimenting right away.
I’ve included two files:
.pbiviz file → packaged version so you can import the visual directly into Power BI
.pbix file → an example report showing how the KPI card is used
Download everything here: https://github.com/elenadrakul/moonstory-pbi
Have fun experimenting!
If there’s a feature you’d love to see in the next version, let me know. I’m already collecting ideas for future releases.
Your Turn 🌙
I’m very curious what you will build with this.
And even more curious if some of you decide to create your own custom visuals.
If you experiment with it:
✨ Tag us
✨ Follow & Subscribe to MoonStory
✨ Share what you build with the community
Because honestly, the best part of tools like this is seeing what other people create with them.
Happy designing and see you in the next orbit! Elena ✨
Comments