22 Dashboard Structure and Components

What This Chapter Covers

A dashboard is more than a collection of charts, it is a structured visual argument built from components arranged to guide a reader through a sequence of findings. This chapter covers the structural principles of effective dashboard design: the information hierarchy, how to use layout containers to build consistent grid structures, the dashboard components beyond charts (filters, legends, images, text, web page objects, navigation buttons), and dashboard formatting at the workbook level. It also covers best practices for dashboard titling, white space management, and the design of filter controls, the interface elements through which users explore the dashboard.

flowchart TD
    A[Dashboard <br> Design Goal] --> B[Structure <br> Layout Grid]
    B --> C[Header <br> Title + KPIs]
    B --> D[Body <br> Charts Grid]
    B --> E[Controls <br> Filters + Nav]
    D --> D1[Primary View <br> Largest chart]
    D --> D2[Supporting Views <br> Context charts]
    D --> D3[Detail View <br> On-demand table]
    style A fill:#e3f2fd,stroke:#1976D2
    style B fill:#fff9c4,stroke:#F9A825
    style C fill:#e8f5e9,stroke:#388E3C

22.1 The Information Hierarchy in Dashboard Design

Designing for Attention Flow

Effective dashboards are designed around an information hierarchy, a visual structure that guides the reader’s eye from the most important information to the supporting detail, in the order that serves the analytical purpose.

The three-tier hierarchy:

Tier 1, The headline: The single most important number or finding for this dashboard. Often a KPI tile (e.g., Total Revenue, YTD Growth Rate) placed in the top-left or top-centre position. The eye reads dashboards left-to-right and top-to-bottom, so the top-left is the highest-attention position.

Tier 2, The primary chart: The main visualisation that answers the central question of the dashboard. This should be the largest chart on the canvas, taking up 40–60% of the visual area. Its dominant size signals importance and allows the reader to engage with the data at sufficient resolution.

Tier 3, Supporting charts: Smaller charts that provide context, breakdown, or comparison for the primary chart. These answer “why?” and “where?” for the finding shown in the primary chart.

Design implication: Every dashboard element should be assigned to one of these three tiers before being placed on the canvas. If you cannot articulate which tier an element belongs to, it may not belong on the dashboard at all.

22.2 Layout Container Structures

Building with Horizontal and Vertical Containers

Tableau’s Horizontal and Vertical layout containers are the building blocks of all complex dashboard layouts. Mastering nested containers enables you to build any grid-based layout.

Container nesting patterns:

Full-width header + two-column body: 1. Add a Vertical container to the canvas (fills the entire canvas). 2. Inside it, add a Horizontal container for the header row (Title text + KPI tiles). 3. Below the header, add a Horizontal container for the body row. 4. Inside the body Horizontal container, add a Vertical container on the left (for the primary chart) and another Vertical on the right (for supporting charts stacked vertically).

Three-column layout: 1. Add a Horizontal container to the canvas. 2. Inside it, place three sheets side-by-side (left, centre, right columns). 3. Right-click each container > Edit Width to set the percentage split (e.g., 40% / 30% / 30%).

Tabbed layout with navigation buttons: 1. Create multiple dashboards for different topic areas. 2. On each dashboard, add a Horizontal container at the top for navigation buttons. 3. Add Button objects (Dashboard > Objects > Navigation) labelled “Overview”, “Products”, “Customers”. 4. Configure each button to navigate to the corresponding dashboard tab.

[Insert screenshot of a Tableau dashboard canvas in edit mode showing the container structure highlighted: a Vertical outer container containing a Horizontal header container and a Horizontal body container, with each container’s boundary shown in blue]

Controlling Container Padding and Borders

Each layout container and worksheet object has padding (inner margin) and border settings that control the white space around its content.

Editing padding: Select a container > right-click > Edit Layout. Set outer padding (space between this container and adjacent elements) and inner padding (space between the container edge and its contents).

Consistent padding principle: Apply the same outer padding to all chart objects, typically 4–8px. This creates a consistent visual rhythm. Mismatched padding is one of the most common causes of dashboards that look “almost right” but not quite professional.

