Vertical Versus Bars

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 question the chart answers, set large in the top-left. Use a newline to control the line break — the lines are revealed one after another, so break where you would break it by hand. Two lines is the design; three crowds the chart.

  now: Shorts or long-form?

• Subhead

  subhead · string

  A sentence under the title saying what was measured and over what window. This is where the methodology goes, so the big figures do not have to carry it.

  now: Average watch time per viewer across 84 uploads, measured…

• Unit

  unit · string

  The unit of both figures, printed small in the top-right corner as chart furniture — 'MINUTES PER VIEWER', 'COST PER LEAD'. Omit when the suffix already says it.

  now: Minutes per viewer

• Top *

  top · object

  The side plotted in the left column, growing UPWARD from the datum. Position does not decide the winner: whichever side holds the larger value gets the solid accent block, the shadow and the last move.

  now: object

• Bottom *

  bottom · object

  The side plotted in the right column, growing DOWNWARD from the datum. Opposing the two directions across one line is what makes the lengths directly comparable at a glance.

  now: object

• Prefix

  prefix · string

  Set before both figures at a smaller size — a currency mark such as '$' or '€'. Shared, because the two sides are one measure.

• Suffix

  suffix · string

  Set after both figures at a smaller size — ' min', '%', 'k'. Rendered exactly as typed, so include a leading space yourself if the unit needs air.

  now: min

• Decimals

  decimals · number

  Decimal places on both figures. Use 1 for rates and durations, 0 for counts. The figures count up as their bars grow, so this also sets how the counter reads mid-move.

  now: 1

• Margin callout

  marginCallout · boolean

  After the winner lands, dash a hairline across the frame at the loser's length mirrored onto the winner's side, and annotate the overhang. This is the payoff of the opposed layout — turn it off only when the two values are close enough that the gap is not the story.

  now: true

• Margin label

  marginLabel · string

  Small monospace label above the gap figure. 'Margin', 'Ahead by', 'Difference'.

  now: Margin

• Margin value

  marginValue · string

  Overrides the computed gap. By default the callout reads the percentage the winner is ahead by; set this to phrase it your way — '2.8x', '+4.8 min', 'nearly triple'.

• Grid

  grid · boolean

  Rule the sheet with four hairline divisions either side of the datum. They give the eye something to measure against; drop them for a plainer, more editorial frame.

  now: true

• Footnote

  footnote · string

  Source line along the bottom, under a hairline. Cite the measurement — an uncited comparison chart is a poster.

  now: Source — channel analytics, 30-day window

• Brand

  brand · string

  Brand token id — one of the keys of BRANDS. This composition is built for the light palettes (paper, press, field): weight here comes from how dark a mark is, so on a dark brand the accent block stops being the heaviest thing in the frame.

  now: paper