CHARTS & MAPS · CHARTS

Line & Area

Trends over time in plain SVG — line, area, stacked and step; crosshair tooltips with keyboard, annotations, goals, below-zero fills, brushing, live data, forecast bands, two axes and a table view.
THEME
01

Playground

Revenue 2026 — type, curve, points, period, compare, grid, state
TYPE
CURVE
POINTS
PERIOD
COMPARE
GRID
STATE
$608k▲ 19% vs last yearRevenue · last 12 months
NOW SPEAKING
CHART“Revenue, last 12 months: Revenue, Expenses, Profit, Nov to Oct. Revenue from $38k to $64k (+68%). Use left and right arrows to read values.”
POINT“Focus the chart and press → to read each month”
TABLE“Table alternative: 12 rows × 3 series”
RevenueChart.tsx
1<LineChart
2 data={revenue} x="month"
3 series={["revenue", "expenses", "profit"]}
4 type="area" curve="smooth"
5 points="last" compare="lastYear"
6 grid={true} yFormat={k$}
7 tooltip keyboard tableFallback
8/>
EVENT LOG
    Toggle a series, hover or use ← → on the chart.
    02

    Variants

    Tooltip, annotations, below zero, zoom, live, forecast, two axes, table
    Tooltip & keyboardcrosshair · all series · ← → Home End
    Annotations & goalevents on the timeline · target line
    Below zeroprofit vs loss · split fill at 0
    Fill and line switch to coral below $0 — the zero line is solid, other gridlines dashed
    Zoom by brushingdrag across the mini chart
    19 Sep – 18 Oct · 30 days — drag across the overview to zoom
    Livea new point every 2 s
    Now: 40 visitors
    Forecast with rangedashed forecast · 80% band
    Two axesrevenue in $ · margin in %
    Chart or tablesame data, accessible either way
    03

    States

    Loading, empty, one point, error, dense data
    Loadingaxes first, no fake lines
    Loading…Fetching revenue for this period
    Emptysay why, offer a wider range
    No data for this periodNothing was invoiced between these dates.
    One pointa dot, not a line
    Only one month so far — a trend needs at least two points
    Errorkeep the frame, offer Retry
    2,000 pointsdecimated to 200 for drawing
    2,000 samples → 200 drawn (min / max per bucket keeps the peaks)
    04

    Behavior

    Axes, smoothing, colour, small screens
    Axes & numbersreadable at a glance
    Y axisStart at 0 for areas; lines may zoom in, say so
    Format$58k, not 58000; same unit across the chart
    Ticks4–6 nice steps (10, 20, 25, 50)
    X labelsMax ~8; first and last always shown
    Smoothingpretty can lie
    UseDense, continuous data: daily revenue, visitors
    AvoidFew points or exact values: monthly totals
    MonotoneOur curve never overshoots — no fake peaks
    StepValues that change at moments: prices, plans
    Colour & seriesnot colour alone
    Max4 series; more → small multiples
    CompareLast year in grey and dashed
    ForecastSame colour, dashed, with a range band
    LegendClick to hide; last value next to the name
    Small screensbelow 480 px
    LabelsFewer ticks; start / end only on X
    LegendWraps above the chart
    TooltipTap to pin; swipe to move
    TableOffer the table view
    05

    In Avava

    Revenue, team load, cash flow
    Studio revenue 2026year over year · goal · big launches
    Team load · 12 weeksstacked area · hours per person
    Cash flowbalance turns coral below zero
    Cash dipped below zero in Jan–Feb and Jun — plan invoices earlier
    06

    Rules & a11y

    Which chart, screen readers
    Line, area or stacked?pick by the question
    Line
    Exact trend of 1–4 seriesRevenue vs expenses
    Area
    One total, emphasise volumeMonthly revenue
    Stacked
    How parts add up to a totalHours by person
    100%
    Share over time, not sizeRevenue mix by service
    Screen readersa chart is also data
    ✓role="group" aria-roledescription="chart"aria-label holds a one-sentence summary with the trend
    ✓Focusable; ← → Home EndEach step is announced in a polite live region
    ✓Table view of the same dataReal <table> with <th scope>
    ✓Not colour aloneDashes for comparison and forecast; values in tooltips
    ✓SVG is aria-hiddenThe summary and the table carry the meaning
    DO✓Lead with the number, then the chart✓Compare to last year in a quieter style✓Mark events and goals on the timeline✓Start area charts at zero✓Offer a table for every chart
    DON’T✕Smooth sparse monthly data✕Stack lines that should be compared✕Use more than 4 colours in one chart✕Hide the unit or the period✕Animate every redraw