Comparison Race Chart

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 comparison being made, set top-left. A noun phrase naming the measure: 'Revenue, indexed' rather than 'A chart of revenue'.

  now: Umsatzentwicklung im Vergleich

• Subtitle

  subtitle · string

  One line under the title for the unit or the baseline: 'Index, 1976 = 20'. This is where a chart earns trust, so say what the numbers are.

  now: Index, 1976 = 20

• Series aname *

  seriesAName · string

  Legend name for the solid series.

  now: Aurea Systems

• Series bname *

  seriesBName · string

  Legend name for the dashed series.

  now: Northlane Works

• Series a *

  seriesA · array

  The solid series, in order. Drawn with a round badge. Any length, the x axis divides itself evenly, so 20 points and 200 points both fill the plot.

  now: 51 items

• Series b *

  seriesB · array

  The dashed series. Should be the same length as seriesA; if it is not, the shorter one stops early and the longer one keeps going, which is usually a mistake rather than a design.

  now: 51 items

• Start label

  startLabel · number

  The value of the first x position, counted up one per point and shown large in the corner. Years are the obvious case; any integer sequence works.

  now: 1976

• Counter label

  counterLabel · string

  Small label above the running counter. Set to an empty string to drop it.

  now: Jahr

• Y max

  yMax · number

  Top of the y scale. Deliberately not derived from the data: a fixed ceiling is what lets the winner visibly run out of room near the top.

  now: 110

• Y ticks

  yTicks · array

  Values that get a gridline and a left-hand label.

  now: 5 items

• X tick every

  xTickEvery · number

  Label every Nth x position. 10 over 50 points gives six labels, which is about the most a frame can carry.

  now: 10

• Color a

  colorA · string

  Hex for the solid series. Empty uses the brand accent, which is the safer choice.

• Color b

  colorB · string

  Hex for the dashed series. Empty uses the brand's alternate accent.

• Brand

  brand · string

  Brand preset. The light presets (paper, press, field) put dark type on a pale ground; the dark ones invert it. Both are composed for. This component reads its type colour from the brand rather than assuming a dark frame.

  now: paper