CHARTS & MAPS · CHARTS

Bar

Compare categories in plain SVG — columns and bars; grouped, stacked and 100%; sorting, value labels, highlight, negatives, waterfall, plan vs actual, bullet, histogram, top-N and drill-down.
THEME
01

Playground

Revenue by service — orientation, layout, sort, labels, width, highlight, state
ORIENT
LAYOUT
SORT
LABELS
WIDTH
STATE
$327kRevenue 2026 · 6 services · 4 quartersClick a bar or label to highlight a service
NOW SPEAKING
CHART“Revenue by service 2026, 6 services, Q1, Q2, Q3, Q4. Highest Web $94k, lowest Print $22k. Use arrow keys to read each bar.”
BAR“Focus the chart and use the arrows — ← → services, ↑ ↓ quarters”
TABLE“Table alternative: 6 rows × 5 columns”
ServiceRevenue.tsx
1<BarChart
2 data={revenueByService}
3 orientation="vertical"
4 layout="stack" sort="value"
5 valueLabels="end" barWidth="mid"
6 highlight={null}
7 tooltip keyboard tableFallback
8/>
EVENT LOG
    Click a bar to highlight it, or focus the chart and use the arrows.
    02

    Variants

    Tooltip, negatives, waterfall, plan, bullet, histogram, top-N, drill-down, table
    Tooltip & keyboard← → categories · ↑ ↓ series
    Above and below zeromonth-over-month change
    Waterfallrevenue → profit
    Totals in cyan, gains in green, costs in coral; dashed lines carry the running total
    Plan vs actualthin plan marker · over plan in green
    White tick = plan · green = over plan · amber = under
    Bullet chartKPI against target and bands
    ▬ actual│ targetbands: poor · ok · good
    Histograminvoice amounts in $1k buckets
    184 invoices · median $3.2k · no gaps between buckets — it’s one continuous scale
    Top 5 + Otherkeep the long tail in one bar
    Drill downclick a quarter to see its months
    Click a quarter (or focus + Enter) to see its months
    Chart or tablesame data, either way
    03

    States

    Loading, empty, one value, error, long labels
    Loadinggrey bars hold the layout
    Loading…
    Emptysay why, offer a wider period
    Nothing to compare yetNo invoices in this period.
    One valueone bar is fine — label it
    Only one service so far this month
    Errorkeep the frame, offer Retry
    Long labelsswitch to bars, truncate with a tooltip
    04

    Behavior

    Columns vs bars, sorting, zero, labels
    Columns or bars?by label length and count
    ColumnsTime or ≤ 8 short categories
    BarsLong names, many items, ranking
    Small screenSwitch columns to bars below 480 px
    Many seriesMore than 4 → small multiples
    Sortingwhat order tells the story
    TimeNever sort — keep chronological
    CategoriesSort by value, biggest first
    OrdinalKeep natural order (S, M, L)
    OtherAlways last, in grey
    Zero & scalebars must start at zero
    BaselineAlways 0 — length is the value
    NegativesGrow from 0, coral for down
    TicksNice steps, 4–6 lines
    BreaksNo broken axes — use a table instead
    Labelshelp, don’t clutter
    End labelsWhen exact values matter
    InsideStacks with big segments only
    TooltipFor everything else
    UnitsOnce in the title or axis, not on every bar
    05

    In Avava

    Service revenue, team hours, P&L
    Revenue by service · Q4stacked by client
    Team hours · this weekactual vs 40 h plan
    Tick = 40 h plan · amber over plan · coral over 44 h
    P&L · Octoberwaterfall from revenue to profit
    06

    Rules & a11y

    Which bar chart, screen readers
    Which bar chart?pick by the question
    Single
    One measure across categoriesRevenue by service
    Grouped
    Compare 2–3 series side by side2025 vs 2026
    Stacked
    Totals and their partsService revenue by client
    100%
    Share only, not sizeMix of clients per service
    Screen readersevery bar is a value
    ✓role="group" aria-roledescription="bar chart"aria-label names the highest and lowest bar
    ✓← → categories, ↑ ↓ seriesEvery bar is reachable; Enter highlights or drills
    ✓aria-live per bar“Web: Q1 $22k, Q2 $19k … Total $94k”
    ✓Table view with <th scope>Same numbers as the chart
    ✓Colour + textSigns (+/−), labels and ticks, not hue alone
    DO✓Start every bar at zero✓Sort categories by value✓Put “Other” last, in grey✓Use bars for long labels✓Show the plan as a marker, not a second bar
    DON’T✕Use a broken or truncated axis✕Stack more than 5 segments✕Sort months by value✕Label every segment of a busy stack✕Use 3D or gradients on bars