CREATE SVG

COMPOSITE CARD
INTEGRATION WITH DAX
Benefits of using SVG with DAX

Integrating SVG with DAX measures in Power BI

offers unmatched customization opportunities and
dynamic interaction within visuals. This seamless
integration ensures optimal report performance and
interactivity.
 Composite Card
A composite card is a customizable visual that
combines various data elements like text, charts and
KPIs into a unified and interactive card. Let's look at
a composite card example featuring Operating Profit
KPIs and a dynamic chart.
Chart elements are
conditionally formatted to
highlight deviations from the
budget

On the left side of the composite card, we On the right side, we present a line and
feature key performance indicators (KPIs) column combined chart illustrating the
related to Operating Profit. Monthly Operating Profit compared to the
Budget.
Card Composition

1 KPI Name
2 KPI Metrics
3 Budget Comparisons
4 Last Year Comparisons
5 Column Chart
6 Budget Line Markers
7 X Axis Values
Step 1
Create DAX Measures
Create Measures for the current year profit, last
year profit, budgeted profit, variances and
percentage of change. This will be referenced in
the SVG integrated DAX measure
Step 2
Create another measure for Card Visual, and
2.1 Define the variables, colors for the text and
conditional formatting for column chart

This includes the variables for spacing, dimensions

and colors used in the SVG.
2.2 Data Preparation and additional supporting
variables

This prepares the data for the chart by filtering and

adding necessary columns. For example,
calculating monthly actual and budgeted profit.
2.3 SVG KPI Text Component

Here, we format the text components for

displaying KPIs such as operating profit, budget,
and last year's profit.
2.4 SVG Chart Component including the budget line
markers

Create SVG string for the KPI texts and column

charts
Note - You have to insert the SVG code in double
quotation marks (“ ’’)
2.5 Finally assemble the components to create the
complete SVG image.
Step 3
Once you have created the SVG integrated DAX
measure, select the measure in the image section in
New cards visual.