Tables & Charts Reference — v10.0
Tables
&
Charts
&
Charts
The definitive reference for every data display pattern GFS uses.
8 table variants, 10 chart types, 3 dashboard panels, 4 color palettes, and complete best-practice guides. Every table and chart GFS builds should reference this page.
Tables
Charts.css
Dashboards
Palettes
Data Visualization System
02Table Styles — 8 Variants
1. Default Table
Standard table with cobalt header, silver borders, alternating row colors (white/fog), and mono data columns. The foundation for most GFS data displays.
| Shipment ID | Origin | Destination | Temp (F) | Status | ETA |
|---|---|---|---|---|---|
| GFS-2026-4471 | Edgewood, NY | Boston, MA | 34.2 | Delivered | 05/14 08:30 |
| GFS-2026-4472 | Hermitage, PA | Philadelphia, PA | 36.1 | In Transit | 05/17 14:00 |
| GFS-2026-4473 | Edgewood, NY | Hartford, CT | 33.8 | Delivered | 05/15 11:15 |
| GFS-2026-4474 | Hermitage, PA | Baltimore, MD | 35.4 | Pending | 05/18 06:00 |
| GFS-2026-4475 | Edgewood, NY | Newark, NJ | 34.9 | In Transit | 05/17 16:45 |
| GFS-2026-4476 | Hermitage, PA | Pittsburgh, PA | 37.2 | Temp Alert | 05/17 09:30 |
2. Compact Table
Dense layout with 8px padding and 11px font. Designed for dashboards where every pixel counts. Fits 10+ rows without scrolling.
| ID | Origin | Dest | Temp | Carrier | Status | ETA |
|---|---|---|---|---|---|---|
| GFS-4471 | Edgewood, NY | Boston, MA | 34.2 | Lineage | OK | 05/14 08:30 |
| GFS-4472 | Hermitage, PA | Phila, PA | 36.1 | US Cold | Transit | 05/17 14:00 |
| GFS-4473 | Edgewood, NY | Hartford, CT | 33.8 | Lineage | OK | 05/15 11:15 |
| GFS-4474 | Hermitage, PA | Baltimore, MD | 35.4 | TF Reefer | Pend | 05/18 06:00 |
| GFS-4475 | Edgewood, NY | Newark, NJ | 34.9 | US Cold | Transit | 05/17 16:45 |
| GFS-4476 | Hermitage, PA | Pitt, PA | 37.2 | TF Reefer | Alert | 05/17 09:30 |
| GFS-4477 | Edgewood, NY | Albany, NY | 34.0 | Lineage | OK | 05/16 07:00 |
| GFS-4478 | Hermitage, PA | D.C. | 35.8 | US Cold | Transit | 05/18 10:30 |
| GFS-4479 | Edgewood, NY | Providence, RI | 33.5 | Lineage | OK | 05/16 14:45 |
| GFS-4480 | Hermitage, PA | Richmond, VA | 36.4 | TF Reefer | Pend | 05/19 08:00 |
3. Striped Table
Alternating alice/white rows for easy scanning. No internal row borders -- only the header border. Best for long lists where eye tracking matters.
| Product | SKU | Category | Weight (lbs) | Price/lb | Origin |
|---|---|---|---|---|---|
| Barrel Cheddar (White) | BCH-40-W | Cheese | 500 | $2.1840 | Bongards, MN |
| Barrel Cheddar (Colored) | BCH-40-C | Cheese | 500 | $2.2110 | Bongards, MN |
| Process American Slices | PAS-120 | Processed | 120 | $1.8250 | Hermitage, PA |
| Shredded Mozzarella | SHM-5-LM | Cheese | 5 | $2.4500 | Grande, WI |
| Butter Solids 82% | BSO-68 | Butter | 68 | $2.9800 | Grassland, WI |
| Liquid Whole Egg | LWE-30 | Egg | 30 | $0.8400 | Cal-Maine, MS |
4. Bordered Table
Full borders on every cell. Best for financial and accounting data where precise cell identification matters.
| Line | Invoice # | Description | Qty | Unit Price | Amount |
|---|---|---|---|---|---|
| 1 | INV-2026-0891 | Barrel Cheddar White 500lb | 12 | $1,092.00 | $13,104.00 |
| 2 | INV-2026-0891 | Process American 120ct | 40 | $219.00 | $8,760.00 |
| 3 | INV-2026-0891 | Freight — Edgewood to Boston | 1 | $1,240.00 | $1,240.00 |
| 4 | INV-2026-0891 | Cold Chain Surcharge | 1 | $185.00 | $185.00 |
| 5 | INV-2026-0891 | Rebate — Good Eats Q2 | 1 | ($412.50) | ($412.50) |
| Total | $22,876.50 |
5. Sortable Table Header
Column headers with sort indicators. Active sort column highlighted in alice blue. Click targets span the entire header cell.
| Customer | Region | Revenue | Orders | On-Time % | Tier |
|---|---|---|---|---|---|
| Apex Food Service | Northeast | $284,200 | 142 | 98.6% | Platinum |
| Good Eats Corp | Mid-Atlantic | $412,800 | 206 | 97.1% | Platinum |
| Metro Deli Supply | Northeast | $156,400 | 78 | 95.2% | Gold |
| Pinnacle Hospitality | Southeast | $198,600 | 99 | 96.8% | Gold |
| QuickBite Chains | National | $521,000 | 347 | 99.1% | Platinum |
| Sunrise Catering | New England | $87,300 | 44 | 92.4% | Silver |
6. Expandable Row Table
Rows with toggle indicators. Click to expand detail sub-panels. Collapsed rows show a right-arrow; expanded rows show a down-arrow.
| PO Number | Vendor | Product | Amount | Status | |
|---|---|---|---|---|---|
| PO-2026-1140 | Bongards Creameries | Barrel Cheddar White | $54,600 | Received | |
| PO-2026-1141 | Grassland Dairy | Butter Solids 82% | $28,440 | In Transit | |
| PO-2026-1142 | Cal-Maine Foods | Liquid Whole Egg | $12,600 | Pending | |
7. Sticky Header Table
Sticky first row and sticky first column. Scroll the table to see headers and product names stay fixed. Essential for large pricing matrices.
| Product | 5 lb | 20 lb | 40 lb | 120 lb | 500 lb | Bulk (lb) |
|---|---|---|---|---|---|---|
| Barrel Cheddar White | $12.45 | $46.80 | $89.20 | $253.80 | $1,092.00 | $2.184 |
| Barrel Cheddar Colored | $12.65 | $47.60 | $90.80 | $258.00 | $1,105.50 | $2.211 |
| Process American 160ct | $10.20 | $38.40 | $73.00 | $219.00 | — | $1.825 |
| Shredded Mozz LMPS | $13.80 | $52.00 | $98.00 | — | — | $2.450 |
| Butter Solids 82% | $16.80 | $63.20 | — | — | — | $2.980 |
| Provolone Sliced | $14.20 | $53.60 | $102.40 | $290.00 | — | $2.560 |
| Cream Cheese Block | $11.00 | $41.20 | $78.80 | $224.00 | — | $1.970 |
| Swiss Sliced Natural | $15.60 | $58.80 | $112.00 | $318.00 | — | $2.810 |
8. Card Table (Mobile Responsive)
How a standard table transforms on mobile: each row becomes a vertical card with label:value pairs. Desktop table shown left, mobile card layout shown right.
Desktop View
| ID | Product | Qty | Status |
|---|---|---|---|
| GFS-4471 | Barrel Cheddar | 50 | Delivered |
| GFS-4472 | Butter Solids | 140 | In Transit |
| GFS-4473 | Whole Egg | 500 | Pending |
Mobile Card View
IDGFS-4471
ProductBarrel Cheddar
Qty50
StatusDelivered
IDGFS-4472
ProductButter Solids
Qty140
StatusIn Transit
IDGFS-4473
ProductWhole Egg
Qty500
StatusPending
■ 8 table variants. Use Default for most data. Use Compact for dashboards. Use Bordered for financial/accounting. Use Card Table for mobile breakpoints.
03Charts.css Integration — 10 Chart Types
1. Bar Chart — Monthly Shipment Volume
| Jan | 1,420 |
|---|---|
| Feb | 1,580 |
| Mar | 1,770 |
| Apr | 1,710 |
| May | 2,010 |
| Jun | 2,190 |
2. Column Chart — Revenue by Product Category
| Cheese | $1.84M |
|---|---|
| Butter | $1.08M |
| Eggs | $760K |
| Process | $1.36M |
| Freight | $440K |
| Services | $280K |
3. Stacked Bar — Monthly Revenue by Region
| Jan | |||
|---|---|---|---|
| Feb | |||
| Mar | |||
| Apr | |||
| May | |||
| Jun |
Northeast
Mid-Atlantic
Southeast
4. Line Chart — On-Time Delivery Trend
| Jun | |
|---|---|
| Jul | |
| Aug | |
| Sep | |
| Oct | |
| Nov | |
| Dec | |
| Jan | |
| Feb | |
| Mar | |
| Apr | |
| May |
5. Area Chart — Temperature Compliance (30 Days)
| W1 | |
|---|---|
| W2 | |
| W3 | |
| W4 |
6. Donut Chart — Product Mix Distribution (CSS conic-gradient)
Pure CSS donut using conic-gradient. No JavaScript or external library needed. 5 segments from the GFS palette.
$5.7M
Total Revenue
38%Natural Cheese
18%Processed Cheese
16%Butter & Oils
14%Eggs & Liquid
14%Freight & Services
/* CSS Donut -- no JS needed */
.donut {
width: 220px; height: 220px; border-radius: 50%;
background: conic-gradient(
#092F64 0% 38%, /* Cobalt -- Natural Cheese */
#1A5799 38% 56%, /* Navy -- Processed */
#468BE6 56% 72%, /* Tufts -- Butter */
#93BFEF 72% 86%, /* Jordy -- Eggs */
#E9F5FF 86% 100% /* Alice -- Other */
);
}
.donut::after { /* hollow center */
content: ''; position: absolute;
top: 25%; left: 25%; width: 50%; height: 50%;
background: #fff; border-radius: 50%;
}
7. Horizontal Bar — Top 10 Customers by Revenue
| QuickBite | $521K |
|---|---|
| Good Eats | $413K |
| Apex Food | $284K |
| Pinnacle | $199K |
| Metro Deli | $156K |
| Harbor Grill | $128K |
| Fresh Table | $114K |
| City Bites | $98K |
| Sunrise | $87K |
| Campus Eats | $72K |
8. Grouped Bar — Edgewood vs Hermitage Performance
| Volume | ||
|---|---|---|
| On-Time | ||
| Temp Comp | ||
| Utilization |
Edgewood, NY
Hermitage, PA
9. Progress Bars — KPI Targets
6 KPI progress indicators with targets. Colored by status threshold.
On-Time Delivery99.2% / 98.0%
Temperature Compliance99.8% / 99.5%
Warehouse Utilization85.0% / 90.0%
Revenue vs Target78.4% / 100%
Order Fill Rate97.6% / 95.0%
AR Collection (30d)62.0% / 85.0%
10. Sparklines — Inline Trend Indicators in Data Table
Tiny bar charts embedded directly in table rows. Show trends at a glance without leaving the data context.
| Product | Current | Prior | Var % | 6-Month Trend |
|---|---|---|---|---|
| Barrel Cheddar White | $2.184 | $2.042 | +6.9% | |
| Process American | $1.825 | $1.890 | -3.4% | |
| Shredded Mozzarella | $2.450 | $2.380 | +2.9% | |
| Butter Solids 82% | $2.980 | $3.120 | -4.5% | |
| Liquid Whole Egg | $0.840 | $0.720 | +16.7% | |
| Provolone Sliced | $2.560 | $2.540 | +0.8% | |
| Cream Cheese Block | $1.970 | $1.940 | +1.5% | |
| Swiss Sliced Natural | $2.810 | $2.680 | +4.9% |
■ All charts use the Charts.css CDN (pure CSS, zero JavaScript). Override default colors with --color on each td. Donut uses native CSS conic-gradient.
04Real-Time Dashboard Tables
1. Live Shipment Tracker
Active Shipments
| Status | Shipment ID | Route | Carrier | Temp (F) | ETA | Progress |
|---|---|---|---|---|---|---|
| GFS-4471 | Edgewood → Boston | Lineage | 34.2 | 05/17 08:30 | ||
| GFS-4472 | Hermitage → Phila | US Cold | 36.1 | 05/17 14:00 | ||
| GFS-4475 | Edgewood → Newark | US Cold | 34.9 | 05/17 16:45 | ||
| GFS-4476 | Hermitage → Pitt | TF Reefer | 37.2 | 05/17 09:30 | ||
| GFS-4474 | Hermitage → Baltimore | TF Reefer | 35.4 | 05/18 06:00 | ||
| GFS-4478 | Hermitage → D.C. | US Cold | 35.8 | 05/18 10:30 | ||
| GFS-4479 | Edgewood → Providence | Lineage | 33.5 | 05/17 14:45 | ||
| GFS-4480 | Hermitage → Richmond | TF Reefer | 36.4 | 05/19 08:00 |
2. Inventory Status Board
Inventory Status — Edgewood DC
| SKU | Product | On-Hand | Committed | Available | Reorder Pt | Status | Trend |
|---|---|---|---|---|---|---|---|
| BCH-40-W | Barrel Cheddar White | 12,400 | 4,200 | 8,200 | 3,000 | OK | |
| BCH-40-C | Barrel Cheddar Colored | 8,600 | 3,100 | 5,500 | 2,500 | OK | |
| PAS-120 | Process American 120ct | 3,200 | 2,800 | 400 | 1,500 | Critical | |
| SHM-5-LM | Shredded Mozz LMPS | 5,800 | 3,400 | 2,400 | 2,000 | OK | |
| BSO-68 | Butter Solids 82% | 1,840 | 1,200 | 640 | 800 | Low | |
| LWE-30 | Liquid Whole Egg | 9,200 | 2,600 | 6,600 | 3,000 | OK |
3. Financial Summary — P&L
Income Statement — Q2 2026
| Line Item | Current Period | Prior Period | Variance | Var % |
|---|---|---|---|---|
| Revenue | $5,740,000 | $5,120,000 | $620,000 | +12.1% |
| Cost of Goods Sold | ($4,018,000) | ($3,686,400) | ($331,600) | +9.0% |
| Gross Profit | $1,722,000 | $1,433,600 | $288,400 | +20.1% |
| Freight & Logistics | ($412,000) | ($394,000) | ($18,000) | +4.6% |
| Warehousing | ($186,000) | ($178,000) | ($8,000) | +4.5% |
| Sales & Marketing | ($124,000) | ($118,000) | ($6,000) | +5.1% |
| Technology & Systems | ($98,000) | ($92,000) | ($6,000) | +6.5% |
| General & Administrative | ($156,000) | ($148,000) | ($8,000) | +5.4% |
| Total Operating Expenses | ($976,000) | ($930,000) | ($46,000) | +4.9% |
| EBITDA | $746,000 | $503,600 | $242,400 | +48.1% |
| Depreciation & Amort | ($64,000) | ($60,000) | ($4,000) | +6.7% |
| Interest Expense | ($22,000) | ($24,000) | $2,000 | -8.3% |
| Taxes | ($148,500) | ($94,360) | ($54,140) | +57.4% |
| Net Income | $511,500 | $325,240 | $186,260 | +57.3% |
■ Dashboard panels use the dash-panel component: header with title + timestamp, body with no padding (table fills edge-to-edge). Status dots animate with CSS pulse.
05Chart Color System for GFS Data
1. Sequential Palette
Use for ordered data, single-metric scales, heatmaps, and choropleth maps. Progresses from darkest (cobalt) to lightest (ice).
Cobalt
Navy
Tufts
Jordy
Alice
Ice
/* Sequential: cobalt to ice */
--seq-1: #092F64; /* highest value */
--seq-2: #1A5799;
--seq-3: #468BE6;
--seq-4: #93BFEF;
--seq-5: #E9F5FF;
--seq-6: #F4F9FF; /* lowest value */
/* Charts.css override */
.charts-css td:nth-child(1) { --color: var(--seq-1); }
.charts-css td:nth-child(2) { --color: var(--seq-2); }
/* ... */
2. Categorical Palette
Use for distinct data series that have no inherent order. Maximum 6 categories before repeating. Colors chosen for maximum distinguishability.
A
B
C
D
E
F
Cobalt Natural Cheese
Tufts Processed
Success Butter
Warning Eggs
Jordy Freight
Slate Other
/* Categorical: 6 distinct series */
--cat-1: #092F64; /* Cobalt */
--cat-2: #468BE6; /* Tufts */
--cat-3: #0F766E; /* Success Green */
--cat-4: #B45309; /* Warning Amber */
--cat-5: #93BFEF; /* Jordy */
--cat-6: #6B7280; /* Slate */
3. Diverging Palette
Use for positive/negative data, variance charts, and data that diverges from a center point (zero or target). Red for negative, gray for neutral, blue for positive.
-3
-2
-1
0
+1
+2
+3
/* Diverging: red (negative) to blue (positive) */
--div-neg-3: #DC2626; /* strong negative */
--div-neg-2: #F87171;
--div-neg-1: #FECACA;
--div-zero: #D9E1EA; /* neutral */
--div-pos-1: #93BFEF;
--div-pos-2: #468BE6;
--div-pos-3: #092F64; /* strong positive */
4. Status Palette
Use for operational states: delivered/compliant (green), in-transit/active (blue), pending/warning (yellow), alert/error (red). Each has a foreground and background variant.
Success / Green
FG: #0F766E
BG: #F0FDF4
Delivered, Compliant, Positive
Info / Blue
FG: #1A5799
BG: #E9F5FF
In Transit, Active, Processing
Warning / Yellow
FG: #B45309
BG: #FFFBEB
Pending, Low Stock, Expiring
Error / Red
FG: #DC2626
BG: #FEF2F2
Alert, Breach, Failed, Critical
/* Status palette -- foreground + background pairs */
--status-green: #0F766E; --status-green-bg: #F0FDF4;
--status-blue: #1A5799; --status-blue-bg: #E9F5FF;
--status-yellow: #B45309; --status-yellow-bg: #FFFBEB;
--status-red: #DC2626; --status-red-bg: #FEF2F2;
■ 4 palette types cover all GFS data visualization needs. Sequential for ordered scales. Categorical for distinct series. Diverging for variance. Status for operational states.
06Table Best Practices
Do
- Right-align numeric columns. Left-align text columns. Use tabular-nums for consistent digit width.
- Use IBM Plex Mono for all data columns: IDs, dates, currency, percentages, quantities.
- Add zebra striping (alternating fog/white rows) for tables with more than 5 rows.
- Use sticky headers for tables with more than 10 rows. Add sticky first column for 6+ columns.
- Sort by the most important column by default. Show the active sort indicator clearly.
- Use the compact table variant in dashboards. Default table for standalone views.
- Include a status column with colored badges or dots for operational data.
- Provide an expandable detail row for dense records that need a second level of data.
Don't
- Center-align data columns. Center alignment makes scanning harder and breaks number alignment.
- Use borders on every cell for general-purpose tables. Reserve bordered tables for financial/accounting data only.
- Mix fonts within a table. Use Inter for text, Plex Mono for data, and never mix them in the same column.
- Show more than 8 columns on mobile. Use the card table pattern or hide non-essential columns.
- Use color alone to convey meaning. Always pair status colors with text labels or icons.
- Add hover effects that change row height. Only change background color on hover.
- Truncate data without a tooltip or expandable mechanism. If it does not fit, rethink the layout.
- Use a table when the data is better shown as a list, card grid, or chart.
07Chart Best Practices
Select the right chart for the question being asked. Mismatching chart type to data type is the most common visualization error.
Bar / Column
Comparing categories or discrete groups. Revenue by product, shipments by facility, headcount by department. Best when the number of categories is 3-12.
Line
Showing trends over time. On-time delivery rate by month, price movements, daily volume. Requires a continuous time axis. Use for 6+ data points.
Area
Volume or magnitude over time. Temperature compliance band, inventory levels, cumulative revenue. Emphasizes the magnitude beneath the line.
Pie / Donut
Parts of a whole. Product mix, revenue share, cost breakdown. Maximum 5 segments. Beyond 5, combine small segments into "Other" or use a bar chart instead.
Sparkline
Trend within a table row. Inline context without leaving the data table. No axis labels, no legend, just shape. 5-8 data points.
Progress Bar
Completion toward a target or goal. KPIs, capacity utilization, collection rates. Always show the target and current value as text alongside the bar.
Chart Do's
- Always include a caption or title that states what the chart measures and the time period.
- Use the GFS sequential palette for single-series charts. Categorical palette for multi-series.
- Label data points directly when space permits. Avoid forcing users to cross-reference a legend.
- Start bar chart axes at zero. Truncated axes exaggerate differences and mislead.
- Provide a fallback table for screen readers. Charts.css uses semantic table markup by default.
- Use consistent colors across related charts. If cheese is cobalt in one chart, it should be cobalt everywhere.
Chart Don'ts
- Use pie charts for more than 5 segments. Switch to a horizontal bar chart.
- Use 3D effects, gradients, or decorative fills. Keep charts flat and data-focused.
- Mix chart types in the same visualization unless there is a clear analytical reason.
- Use red and green as the only differentiator. This fails for color-blind users. Add shape or text.
- Add excessive gridlines. 4 secondary axes is the maximum for Charts.css. More creates visual noise.
- Animate charts on every page load. Use animation only on first reveal or user interaction.
■ Every table and chart GFS builds should reference this page. When in doubt: start with the Default Table or a Bar Chart. They cover 80% of use cases.