Overflow scrolling in Figma - Dashboard Guide

Dashboard Mode - Overflow scrolling

Dashboard Goal

Show how to use overflow scrolling in a dashboard to view large tables or charts without breaking the layout.

Sample Data: Monthly Sales by Region

Month	North	South	East	West
January	120	100	90	110
February	130	105	95	115
March	140	110	100	120
April	150	115	105	125
May	160	120	110	130
June	170	125	115	135
July	180	130	120	140
August	190	135	125	145

Dashboard Components

• KPI Card: Total Sales (Sum of all regions and months)
  Formula: Total Sales = SUM(North + South + East + West) over all months = 120+100+90+110 + ... + 190+135+125+145 = 4060
• Scrollable Table: Monthly sales by region with horizontal and vertical scroll enabled to fit all data in a fixed container.
• Bar Chart: Sales by Region (sum of each region across all months)
  Formula: North=1140, South=940, East=860, West=1020

Dashboard Layout

+----------------------+-------------------------+
|      KPI Card        |      Bar Chart           |
|  Total Sales: 4060   |                         |
+----------------------+-------------------------+
|                                              |
|              Scrollable Sales Table           |
|  (with overflow scrolling for large data)    |
|                                              |
+----------------------------------------------+
    

Interactivity

Filters for Month or Region can be added to update the KPI card, bar chart, and the scrollable table simultaneously. The scrollable table allows users to scroll through all months and regions without resizing the dashboard.

Self Check

If you add a filter to show only months January to March, which components update?

• The KPI Card will show total sales for January to March only.
• The Bar Chart will update to show sales sums for January to March.
• The Scrollable Table will show only rows for January, February, and March, with scrolling still enabled if needed.

Key Result

A dashboard demonstrating overflow scrolling with a scrollable sales table, KPI card, and bar chart for monthly sales by region.