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:

• The upper section with your KPI value, here you can also add an image/ icon.
• The bottom section with your reference labels.

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 first 4 lines are for formatting the overall Card visual.
• Callout values and images belong to the "upper section" of the KPI.
• Reference labels belong to the bottom section
• Cards are somewhat different; they belong to a single KPI, both in the upper and bottom sections.

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.

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.

1. Select the first series / KPI
2. Select the first label
3. Or add a new one
4. Select the label (again)
5. If you want to change the titel of the label, choose "custom"
6. You can for example add ":" to your title

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