Line Chart Draw

Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.

• Title *

  title · string

  The metric the chart is about, set large in the top-left. A noun phrase: 'Weekly active developers', not 'Chart of user growth'.

  now: Weekly active developers

• Eyebrow

  eyebrow · string

  Small uppercase mono label above the title, the dataset, the team, the source. Omit for a barer header.

  now: Platform telemetry

• Values *

  values · array

  The series, in order. 8–30 points reads best: fewer looks sparse once smoothed, many more turns the curve into texture. Any magnitude, the y scale is derived from the data.

  now: 20 items

• X labels

  xLabels · array

  Tick labels along the x axis, spread evenly across the series, so five labels can annotate twenty points. Set in mono. Keep each to 3–6 characters. An empty array draws no x ticks.

  now: 5 items

• Prefix

  prefix · string

  Set immediately before every figure, on the axis and on the travelling readout, a currency mark such as '$' or '€'.

• Suffix

  suffix · string

  Set immediately after every figure: '%', 'k', 'M', 'ms'. Much cheaper than scaling the numbers themselves.

  now: k

• Decimals

  decimals · number

  Decimal places on the travelling readout. 1 gives the counter something to do across a small range; 0 for large figures.

  now: 1

• Baseline

  baseline · "zero" | "auto"

  'zero' anchors the y axis at zero, honest for volumes, and the right choice whenever the area is filled. 'auto' zooms to the data range, which suits rates and indices but exaggerates every slope.

  now: zero

• Grid lines

  gridLines · number

  Roughly how many horizontal gridlines to draw. The scale snaps to whole 1/2/5 steps, so the count you get back can differ by one.

  now: 5

• Area

  area · boolean

  Fill a soft accent gradient under the curve, wiped in behind the leading edge. Turn it off for a purer line, or when an 'auto' baseline makes the fill meaningless.

  now: true

• Peak label

  peakLabel · string

  Caption for the callout that lands on the maximum once the line finishes drawing: 'Peak', 'All-time high', 'Launch week'. The value is appended for you. Omit to leave the peak unannotated.

  now: Peak

• Footnote

  footnote · string

  Quiet mono line in the top-right corner: the period, the unit, the source. A few words. It is set on one line.

  now: 12-month rolling · thousands

• Brand

  brand · string

  Brand token id, one of the keys of BRANDS.

  now: slate