Part 10 · 1 chapters · ~9 min

Numbers, Tables and Charts

Displaying money and data so people read it correctly: locale-aware number formatting with tabular figures, tables that scan with right-aligned numbers, choosing a chart from the reader's question, charts that do not mislead, accessible data with summaries and tables, and dashboards built around a few compared numbers.

Showing numbers so they are read correctly

code

/* tabular figures so digits align in columns and do not jitter when they update */
.amount { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

// format at the edge, from integer minor units
const ngn = new Intl.NumberFormat('en-NG', { style: 'currency', currency: 'NGN' });
const compact = new Intl.NumberFormat('en-NG', { style: 'currency', currency: 'NGN', notation: 'compact', maximumFractionDigits: 2 });
ngn.format(125_000_000 / 100);       // "₦1,250,000.00"
compact.format(125_000_000 / 100);   // "₦1.25M": use the full value in a title or tooltip

reader's question	show	avoid
How much do I have?	one large number with currency and last-updated time	a chart
Where did my money go this month?	a sorted horizontal bar by category, with amounts labelled	a pie with ten slices
Am I spending more than before?	a line or bars by month, current month dashed as partial	a dual-axis chart
When are my repayments?	a table: date, amount, status, with the next one highlighted	a calendar with tiny text

NUMBERS, TABLES AND CHARTS

showing money and data so people read it correctly: number formatting, tables that scan, and charts that do not mislead

swipe the figure sideways, or tap expand for full screen

1/6

formatting

Formatting numbers: use Intl.NumberFormat with the user's locale for grouping and currency symbols; show the currency every time money appears; use tabular (fixed-width) figures so digits line up; keep decimals consistent within a column; and abbreviate (₦1.2M) only where precision is not needed, with the full value available.