---
url: https://chartbuddy.io/embed/docs/axes/titles-and-chrome.md
---
# 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`**.

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

`text` accepts plain strings or inline HTML (`<font>`, `<b>`, …) like [title / subtitle](/configuration/title-subtitle-footnote).

### 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

```js
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`:

```js
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

```js
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](/samples/currency-ticks).