Titles & chrome

Axis chrome is everything that is not the tick values themselves: titles, axis line, tick marks, and label visibility.

---

Axis titles

Each side has an axisTitle block (same multiline text shape as chart title furniture). Defaults are visible: false.

axes: {
  left: {
    axisTitle: {
      visible: true,
      text: 'USD millions',
      fontSize: 11,
    },
  },
}

text accepts plain strings or inline HTML (<font>, <b>, …) like title / subtitle.

Rotation

Rotation follows the physical side:

Side	Default title rotation
left	−90° (reads up the axis)
right	+90°
top / bottom	0° (upright)

Horizontal charts put the value title on bottom (upright) and the category title on left (rotated). You usually do not need to set rotation by hand.

When to use a title vs a format

• Prefer numberFormat prefix/postfix for $, %, × on tick labels
• Use axisTitle for longer unit lines (“USD millions, FY25”) that would clutter every tick

---

Visibility

Field	Role
enabled	Axis participates in layout / scales (secondary starts false)
visible	Axis line (and chrome) drawn
labels.visible	Tick / category labels

Range axes (primaryRange, secondaryRange) can be hidden as a role. The domain axis cannot be removed as a role – hide labels instead if needed.

Bar Mekko defaults primaryRange.visible: false (totals and domain labels without a value axis line). Set visible: true to show the value axis line.

---

Tick marks & axis line

axes: {
  left: {
    axisColor: '#666666',
    axisWidth: 1,
    tickMarks: { visible: true }, // primary/secondary default true; domain default false
  },
}

Field	Notes
axisColor / axisWidth	Axis line stroke
tickMarks.visible	Small ticks at label positions

---

Label fonts

Under labels:

labels: {
  visible: true,
  fontSize: 12,
  fontFamily: 'Arial',
  fontColor: 'black',
  distanceFromAxis: 8,
}

House-style tools may rewrite face/color inside axisTitle.text HTML when applying brand fonts.

---

Recipe: titled currency axis

axes: {
  left: {
    labels: {
      preferredTickInterval: 50,
      numberFormat: {
        mode: 'custom',
        customFormat: {
          prefix: '$',
          postfix: '',
          decimalPlaces: 0,
          forceDecimals: false,
          thousandSeparator: ',',
          decimalSeparator: '.',
          signDisplay: 'auto',
          scaleDown: 0,
        },
      },
    },
    axisTitle: { visible: true, text: 'Revenue' },
    gridlines: { visible: true, dashArray: '' },
  },
}

See Currency ticks sample.