YTL DIGITAL BANK — DATA ORGANIZATION
Data Visualization
Style Guide
Standards for every chart, dashboard, and data slide. All charts use Vega-Lite — the same grammar powering Holistics. Click "View spec" on any chart to copy it.
SECTION 01
Guiding Principles
Every chart must pass three tests before leaving the team.
Clarity
Audience understands within 5 seconds. If they have to study it, simplify.
Context
Includes anchoring so viewer can judge good vs. bad.
Action
Leads toward a decision or next step.
📌 The Standard is the Standard
These principles apply equally to a quick Slack screenshot and a Management Committee deck.
SECTION 02
Color Palette
A disciplined palette prevents the rainbow effect.
Primary Palette
Navy
#1B2A4A
Primary series, titles, hero metrics
Blue
#2E75B6
Secondary series, interactive elements
Teal
#0D9488
Tertiary series, positive trends
Slate
#64748B
Gridlines, axis labels, supporting text
Silver
#CBD5E1
Muted/context series, backgrounds
Semantic Colors
Green
#16A34A
On track, positive variance, growth
Amber
#D97706
Caution, nearing threshold, watch
Red
#DC2626
Off track, breach, negative variance
RAG Status
Use Green / Amber / Red only for status indicators. Never as decorative series colors.
1
Maximum 5 colors per chart
If you need more, you need a different chart — or split it into two.
2
Grey out what doesn't matter
Use Silver (#CBD5E1) for context series. Saturate only the focal series.
3
Same data = same color, everywhere
If "Lending" is Navy on one chart, it must be Navy on every chart in the deck.
4
Semantic colors are reserved
Never use Red for a product line or Green for decoration. They mean something.
Before → After
BEFORE
Rainbow spaghetti
All 5 series compete — the eye bounces randomly.
AFTER
Grey out, highlight what matters
Lending revenue growing fastest at +42% YoY
RM millions | vs. other product lines
Source: Core Banking | 24 Feb 2026
Lending stands out. Context series subordinate.
SECTION 03
Chart Selection
Choose the chart that answers the question — not the one that looks interesting.
BEFORE
Pie chart
Angles are hard to compare.
AFTER
Sorted horizontal bar
Personal Loans leads revenue at 42%
Revenue contribution by product (%)
Sorted bars make comparison instant.
Chart Type Reference
TIME SERIES → LINE CHART
NPL approaching 2.0% threshold
Monthly | Target: 2.0%
A → B BRIDGE → WATERFALL
Portfolio grew RM 10M to RM 860M
RM millions | Feb 2026
COMPOSITION → STACKED BAR
Personal loans dominate at 54%
Loan book by segment, RM millions
DISTRIBUTION → HISTOGRAM
Transactions cluster in RM 1K–2K
Transaction amount distribution
RELATIONSHIP → SCATTER
Longer tenure correlates with higher LTV
Tenure (months) vs. lifetime value (RM)
🚫 Banned Chart Types
🥧
Pie / Donut charts
→ Use: Sorted horizontal bar
🧊
3D charts of any kind
→ Use: Flat 2D equivalent
📊
Dual-axis charts
→ Use: Two stacked charts, shared x-axis
🎯
Circular gauges / speedometers
→ Use: Bullet chart or big number + delta
SECTION 04
Chart Anatomy
Every chart is a sentence: subject (title), verb (trend), object (data).
BEFORE
Missing everything
NPL Ratio Over Time
No insight title. No anchor. No source.
AFTER
Complete, contextual
NPL approaching 2.0% risk appetite threshold
Monthly trend | Target: 2.0% | +70bps since Jul
Source: Core Banking | 24 Feb 2026
Title states insight. Target line anchors.
✅ Required Elements
📝
Declarative title
States the insight, not the metric
📎
Context subtitle
Units, time range, vs. what
🏷
Direct data labels
On bars/endpoints — no legend hunting
📏
Reference lines
Targets, thresholds, benchmarks
💬
Annotations
Call out anomalies or events
📋
Source + date
Bottom-right, small text
❌ Remove
🔲
Gridlines
Remove or make very faint
📦
Chart borders
Let charts breathe
🏷
Redundant legends
Use direct labels instead
🔢
Excessive decimals
RM 2.0B not RM 2,001.64M
SECTION 05
Dashboard Layout
Dashboards are not art — they are tools. Layout guides the eye.
The Z-Pattern
Executives scan in a Z: top-left → top-right → bottom-left → bottom-right.
1
TOP LEFT — HERO
Hero KPI Cards
2–3 big numbers with RAG status, target anchor, and WoW/MoM delta. This is the first thing seen.
2
TOP RIGHT — TREND
Primary Trend Chart
Single line/area chart answering "which direction are we heading?" with target reference line.
3
BOTTOM LEFT — BREAKDOWN
Composition / Segment
Stacked bar or sorted horizontal bar. Answers "where is the mix?" or "who's driving it?"
4
BOTTOM RIGHT — DETAIL
Detail / Action Table
Compact table with conditional formatting, or a drill-through link. For investigation, not consumption.
Before → After: KPI Cards
BEFORE
Naked numbers
Total Deposits Balance
RM 2,001.64M
▲ 0.3% WoW
New Accounts Opened
1,247
▼ 2.1% WoW
No targets. Excessive precision. No hierarchy.
AFTER
Contextual KPI cards
Total Deposits
RM 2.0B
ON TRACK
Target: RM 2.2B | ▲ 0.3% WoW
New Accounts
1,247
WATCH
Target: 1,500/wk | ▼ 2.1% WoW
RAG status, target anchoring, rounded values.
Before → After: Dense Retention Table
BEFORE
Raw cohort grid
| Cohort | W1 | W2 | W3 | W4 |
|---|---|---|---|---|
| Dec 29 | 81.2% | 52.4% | 38.1% | 27.8% |
| Jan 05 | 79.8% | 54.1% | 39.5% | 28.6% |
| Jan 12 | 76.3% | 48.9% | 35.2% | 25.8% |
| Jan 19 | 82.1% | 55.3% | 40.8% | 29.0% |
| Jan 26 | 71.5% | 42.1% | 30.4% | 22.1% |
Dense table unsuitable for executive audience.
AFTER
Visual insight extraction
W4 retention dropped to 22.1% — investigate Jan 26 cohort
Week 4 retention by signup cohort | Target: 28%
Single bar chart with target line tells the story.
The 2-3-5 Rule
2–3 Hero KPI Cards
Largest elements. First thing the eye hits. With RAG + target.
3 Charts Max Above Fold
One trend, one breakdown, one detail. No scrolling for key insight.
5 Visual Elements Total
KPIs + charts + tables combined. Beyond 5, the dashboard is a report.
White Space is Not Waste
Let elements breathe. Dense ≠ useful.
SECTION 06
Anchoring
A number without context is just a number. Every metric needs a comparison.
[Metric]: [Value] ([Anchor]) → [So what]
Anchor Types
vs. Target
NPL: 1.9% (Target: 2.0%) → 10bps headroom
vs. Prior Period
Revenue: RM 58M (▲ 12% MoM) → Growth accelerating
vs. Benchmark
NPS: 72 (Industry avg: 45) → Top quartile
vs. Forecast
Disbursements: RM 120M (Forecast: RM 140M) → 14% below plan
vs. Cohort
Jan cohort DPD30: 3.2% (Dec cohort at same MOB: 1.8%) → Deteriorating
💡 When to add "so what"
Board presentations and exec decks: always include the "so what" interpretation. Operational dashboards used by analysts: the comparison alone is sufficient — they'll draw their own conclusions.
SECTION 07
Executive Storytelling
Every exec presentation follows the same arc: Situation → Complication → Resolution.
S
Situation
What is the current state?
"Deposits reached RM 2.0B, 91% of year-end target with 10 months remaining."
C
Complication
What demands attention?
"However, fixed deposit concentration rose to 48%, increasing funding cost pressure."
R
Resolution
What should we do?
"Recommend shifting acquisition incentives toward CASA products to rebalance mix by Q3."
Presentation Rules
One chart per slide
If you need two charts, you need two slides.
Annotate, don't explain verbally
If it needs a verbal explanation, the chart isn't working.
Pre-empt the "why"
Add a sub-chart or footnote that answers the obvious follow-up.
Round aggressively
RM 2.0B, not RM 2,001.64M. Three digits max for any number.
SECTION 08
Banking-Specific Patterns
Chart patterns tailored to digital banking domains. Each includes a copyable Vega-Lite spec.
LENDING
Vintage Analysis (Cohort Default Curves)
Q3 vintage deteriorating faster — 3.2% at MOB 6 vs 1.5% in Q1
Cumulative default rate by disbursement quarter
Pattern: Grey out older cohorts. Highlight the 2–3 most recent. Flag any vintage trending above historical norm. Include MOB (months-on-book) on x-axis for comparable staging.
FINANCE
Portfolio Waterfall (Balance Bridge)
Portfolio grew RM 10M to RM 860M
RM millions | Opening → Disbursements → Repayments → Write-offs → Closing
Pattern: Opening and closing bars anchor to zero. Positive flows (disbursements) in green, negative flows (repayments, write-offs) in red. Always label the bridge values.
DEPOSITS
Balance Composition (Stacked Area)
Total deposits at RM 1.9B — 95% of RM 2.0B target
Balance by product type, RM millions
Pattern: Stacked area shows total trajectory AND composition in one view. Reference line for target. Fixed deposits at bottom (most stable), current at top (most volatile).
PAYMENTS
Volume vs. Value (Side-by-Side)
Transaction count +25% QoQ
Volume ('000s) by rail
Value led by FPX at RM 56M
Value (RM M) by rail
Pattern: Two honest stacked bars with shared x-axis. Never dual-axis — volume and value have different scales and units. Side-by-side lets the viewer see both independently.
MARKETING
Acquisition Funnel
Funnel conversion: 32% from click to funded account
Jan 2026 acquisition campaign performance
Impressions
-
Clicks
15.0%
Signups
50.0%
KYC Done
70.0%
Funded
90.0%
Pattern: Horizontal bars decreasing by width. Show absolute numbers AND stage-to-stage conversion rates. Biggest drop = biggest opportunity.
RISK / FRAUD
Control Chart (Statistical Process Control)
2 anomalies detected — Day 15 and Day 23 breached control limits
Daily fraud alerts | Mean ± 2σ limits
Pattern: Mean line + UCL/LCL at ±2σ. Points outside limits flagged in red and enlarged. Requires no statistical knowledge from the viewer — red dots = investigate.
SECTION 09
Anti-Patterns
Common mistakes and how to fix them. Print this section and pin it next to your monitor.
BEFORE
Truncated y-axis
5% difference looks like 5x.
AFTER
Y-axis at zero
True proportions. Honest.
BEFORE
Descriptive title
Revenue by Month
Tells what, not what it means.
AFTER
Declarative title
Revenue grew 38% to RM 58M, above target 5 months running
RM millions | Target: RM 50M
Title IS the insight.
BEFORE
Wall of numbers
| Segment | Count |
| Premium | 2,100 |
| Mass Affluent | 1,800 |
| Mass | 980 |
| Basic | 210 |
Numbers without visual pattern. Exec has to do mental math.
AFTER
Chart with insight
Premium segment leads with 2,100 customers
Active customers by segment
Sorted bar makes the ranking instant.
Quick Anti-Pattern Reference
🚫
Naked numbers (no target/benchmark)
→ Add RAG badge + target line
🚫
Chart junk (gradients, shadows, 3D)
→ Flat, clean, minimal decoration
🚫
Orphaned legends (far from data)
→ Direct labels on series
🚫
Excessive precision (RM 2,001.64M)
→ Round aggressively (RM 2.0B)
🚫
Rainbow color schemes
→ Grey-out + single focal color
🚫
Dual-axis charts
→ Two stacked charts, shared x-axis
SECTION 10
Review Checklist
Run through this before publishing any chart or dashboard.
Can someone get the insight in 5 seconds without explanation?
ClarityIs the title declarative (states insight, not metric name)?
ClarityAre numbers rounded appropriately for the audience?
ClarityDoes every metric have an anchor (target, prior period, benchmark)?
ContextIs the source and date clearly stated?
ContextAre semantic colors used correctly (Green/Amber/Red for status only)?
DesignIs there maximum 5 colors? No rainbow schemes?
DesignAre gridlines, borders, and chart junk removed?
DesignAre labels direct (on bars/lines), not in orphaned legends?
DesignDoes the dashboard follow the Z-pattern and 2-3-5 rule?
DesignIs there a clear "so what" — what should the viewer do next?
ActionIs there no pie chart, dual-axis, 3D, or circular gauge?
Action