# 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 <img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FOL3MrrWHdbvuQJKOjQyv%2Fimage.png?alt=media&#x26;token=992384d6-7aa3-4e59-b050-129216341155" alt="" data-size="line">icon that appears when you select a card.

<div><figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FM067brQCDt7KNZPfQEPW%2Fimage.png?alt=media&#x26;token=e9495028-3933-4ce2-af6b-5c293c753999" alt=""><figcaption><p>Adding a container from the toolbar</p></figcaption></figure> <figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FhRsgXnRsytC04RMppiqo%2F2024-11-05_17h19_02.png?alt=media&#x26;token=825d799c-b14c-41a0-b9de-185ae83a576b" alt=""><figcaption><p>Adding a container from the ob-object interaction menu</p></figcaption></figure></div>

**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.&#x20;

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.

<div><figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FqRbNbtmVuWWLy9AALGBC%2Fimage.png?alt=media&#x26;token=2211dddd-ace9-4932-bfd2-aa74da91e051" alt=""><figcaption><p>Selecting the element type from the toolbar</p></figcaption></figure> <figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FvJoLT8EIF9X4o5PdnDeN%2F2024-11-05_17h25_02.png?alt=media&#x26;token=e8efd411-404c-4e09-827a-d5b91247b24d" alt=""><figcaption><p>Selecting the element type from on-object interaction options</p></figcaption></figure></div>

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

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FYFyq4XTBEFpM6PXEAMbA%2FUntitled%20Project.gif?alt=media&#x26;token=61e08c69-b5bb-402a-bd69-c00d52d3284b" alt=""><figcaption><p>Adding containers and inserting elements</p></figcaption></figure>

**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.](https://docs.inforiver.com/analytics+/working-with-analytics+/4.-cards/4.7.-kpi-containers/working-with-groups)

**Flex:** Flex containers also behave like groups but have additional fit and fill options. [Learn more about working with Flex.](https://docs.inforiver.com/analytics+/working-with-analytics+/4.-cards/4.7.-kpi-containers/working-with-flex-components)

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

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FLSndyYKcuVVm39XckR5u%2FUntitled%20Project.gif?alt=media&#x26;token=02b1d22c-00d5-4216-9777-01ebed8acc7e" alt=""><figcaption><p>Combining individual KPI elements</p></figcaption></figure>

### 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.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FSW2krlGs3CT8TZpVcNUo%2Fimage.png?alt=media&#x26;token=880100fe-4e23-40e4-9532-d768fafc84e9" alt=""><figcaption><p>Container appearance menu</p></figcaption></figure>

#### 1. Background

Set a custom background color to highlight each container.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2Fh64hCIX0PbSK5HOLA7FJ%2Fimage.png?alt=media&#x26;token=e51ef6ce-7067-4c07-829a-05ba074eb348" alt=""><figcaption><p>Background color for containers</p></figcaption></figure>

#### 2. Variance measure

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

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FKGavzUlrkR8QL30lDGgZ%2Fimage.png?alt=media&#x26;token=04a46675-784c-4302-80a0-b3dc5e96a5f8" alt=""><figcaption><p>Variance measure to drive the background color</p></figcaption></figure>

#### 3. Border

Set a border for the container.&#x20;

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

**Weight**: Set the thickness of the container border.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FHzcROaeowDkn0yvypbwI%2Fimage.png?alt=media&#x26;token=4728e61c-90ec-4269-a2fb-0e74e687e714" alt=""><figcaption><p>Setting a border and thickness</p></figcaption></figure>

**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.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FDkTxzyXPeeqPNl86zKGO%2Fimage.png?alt=media&#x26;token=2e73af03-6ba2-4ae6-a1b8-a3a54874fdb5" alt=""><figcaption><p>Corner radius</p></figcaption></figure>

**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.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FIctQYVMcXd4xpzgO5zG0%2Fimage.png?alt=media&#x26;token=62304f02-ea9c-45b2-9cf7-ac46eb1a3ffd" alt=""><figcaption><p>Variance measure and color</p></figcaption></figure>

#### 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.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FEn1oaHlIm96WYsdNAyyF%2Fimage.png?alt=media&#x26;token=b19ffd50-cad8-4031-9978-139b2f16d5f0" alt=""><figcaption><p>Setting the position and weight of accent bars</p></figcaption></figure>

**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.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FDwkCDXukoQ6o6z23kABG%2Fimage.png?alt=media&#x26;token=0f5b4c27-a151-44ca-ac6d-e93a22328023" alt=""><figcaption><p>Variance measure and color for accent bars</p></figcaption></figure>

#### 5. Shadow

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

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2F8dJkehfSko9OakiBksxR%2Fimage.png?alt=media&#x26;token=554c776d-8141-4804-bbea-302341bb34f0" alt=""><figcaption><p>Shadow for containers</p></figcaption></figure>
