Dashboard sizing options in Tableau - Dashboard Guide

Dashboard Mode - Dashboard sizing options

Dashboard Goal

Understand how different dashboard sizing options in Tableau affect the display and user experience across devices.

Sample Data: Sales by Region and Category

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

Dashboard Components

• KPI Card: Total Sales
  Formula: SUM([Sales]) = 6100
  Shows total sales across all regions and categories.
• KPI Card: Total Profit
  Formula: SUM([Profit]) = 1180
  Shows total profit across all regions and categories.
• Bar Chart: Sales by Region
  Shows sales totals for East (2200), West (2200), Central (1700).
• Pie Chart: Sales by Category
  Shows sales distribution: Furniture (1700), Technology (3600), Office Supplies (800).
• Table: Detailed Sales Data
  Shows all rows from sample data for reference.

Dashboard Layout

+----------------------+----------------------+
|      KPI: Sales      |      KPI: Profit     |
+----------------------+----------------------+
|      Bar Chart: Sales by Region           |
+------------------------------------------+
|      Pie Chart: Sales by Category         |
+------------------------------------------+
|      Table: Detailed Sales Data           |
+------------------------------------------+

Interactivity

Filters for Region and Category allow users to select specific data subsets. When a filter is applied:

• KPI cards update to show totals for the filtered data.
• Bar chart and pie chart update to reflect filtered sales distribution.
• Table shows only rows matching the filter criteria.

Dashboard sizing options affect how these components resize or scroll on different screen sizes:

• Fixed Size: Dashboard stays the same size; scrollbars appear if content overflows.
• Range Size: Dashboard resizes between minimum and maximum dimensions, adjusting layout accordingly.
• Automatic Size: Dashboard adjusts to fit the browser or device screen size dynamically.

Self Check

Question: If you add a filter for Region = East, which components update and what changes occur?

Answer: All components update:

• KPI Sales updates to 2200 (sum of East region sales).
• KPI Profit updates to 450 (sum of East region profit).
• Bar chart shows only East region bar.
• Pie chart shows sales distribution for East region categories: Furniture (1000), Technology (1200).
• Table shows only rows where Region is East.

Key Result

Dashboard demonstrating Tableau dashboard sizing options with sales KPIs, charts, and data table updating dynamically with filters.

Practice

1. Which Tableau dashboard sizing option automatically adjusts the dashboard size to fit the screen of the device viewing it?

easy

A. Range sizing

B. Fixed sizing

C. Automatic sizing

D. Custom sizing

Solution

1. Step 1: Understand Automatic sizing

   Automatic sizing lets Tableau adjust the dashboard size dynamically based on the device screen.

2. Step 2: Compare with other sizing options

   Fixed sizing uses a set size, Range sizing allows a size range, and Custom sizing is not a standard option.

3. Final Answer:

   Automatic sizing -> Option C

4. Quick Check:

   Automatic sizing = fits screen automatically [OK]

Hint: Automatic means it fits any screen size by itself [OK]

Common Mistakes:

• Confusing Fixed sizing with Automatic
• Thinking Range sizing adjusts automatically
• Assuming Custom sizing is a Tableau option

2. Which of the following is the correct way to set a Fixed dashboard size in Tableau?

easy

A. Select 'Fixed size' and enter width and height values

B. Choose 'Automatic' and specify minimum and maximum sizes

C. Pick 'Range' and leave width and height blank

D. Set 'Floating' objects to fixed size

Solution

1. Step 1: Identify Fixed size setting

   Fixed size requires selecting 'Fixed size' and entering exact width and height.

2. Step 2: Eliminate incorrect options

   Automatic does not require fixed dimensions, Range needs min and max sizes, Floating relates to objects, not dashboard size.

3. Final Answer:

   Select 'Fixed size' and enter width and height values -> Option A

4. Quick Check:

   Fixed size = set exact width and height [OK]

Hint: Fixed size means typing exact width and height numbers [OK]

Common Mistakes:

• Confusing Automatic with Fixed size
• Leaving width and height blank for Fixed size
• Mixing Floating object size with dashboard size

3. If you set a Tableau dashboard size to Range with minimum width 800px and maximum width 1200px, what happens when viewed on a 1000px wide screen?

medium

A. Dashboard width adjusts to 1000px

B. Dashboard width stays fixed at 800px

C. Dashboard width expands to 1200px

D. Dashboard does not display properly

Solution

1. Step 1: Understand Range sizing behavior

   Range sizing allows dashboard width to adjust between minimum and maximum values based on screen size.

2. Step 2: Apply screen width to range

   Since 1000px is between 800px and 1200px, the dashboard width will be 1000px.

3. Final Answer:

   Dashboard width adjusts to 1000px -> Option A

4. Quick Check:

   Range sizing fits screen width within min and max [OK]

Hint: Range sizing picks screen width if between min and max [OK]

Common Mistakes:

• Assuming dashboard stays at minimum width
• Thinking dashboard always expands to max width
• Believing dashboard breaks if screen size is in range

4. You set a dashboard to Fixed size 1000px by 800px, but on a small laptop screen it appears cut off. What is the best fix?

medium

A. Set Range sizing with smaller minimum width

B. Change sizing to Automatic

C. Increase Fixed size dimensions

D. Use Floating layout for all objects

Solution

1. Step 1: Identify problem with Fixed size

   Fixed size does not adjust to smaller screens, causing cut off on small laptops.

2. Step 2: Choose best sizing option to fix

   Automatic sizing adjusts the dashboard dynamically to fit the viewing screen, eliminating the cut off.

3. Final Answer:

   Change sizing to Automatic -> Option B

4. Quick Check:

   Automatic sizing = fits screen automatically [OK]

Hint: Automatic adjusts to fit the screen [OK]

Common Mistakes:

• Increasing Fixed size makes problem worse
• Setting Range sizing but not small enough minimum
• Confusing Floating layout with dashboard sizing

5. You want a dashboard that looks good on desktop and tablet but never smaller than 900px wide or larger than 1400px wide. Which sizing option and settings should you choose?

hard

A. Fixed sizing at 900px width

B. Fixed sizing at 1400px width

C. Automatic sizing with custom device layouts

D. Range sizing with min width 900px and max width 1400px

Solution

1. Step 1: Analyze sizing needs

   You want the dashboard width to vary but stay between 900px and 1400px for desktop and tablet.

2. Step 2: Match sizing option to requirements

   Range sizing lets you set minimum and maximum widths, exactly fitting the requirement.

3. Step 3: Eliminate other options

   Fixed sizing locks width, Automatic may go smaller than 900px, custom device layouts are more complex and not needed here.

4. Final Answer:

   Range sizing with min width 900px and max width 1400px -> Option D

5. Quick Check:

   Range sizing controls min and max dashboard width [OK]

Hint: Range sizing sets min and max width limits [OK]

Common Mistakes:

• Choosing Fixed sizing which is not flexible
• Assuming Automatic respects min width
• Overcomplicating with custom device layouts