Scroll behavior (vertical, horizontal) in Figma - Dashboard Guide

Dashboard Mode - Scroll behavior (vertical, horizontal)

Goal

Understand how vertical and horizontal scroll behaviors help users explore large dashboards smoothly.

Sample Data

Month	Region	Sales	Profit	Customers
Jan	North	100	30	50
Feb	South	150	45	60
Mar	East	200	70	80
Apr	West	130	40	55
May	North	170	50	65
Jun	South	190	60	75
Jul	East	210	80	85
Aug	West	160	55	70

Dashboard Components

• KPI Cards (Top Row): Show Total Sales, Total Profit, and Total Customers.
  Formulas:
  • Total Sales = SUM(Sales) = 1310
  • Total Profit = SUM(Profit) = 430
  • Total Customers = SUM(Customers) = 540
• Horizontal Scroll Table: Monthly sales by region with columns for each month (Jan to Aug).
  This table is wider than the screen, so horizontal scroll is enabled.
• Vertical Scroll Chart: Bar chart showing Sales by Region.
  Chart height is fixed, so vertical scroll appears if data grows.

Dashboard Layout

+-------------------------------------------------------------+
| KPI Cards: Total Sales | Total Profit | Total Customers      |
+-------------------------------------------------------------+
| Horizontal Scroll Table: Monthly Sales by Region (wide)     |
|  <--- Scroll horizontally to see all months --->            |
+-------------------------------------------------------------+
| Vertical Scroll Chart: Sales by Region (fixed height)       |
|  | Scroll vertically if more regions added |                |
+-------------------------------------------------------------+
    

Interactivity

Filters for Region and Month let users narrow data.

• Applying a Region filter updates KPI cards, table, and chart.
• Applying a Month filter updates KPI cards and horizontal scroll table only.
• Horizontal scroll allows viewing all months without changing filters.
• Vertical scroll lets users see all regions if many are added.

Self Check

If you add a filter for Region = 'East', which components update?

• KPI Cards show totals only for East region.
• Horizontal Scroll Table shows sales for East region across months.
• Vertical Scroll Chart shows sales bars only for East region.

Key Result

Dashboard demonstrating vertical and horizontal scroll behaviors with KPI cards, a wide table, and a fixed-height chart.