KPI Tree Documentation
Table of contents
Data
Formatting
- General
- Indicator
- Minichart
- Card layout
How to get it
You can obtain KPI Tree conveniently by using the "Get more visuals" function in Power BI Desktop or the Power BI Service.
A dialog box will appear, displaying a gallery of popular visuals and a search field. Use the search function and type "KPI Tree" or "pbi-consultants" to find our visual. The resulting page will provide general information, details on plans and pricing, as well as ratings and reviews. Clicking the blue "Add" button will include the visual in your current Power BI report, enabling you to use it.
Data
Hierarchy – Specifies the data fields that define the hierarchy of the tree. These fields typically serve as the name or description of the card.
To display images, set the corresponding field’s data category to "image-URL".
Note: The data type can vary across hierarchy levels.
Minichart – Defines the data field used for the x-axis in the card’s minichart.
Actual Value – Represents the first measure displayed on the card.
Target Value – Represents the second measure, used for comparison with the actual value.
Additional Info – Displays extra text or images on the card.
To show images, set the field’s data category to "image-URL".
Formatting
General
Hierarchy
Orientation – Specifies the layout direction of the hierarchy — either vertical or horizontal.
Alignment – Specifies how a parent node is aligned in relation to its child nodes within the hierarchy. Options include top/left or center, depending on the orientation.
Smart Alignment – When enabled, cards are dynamically repositioned based on the scroll position to maximize the number of visible hierarchy elements.
Space Between Cards – Controls the spacing between individual cards in the hierarchy.
Show Cards Without Value – Toggles the visibility of cards that lack measure values (e.g., actual, target, or additional info).
Note: Cards with empty hierarchy fields are always hidden.
Connecting Lines Width – Sets the stroke width of the lines connecting the hierarchy elements.
Connecting Lines Color – Defines the color of the connecting lines between cards.
Cards
Color – Sets the background color of the card.
Border Color – Defines the color of the card’s border.
Shape – Specifies the card shape: rectangular or square.
Border Width – Sets the stroke width of the card borders.
Rounded Corners – Defines the radius of the card’s rounded corners.
Padding – Sets the internal spacing (in pixels) between the card border and its content.
Minimum Width – Defines the minimum width a card can shrink to. The card width adjusts with available space until this limit is reached, after which a scrollbar appears.
Minimum Height – Defines the minimum height a card can shrink to. The card height adjusts with available space until this limit is reached, after which a scrollbar appears.
Maximum Size – Enables setting maximum dimensions (width and height) for cards. Cards expand to fill available space, but only up to the defined maximum size.
Value formatting
Decimal Places – Sets the number of decimal places displayed for the actual and target measure values.
Display Unit – Defines the display units (e.g., thousands, millions) for the actual and target measure values.
Delta % Decimal Places – Specifies the number of decimal places for the automatically calculated percentage delta (difference between actual and target).
Selection
Selected Stroke Width – Defines the thickness of the border (stroke) used to highlight a selected card. A thicker stroke helps visually distinguish selected cards from the rest.
Unselected Transparency – Sets the opacity level for unselected cards. Lower transparency values make unselected cards appear faded, helping to emphasize the selected ones.
Indicator
Indicator Style – Choose from various visual styles for the indicator, such as different arrows or symbols.
Positive Color, Neutral Color, Negative Color – Define the colors used to represent positive, neutral, and negative indicator states.
Neutral Percentage – Set the percentage range that should be considered neutral (i.e., neither positive nor negative).
Opacity – Adjust the transparency of the indicator. Useful when overlaying text or using the indicator as a background element within the card.
Reverse Indicator – Inverts the logic of the indicator: values below the target are shown as positive, and values above the target as negative (e.g., when visualizing costs).
Aspect Ratio – Stretch the indicator horizontally or vertically to customize its shape.
Minichart
Minichart Type – Choose between a line chart or an indicator area chart (an area chart with IBCS-style indication of actual vs. target). The indicator area chart has no additional configuration options.
Actual Line Color – Sets the color of the line representing the actual values in the line chart.
Target Line Color – Sets the color of the line representing the target values in the line chart.
Card Layout
Layout Areas
Layout Areas – The card can be divided into 9 layout areas by defining three rows and three columns. These areas can be used to position elements on the card.
Show Layout Areas – Toggles the visibility of the layout grid, helping you visualize and configure the placement of elements.
Row Configuration – The three rows are defined by setting the heights of the top and bottom rows (as percentages of the card height). The middle row automatically fills the remaining vertical space.
Column Configuration – The three columns are defined by setting the widths of the left and right columns (as percentages of the card width). The middle column automatically fills the remaining horizontal space.
Layout area assignment
Card Element Placement – Each card element — such as the hierarchy label (text, number, or image), actual value, target value, delta value, indicator, minichart, or additional info — can be assigned to one of the 9 layout areas, or to a larger area made up of multiple connected layout zones. This is done by specifying its horizontal and vertical position within the layout grid.