4.7. KPI containers

Analytics+ allows you to divide your KPIs into multiple containers, enhancing the readability of your KPIs and enabling you to display additional metrics.

Follow the steps outlined to add custom KPI containers.

STEP 1: There are 2 ways to create containers, from the toolbar or the on-object interaction menu.

Toolbar: Click the Add from the Design section

On object interaction: Click on the icon that appears when you select a card.

Adding a container from the toolbar

Adding a container from the ob-object interaction menu

STEP 2: You can add a new container and drag it to reposition or insert a container to the top/bottom/left/right of the default KPI container.

In the example, we've inserted a container at the bottom. You can select the type of element (chart, image, insight chart, metrics) from the on-object interaction options or the toolbar.

Selecting the element type from the toolbar

Selecting the element type from on-object interaction options

The animation shows how you can insert KPI containers and add different types of elements in just a few clicks.

Adding containers and inserting elements

STEP 3: When you have multiple elements in your KPI cards, you can easily align and position them with the Layers feature. Click Customize Layers to open the Layers side pane.

Groups: Instead of painstakingly positioning elements one by one, you can combine elements such that they are treated as a single entity and placed on the canvas. Learn more about working with Groups.

Flex: Flex containers also behave like groups but have additional fit and fill options. Learn more about working with Flex.

In the animation, notice how the text, image, and KPI metrics can be moved around like a single element after combining them.

Combining individual KPI elements

Container customizations

The Appearance menu for KPI containers provides options to easily customize the look and feel of the metrics section. Leverage the appearance menu to set the background color and opacity, and enable borders, shadows, and accent bars.

Click on a container to enable the appearance menu icon.

Container appearance menu

1. Background

Set a custom background color to highlight each container.

Background color for containers

2. Variance measure

Select the variance measure to drive the background color. This will override the background color set using the Background option.

Variance measure to drive the background color

3. Border

Set a border for the container.

Position: Choose between a border along the top/bottom/left/right or a border box.

Weight: Set the thickness of the container border.

Setting a border and thickness

Side and size: Set the corner radius. Choose the All option to set a uniform value for all corners, or choose Custom to set individual values.

Corner radius

Variance measure and color: Select a variance measure to drive the border's color. To set a custom border color, the Variance measure dropdown should be set to None.

Variance measure and color

4. Accent bar

Accent bars help users assess metrics in an instant without having to analyze the numbers.

Position and Weight: Accent bars can be placed at the top/bottom/left/right side of the container. Set the thickness of the bar using the Weight dropdown.

Setting the position and weight of accent bars

Variance measure and color: Select a variance measure to drive the accent bar color. To set a custom color, the Variance measure dropdown should be set to None.

Variance measure and color for accent bars

5. Shadow

Highlight your containers with shadows. You can set the position and color of the shadow.

Shadow for containers