Domain axis

The domain axis carries categories (most charts) or a linear X domain (scatter / bubble; mekko / bar mekko use a special width domain). On a vertical chart it is usually axes.bottom; on a horizontal chart it is axes.left.

axes: {
  bottom: {
    id: 'domain',
    labels: {
      visible: true,
      fitMechanism: 'wrap', // 'wrap' | 'rotation' | 'alternating' | 'none'
      wrapMaxLines: 5,
      position: 'bottom',   // often mirrors the side; 'auto' | 'bottom' | 'top' | 'chart-top'
      dateFormat: {
        treatAsDate: false,
        format: 'MMM D, YYYY',
      },
    },
  },
}

Domain axes cannot be hidden as a role (range axes can). You can still hide labels with labels.visible: false.

---

Fit mechanisms

When labels collide, ChartBuddy applies the configured fit strategy:

fitMechanism	Behavior	Best for
'wrap' (default)	Multi-line labels within the category column	Short phrases, vertical charts
'rotation'	Tilts labels (~−25° to −60°)	Many dense categories
'alternating'	Staggers labels on two (or more) rows	Medium crowding without rotation
'none'	No fitting – labels stay single-line horizontal	Few short labels, or when you control spacing

If there is no overlap, labels stay horizontal even when a fit mechanism is set.

Horizontal charts

Category labels sit on the left and need height. Prefer wrap or fewer categories; rotation eats horizontal plot width. Give the mount enough height (e.g. 480px+) – see Orientation.

{
  orientation: 'horizontal',
  axes: {
    left: {
      labels: {
        fitMechanism: 'wrap',
        wrapMaxLines: 3,
      },
    },
  },
}

---

Category dates

Category values that should format as dates use dateFormat, not numberFormat:

axes: {
  bottom: {
    labels: {
      dateFormat: {
        treatAsDate: true,
        format: 'MMM YYYY',
      },
    },
  },
}

format is a date pattern string (e.g. 'MMM D, YYYY'). Leave treatAsDate: false for ordinary category strings.

---

Mekko / bar Mekko domain

Mekko and bar Mekko use a linear 0–100 width domain (column thickness), not a simple band of equal categories. Defaults seed mekko domain ticks with % postfix and preferredTickInterval: 20. Prefer exporting a finished mekko from the editor when authoring advanced domain chrome.

---

Scatter / bubble

Scatter and bubble use linear scales on both domain and range (runtime forces linear domain even if a band default was seeded). Format both sides with numberFormat as needed; category fitMechanism / dateFormat usually do not apply.

---

Pitfalls

• Crowding labels then blaming the value axis – fix fitMechanism or reduce categories
• Horizontal charts with tall wrapped labels and a short container
• Using numberFormat for calendar strings – use dateFormat.treatAsDate
• Hand-authoring mekko domain from scratch – start from getChartData() after editing

Next: Value axis · Titles & chrome