Layout containers (horizontal, vertical) in Tableau - Dashboard Guide

Dashboard Mode - Layout containers (horizontal, vertical)

Dashboard Goal

Show how to organize dashboard elements using horizontal and vertical layout containers in Tableau to create a clean, easy-to-read report.

Sample Data

Region	Category	Sales	Profit
East	Furniture	1000	200
East	Technology	1500	300
West	Furniture	1200	250
West	Office Supplies	800	150
Central	Technology	1300	270
Central	Office Supplies	900	180

Dashboard Components

• KPI Card - Total Sales: SUM([Sales]) = 6700
• KPI Card - Total Profit: SUM([Profit]) = 1350
• Bar Chart - Sales by Region: Shows total sales for East (2500), West (2000), Central (2200)
• Pie Chart - Sales by Category: Shows sales distribution: Furniture (2200), Technology (2800), Office Supplies (1700)
• Layout Containers:
  • Horizontal container holds the two KPI cards side by side.
  • Vertical container holds the bar chart on top and pie chart below.

Dashboard Layout

+--------------------------------------------------+
| [Horizontal Container: KPI Cards]                 |
| +----------------+  +----------------+           |
| | Total Sales    |  | Total Profit   |           |
| |     6700       |  |     1350       |           |
| +----------------+  +----------------+           |
|                                                  |
| [Vertical Container: Charts]                      |
| +----------------------------------------------+ |
| | Bar Chart: Sales by Region                    | |
| | East: 2500, West: 2000, Central: 2200       | |
| +----------------------------------------------+ |
| +----------------------------------------------+ |
| | Pie Chart: Sales by Category                  | |
| | Furniture: 2200, Technology: 2800, Office    | |
| | Supplies: 1700                               | |
| +----------------------------------------------+ |
+--------------------------------------------------+
    

Interactivity

Adding a filter for Region updates:

• KPI Cards: Total Sales and Total Profit recalculate for selected region(s).
• Bar Chart: Shows sales only for selected region(s).
• Pie Chart: Updates sales distribution by category for selected region(s).

The horizontal and vertical containers keep the layout consistent while content updates dynamically.

Self Check

If you add a filter to show only Region = East, which components update and what are their new values?

• KPI Cards: Total Sales = 2500, Total Profit = 500
• Bar Chart: Shows only East region with sales 2500
• Pie Chart: Sales by Category for East: Furniture 1000, Technology 1500

Key Result

Dashboard demonstrating horizontal and vertical layout containers organizing KPI cards and charts with interactive region filtering.

Practice

1. What is the main purpose of using layout containers in Tableau dashboards?

easy

A. To organize dashboard items horizontally or vertically for better layout control

B. To create calculated fields for data analysis

C. To connect to different data sources

D. To filter data based on user input

Solution

1. Step 1: Understand what layout containers do

   Layout containers group dashboard elements either side-by-side (horizontal) or stacked (vertical).

2. Step 2: Identify the purpose in dashboard design

   This grouping helps keep the dashboard organized and easier to manage visually.

3. Final Answer:

   To organize dashboard items horizontally or vertically for better layout control -> Option A

4. Quick Check:

   Layout containers = organize items horizontally or vertically [OK]

Hint: Think of containers as boxes that hold items side-by-side or stacked [OK]

Common Mistakes:

• Confusing layout containers with data filters
• Thinking containers create calculations
• Assuming containers connect data sources

2. Which of the following is the correct way to add a vertical layout container in Tableau dashboard?

easy

A. Drag a Horizontal container from the Objects pane

B. Drag a Text object and rename it Vertical container

C. Use the Data pane to create a Vertical container

D. Drag a Vertical container from the Objects pane

Solution

1. Step 1: Identify how to add layout containers

   Tableau provides Horizontal and Vertical containers in the Objects pane for dashboard layout.

2. Step 2: Select the correct container type

   To add a vertical container, you must drag the Vertical container object from the Objects pane.

3. Final Answer:

   Drag a Vertical container from the Objects pane -> Option D

4. Quick Check:

   Vertical container = drag from Objects pane [OK]

Hint: Look in the Objects pane for Vertical container to drag [OK]

Common Mistakes:

• Dragging Horizontal container instead of Vertical
• Trying to rename Text object as container
• Looking in Data pane instead of Objects pane

3. Consider a Tableau dashboard with a horizontal container holding two vertical containers. If you add a new worksheet to the first vertical container, where will it appear?

medium

A. To the right of the existing worksheet inside the first vertical container

B. Below the existing worksheet inside the first vertical container

C. Above the existing worksheet inside the first vertical container

D. Outside the horizontal container

Solution

1. Step 1: Understand container nesting and layout

   A horizontal container arranges items side-by-side. Inside it, vertical containers stack items top to bottom.

2. Step 2: Adding worksheet to first vertical container

   Adding a worksheet to a vertical container places it below existing items in that container.

3. Final Answer:

   Below the existing worksheet inside the first vertical container -> Option B

4. Quick Check:

   Vertical container stacks items vertically = new item below [OK]

Hint: Vertical containers stack items top to bottom [OK]

Common Mistakes:

• Assuming horizontal container stacks vertically
• Thinking new worksheet appears to the right inside vertical container
• Placing worksheet outside containers accidentally

4. You created a dashboard with a vertical container but the items inside overlap and do not stack properly. What is the most likely cause?

medium

A. You accidentally used a horizontal container instead of vertical

B. You did not add the container from the Objects pane

C. You used a floating layout instead of tiled

D. You placed worksheets outside the container

Solution

1. Step 1: Identify layout types in Tableau

   Tableau dashboards support tiled and floating layouts. Floating items can overlap.

2. Step 2: Understand why items overlap in vertical container

   If the container or items inside are floating, they can overlap instead of stacking.

3. Final Answer:

   You used a floating layout instead of tiled -> Option C

4. Quick Check:

   Floating layout causes overlap, tiled stacks properly [OK]

Hint: Use tiled layout for containers to avoid overlap [OK]

Common Mistakes:

• Confusing container type with layout type
• Not checking if items are floating
• Assuming container must be added from Objects pane

5. You want to create a responsive Tableau dashboard where a horizontal container holds two vertical containers. The first vertical container has a filter and a legend stacked vertically. The second vertical container has two worksheets stacked vertically. How should you arrange the containers and items to ensure the dashboard resizes well on different screen sizes?

hard

A. Use tiled layout for all containers and items, nest vertical containers inside horizontal container

B. Use floating layout for containers and items to freely move elements

C. Place all items directly inside a single horizontal container without nesting

D. Use only vertical containers without horizontal containers

Solution

1. Step 1: Understand nesting for responsive design

   Nesting vertical containers inside a horizontal container allows side-by-side and stacked layouts that resize well.

2. Step 2: Use tiled layout for consistent resizing

   Tiled layout ensures items resize and align properly without overlap, unlike floating layout.

3. Step 3: Arrange items inside vertical containers stacked vertically

   Filters, legends, and worksheets stack vertically inside their containers for clarity and responsiveness.

4. Final Answer:

   Use tiled layout for all containers and items, nest vertical containers inside horizontal container -> Option A

5. Quick Check:

   Nesting + tiled layout = responsive dashboard [OK]

Hint: Nest vertical in horizontal and use tiled layout for best resizing [OK]

Common Mistakes:

• Using floating layout causing overlap on resize
• Not nesting containers properly
• Putting all items in one container causing clutter