How to customize labels in a New card visual
If you are used to the standard Power BI KPI card, the new card visual might be a bit tricky.
You can make many adjustments, and on LinkedIn, you will find the most beautiful examples. But when you're in a room with colleagues or kids, and you're trying to focus on a simple tweak, it can be overwhelming 😅.
In this article, I'll explain the steps I took to go from 2 separate KPI cards with current year (CY) and last year (LY) values to 1 new card visual with both KPIs, CY, LY, and a third measure.
Trends will be added later in Stage 5, till that moment I will add them the old way like above.
The "old" situation
Let's start with the "old" visual, the KPI card.
It's user-friendly. Once you figure out you need to include "Year" in the Trend axis box, it becomes easy to use. It provides a value, and a target number, and shows "a distance to goal."
You can also choose to include an icon and use conditional formatting for colors. It looks tidy, and it's straightforward to use and understand.
However, I didn't like the trendline inside the KPI visual, so I added simple line charts next to the KPI visuals to display the trend.
For me, this KPI visual works well, until you want additional measures for comparing or referring, such as a target next to CY and LY.
To wrap up this section about the "old visual, adding icons in the KPI visual isn't as straightforward and neat. I used to avoid them.
The new card visual concept
In my view, the idea behind the new card visual is that you can add as many KPIs as you want, in 1 visual.
Once you include at least 1 reference label to a KPI, all KPI "boxes" are split into 2 sections:
Especially at the start, it's helpful to consistently collapse all Format options to maintain an overview.
The formatting section can be divided into 4 categories:
The easiest way to format your total card is from top to bottom. Only move to the next step if you've completed the previous one entirely. If not, it can get very confusing.
Formatting the overall Card visual
After opening a new card visual, you can include as many KPIs as you want. They will appear in your visual as a kind of list.
In the "Layout" section, you can choose the grid to display your KPIs.
Formatting the upper section
In the "Callout values" section, you can format all the KPI values uniformly using "All" or individually. For instance, you can add or remove decimals to All, and then, change some individually.
Here you can also use conditional color formatting, like the below for Discount (%) and Net Turnover($).
Additionally, you have the option to modify labels and select their position, either above or below the values (this works only in All).
If you collapse all categories once more, you'll find the "Images" section. Here, you can include icons in the upper section of all KPIs. (LinkedIn post about the used icons)
Formatting the reference labels
Once again, close all the categories and only open "Reference labels."
This section begins with "Apply settings to." Here, you can choose between "All KPIs" or choose just one.
For easier formatting, it's recommended to start by adding just one label to one series (KPI). Once you've added just one, the formatting becomes much simpler.
After adding a label, go back to "All" and activate all the boxes below.
Recommended by LinkedIn
From this point, open each item one by one and format the card according to your preferences.
You'll see the changes directly in your visual, making it more straightforward. Open and close the categories one by one to maintain an overview. For now, skip the Detail section.
This is where it might get confusing.
Apply settings to a KPI
This snapshot is a part of the card visual, it shows 1 KPI. As an example, I've chosen to add 2 labels to this KPI, 1 with an extra Detail, the 108,1% with the icon.
In the "old" KPI visual, this was very simple to add. Here, I used 3 extra measures per KPI. One %YOY measure, one to add the icon, and one to color the value and the icon.
And, 2 basic measures to set the colors, so I'm able to change all the colors at a glance.
CF negatief = "#FF0000"
CF positief = "#70AD47"
% Turnover CY vs LY = ([Net Turnover ($)]/[Net Turnover ($) LY])-1
% Turnover CY vs LY CF = FORMAT([% Turnover CY vs LY]; "0.0%") & IF([% Turnover CY vs LY] < 0 ; " ▼" ; " ▲" )
% Turnover CY vs LY CF Color = IF([% Turnover CY vs LY] > 0; [CF positief] ; [CF negatief])
Formatting the title and the value
To format the title and the value of a label, you need to repeat the same steps until you've applied the formatting to all of them.
Start again for the next label.
Formatting the Detail
You can include a "Detail" for all labels, which can be a value, an icon, or a combination of both. It took me some time to understand how to add the small arrow, similar to what I was used to in the KPI card and had seen in various LinkedIn posts about reference labels, to my own card visual.
Then I realized it's all in DAX.
The method is the same as above.
Close everything except "Detail". Go through the Series/ KPIs, label by label, and decide if you need to add a Detail yes or no.
If so,
At 1, you add the DAX measure with the conditional formatting arrow up and down (see above).
At 2, here you choose "Field value" and select the DAX measure with the conditional formatting for the color (see above).
Wrapping up
I always like to try out new features in the field of Power BI data visualization, like previously with on-object and field parameters. It took me a few days to understand how this new card visual operates. It's not intuitive; you need guidance from a demo or an article. I hope this article will assist you in beginning your own journey.
Constructing a new card visual with labels and details requires a significant effort. However, I believe that with a structured approach, and some practice, it will prove effective and provide you with considerable flexibility.
References
Youtube video I used from MiTutorials: Link to the video about reference labels
Post of Brian Julius about conditional formatting: Link to the post
Microsoft Learn New Card Visual: Link to Learn
Post on LinkedIn from Miguel Myers : Link to the post
YouTube with Christopher Wagner, MBA, MVP , and Miguel Myers : Link to YouTube
📊Data-Dingen: Dashboards voor betere resultaten ✨️ Haal méér uit je data! Kennismaken? 📧Marieke@data-dingen.nl of 📞06-47212552
11moThanks Marjolein Opsteegh je kunt er mooie dingen mee maken maar het is idd wel een beetje uitproberen hoé dat precies moet 😀
Google Certified Data Analyst | Remote BI Consultant | SQL | Data Viz Enthusiast | Story Teller | E-commerce | Photographer | Graphic Designer
11moVery informative and detailed steps, thanks Marjolein Opsteegh !
LinkedIn Top Voice | Product Manager | Data Visualization & Power BI Speaker | #TheWeeklyChart Author | #DataDNA Ambassador
11moGreat share Marjolein Yes, I agree. The transition to the new KPI and creating the same graphics that we see on social media is not the same journey. And I still think the shadow option can be optimised in KPI. But images and grid view settings are quite UX friendly.
6x Linkedin Top Voice | Lifelong Data Geek | IBCS Certified Data Analyst | Power BI Expert | DAX Heretic | Data Mad Scientist, mixing BI, R, M, AI, PKM, GIS and DS
11moMarjolein - Terrific article! I agree with you 💯% - the New Card and Reference Labels are both terrific, but developing a really great KPI still take a lot of skill, in choosing the right metrics, designing the card well, and executing the nuts and bolts to get it to look exactly the way you want. I’ve gotten an early look at a new custom viz that should be arriving soon that makes all of this ** much ** easier. Will be interesting to revisit this when that hits…
Founder Data BI Eliese. / Reiki beoefenaar. Duizendpoot die zich aan het ontwikkelen is in het maken van dashboards. #PowerBi #Werkgeluk #PersoonlijkeOntwikkeling #Zelfliefde
11moGeweldig gelukt 👍🏻 en bedankt voor het delen