Container borders: Right-click a container > Format > set border style and colour. Thin grey borders (1px, #CCCCCC) around chart areas create clear visual separation without heavy visual weight. Alternatively, use background shading (light grey #F5F5F5) on every other container to create visual grouping without borders.

22.3 Dashboard Filters

Filter Controls: Quick Filters and Their Configurations

Quick Filters are the primary user control for exploring a dashboard. They allow users to slice the data without clicking chart marks. Add a quick filter by right-clicking a dimension field in any worksheet on the dashboard > Show Filter.

Filter control types:

Filter Type	When to Use	Visual Control
Single Value (List)	One selection at a time; few values	Radio button list
Multiple Values (List)	Multi-select; few values	Checkbox list
Single Value (Dropdown)	One selection; many values	Dropdown menu
Multiple Values (Dropdown)	Multi-select; many values	Multi-select dropdown
Single Value (Slider)	Continuous range; numeric or date	Slider
Wildcard Match	Text search for dimension values	Text input

Changing filter type: Click the dropdown arrow at the top-right corner of any displayed filter control. Select from the list of control types under “Single Value” or “Multiple Values”.

Applying a filter to all worksheets: Click the dropdown on the filter control > Apply to Worksheets > All Using This Data Source. This ensures that selecting a filter value updates every sheet on the dashboard.

Filter Design Best Practices

Limit the number of filters: Every filter control adds cognitive load. Dashboards with more than 4–5 filter controls become overwhelming. Identify the 3–4 dimensions that the user actually needs to filter by; remove the rest.

Use filter hierarchy: Place the most important filter (e.g., Date Range) at the top in the largest format (a date range slider). Secondary filters (Region, Category) below in a more compact format. Tertiary filters (if needed) hidden behind a “More Filters” interaction.

Pre-set filter defaults: Right-click a filter control > Edit Filter to set which values are selected by default. A dashboard that opens with a sensible default selection (e.g., the current year, all regions) is immediately usable, a dashboard that opens showing all data equally is often overwhelming.

Filter interaction consistency: If you have filter actions (clicking charts) AND quick filter controls, ensure they do not conflict, a filter action that resets when a quick filter is changed creates confusing behaviour. Test the combined interaction flow explicitly.

22.4 Non-Chart Dashboard Components

Text Boxes

Text boxes (from the Objects panel) serve three purposes on a dashboard: titles and section headers, instructional text for user guidance, and data-driven dynamic text.

Adding a text box: Drag the Text object from the Objects panel to the dashboard. Double-click to edit. Insert dynamic field values using the Insert menu in the text editor: <SUM(Sales)> inserts the current total sales value, which updates as filters change.

Title text box best practices: Use 18–24pt bold for the dashboard title. Use 12–14pt regular weight for section headers. Use 10pt grey for instructional text (“Click a region to filter”). Never centre-align body text in a dashboard, left-aligned text is faster to read.

Dynamic summary text: A text box that reads “Showing: <ATTR([Region])> | Period: <ATTR([Order Date])>” provides confirmation of the current filter state, especially valuable on dashboards used by users who may forget which filters they applied.

Image and Logo Objects

Adding an image: Drag the Image object from the Objects panel. Double-click to select an image file (PNG or JPEG). In the Edit Image dialog, choose Fit Image (scales to fit the container) or Center Image (centres at original size, crops if too large).

Common image uses: - Company logo in the top-left or top-right of the header. - Icon images for KPI categories (a shopping cart icon next to revenue, a person icon next to customer count). - Background decorative images (used sparingly, full-bleed background images often reduce chart readability).

Linking images to URLs: In the Edit Image dialog, enter a URL in the link field. Clicking the image navigates to the URL, useful for logo images that link back to a company intranet home page.

Web Page Objects

A Web Page object (from the Objects panel) embeds a URL as an iframe directly within the dashboard. Common uses: embedding a company intranet page with contextual data, displaying a related Power BI or Google Sheets view, or showing a live news feed.

Combining with URL actions: The most powerful use of the Web Page object is pairing it with a URL action. When the user selects a mark, the URL action opens a dynamically generated URL (e.g., a CRM record) in the Web Page object, the drill-through detail appears inline without leaving the dashboard.

Limitation: Web pages must permit iframe embedding (many production websites block this via X-Frame-Options headers). Always test the specific URL in an iframe before designing around this feature.

22.5 Dashboard Formatting

Setting a Consistent Visual Style

A dashboard looks professional when all visual elements share a consistent style: the same font family, a limited colour palette, and consistent treatment of borders, backgrounds, and spacing.

Workbook-level formatting: Format > Workbook. Set the default font family (Tableau default is Tableau Regular; Arial and Helvetica are clean alternatives). This sets the font for all new sheets and dashboard text objects, change it before building any content.

Dashboard background colour: Right-click the canvas > Format Workbook > set the Dashboard background. White (#FFFFFF) is the default and safest choice. Light grey (#F5F5F5 or #FAFAFA) is a popular alternative that gives worksheets (with white backgrounds) a slight “card” appearance against the dashboard background.

Consistent chart background: All worksheet backgrounds on the dashboard should be white. Non-white chart backgrounds create a patchwork look and reduce readability. Set via: Format > Shading > Pane colour = white, for each worksheet.

Legend placement and formatting: Legends (colour, size, shape) should be placed adjacent to the chart they encode, not in a separate panel far from the relevant chart. Compact legends in small font (9–10pt) are less distracting than large default legends. Right-click a legend > Edit Title to give it a meaningful name (“Product Category”) rather than the default field name.

22.6 Summary

Key Concepts at a Glance

Topic	Key Feature	Access Point
Information hierarchy	Tier 1 headline / Tier 2 primary / Tier 3 support	Design principle, applied in layout
Horizontal/Vertical containers	Grid-based layout nesting	Objects panel > Horizontal/Vertical
Container padding	Consistent spacing	Right-click container > Edit Layout
Quick filter types	List, dropdown, slider, wildcard	Filter control dropdown > control type
Apply filter to all sheets	Cross-sheet filter scope	Filter dropdown > Apply to all worksheets
Text boxes	Titles, instructions, dynamic summaries	Objects panel > Text
Image objects	Logos, icons, backgrounds	Objects panel > Image
Web page objects	Embedded iframe with URL action drill-through	Objects panel > Web Page
Dashboard background	White or light grey card-style	Right-click canvas > Format Workbook
Navigation buttons	Tabbed multi-dashboard navigation	Dashboard > Objects > Navigation

Applying This in Practice

The most common structural error in dashboard design is placing charts on the canvas first and then trying to add structure around them. This produces dashboards that look assembled rather than designed. Always start with a paper sketch of the information hierarchy, draw the three tiers, the approximate proportions, and the filter location, before opening Tableau. This 5-minute sketch prevents the 2-hour restructuring session that results from placing a primary chart in the wrong position and building everything else around it. Structure follows purpose; charts follow structure.