Bar Chart Reveal

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.

• Data *

  data · array

  The series, in reading order, the reveal staggers left to right, so order the array the way you want the chart read. Five to eight bars is the sweet spot; twelve is the ceiling before the columns thin out.

  now: 7 items

• Title

  title · string

  Headline above the plot, set in the display face. Say what is measured, not what the shape does ('Scenes rendered per month', not 'Growth'). One line reads best.

  now: Scenes rendered per month

• Eyebrow

  eyebrow · string

  Small uppercase mono label in the accent colour above the title. Omit for a barer chart.

  now: Throughput

• Highlight

  highlight · number

  Zero-based index of the one bar carried in the accent colour; every other bar is muted. Omit to highlight the largest value automatically. This is the argument of the chart, so pick the bar the scene is about.

  now: 6

• Value prefix

  valuePrefix · string

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

• Value suffix

  valueSuffix · string

  Set immediately after every figure: '%', 'k', 'ms'. Rendered exactly as typed, so include a leading thin space yourself if the unit needs air.

• Compact

  compact · boolean

  Abbreviate thousands and millions ('1.2k', '3.4M') instead of grouping digits with thin spaces. Turn it on once the figures pass four digits.

  now: false

• Ticks

  ticks · number

  Number of gridlines above the baseline. It also sets the y domain: the top line is always a round number, so 4 over a peak of 137 gives 0/40/80/120/160.

  now: 4

• Y axis

  yAxis · boolean

  Show the y-axis tick figures at the left, in mono with tabular figures. Off gives a barer chart that leans on the value labels.

  now: true

• Value labels

  valueLabels · boolean

  Count each bar's value up above its column as the bar lands. Off when the axis alone should carry the numbers.

  now: true

• Bar width

  barWidth · number

  Bar thickness as a fraction of its column slot. 0.62 is the editorial default; above 0.8 the chart reads as a block, below 0.4 as a set of ticks.

  now: 0.62

• Footnote

  footnote · string

  Quiet mono caption under a hairline at the foot of the frame: the source, the period, the qualifier. One short sentence.

  now: Every scene composed from registry components · September…

• Brand

  brand · string

  Brand token id, one of the keys of BRANDS.

  now: slate