# Axes

> Whole-number ticks, tick step, reversed axes for ranks, two-line labels and a right y axis.

Source: https://82chart.com/en/docs/axes/

Axis options go in `xAxis` and `yAxis` (`y2Axis` for the right axis). For horizontal bars the value axis is still `yAxis`.

## Whole-number ticks and a fixed step

For counts and people, `integer: true` rules out ticks such as 0.5. `step` fixes the distance between ticks (every 10, say). A step so small it would draw more than 200 ticks is ignored.

```js
createChart('#chart', {
  type: 'bar',
  title: 'Support tickets by day',
  yAxis: { integer: true },
  data: {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    series: [{ name: 'Tickets', data: [2, 3, 1, 3, 2] }],
  },
});
```

## Reversed axes (ranks)

`yAxis: { reverse: true }` flips the value axis so small values are on top, for rank charts where #1 belongs at the top. On horizontal bars it flips the category order, putting the first item at the bottom.

```js
createChart('#chart', {
  type: 'line',
  title: 'Search rank',
  yAxis: { reverse: true, integer: true, min: 1, title: 'Rank' },
  data: {
    labels: ['W1', 'W2', 'W3', 'W4', 'W5'],
    series: [
      { name: 'Our product', data: [8, 5, 3, 2, 1] },
      { name: 'Competitor', data: [1, 2, 2, 4, 6] },
    ],
  },
});
```

## Two-line labels

A `'\n'` in a category label writes it on two lines, handy for long names. Tooltips and the table join the lines with a space.

```js
createChart('#chart', {
  type: 'bar',
  title: 'Stores by district',
  data: {
    labels: ['Seoul\nGangnam-gu', 'Seoul\nSongpa-gu', 'Busan\nHaeundae-gu', 'Daegu\nSuseong-gu'],
    series: [{ name: 'Stores', data: [42, 35, 28, 19] }],
  },
});
```

## Log axes (log, symlog)

When values differ by orders of magnitude (100 users to 100 million), use `yAxis: { type: 'log' }`. Ticks are powers of ten in the page's number style (100 · 1K · 10K · 100K · 1M); many decades skip every other one, two decades or fewer add 2 and 5 (10 · 20 · 50 · 100). Values of zero or less cannot sit on a log axis: lines break there and bars stay on the floor. Tooltips, the table and CSV show the real values, and zooming keeps the log axis.

```js
createChart('#chart', {
  type: 'line',
  title: 'Total sign-ups',
  language: 'en',
  yAxis: { type: 'log' },
  zoom: true,
  data: {
    labels: ['2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025'],
    series: [{ name: 'Sign-ups', data: [320, 4100, 38000, 410000, 2900000, 15000000, 48000000, 110000000] }],
  },
});
```

With zeros or negatives use `type: 'symlog'`: linear near zero, logarithmic further out, so profits and losses of very different sizes share one axis. Scatter plots take `xAxis: { type: 'log' }` too.

```js
createChart('#chart', {
  type: 'bar',
  title: 'Profit by business',
  language: 'en',
  prefix: '$',
  yAxis: { type: 'symlog' },
  data: {
    labels: ['A', 'B', 'C', 'D'],
    series: [{ name: 'Profit', data: [-3200, 45, 0, 870000] }],
  },
});
```

> Log axes are ignored for 100% stacks, population pyramids and waterfalls (they are about sums and shares). Bar lengths on a log axis are not proportional to the values: say so in the axis title or a `footnote`.

## A right y axis

Series in a different unit can sit on a right axis with `axis: 'right'`. When both axes reach zero, the left zero and the right zero share one grid line (turn it off with `y2Axis: { alignZero: false }`). The caveats and an example are on the [combo chart](https://82chart.com/en/docs/combo/) page.

| Option | What it does |
| --- | --- |
| `integer` | Whole-number ticks only |
| `step` | Fixed tick step |
| `reverse` | Flip the value axis (horizontal bars: the category order) |
| `unit` / `prefix` | `y2Axis` only: unit of the right axis and its series |
| `type` | Value axes: `'log' \| 'symlog'` (and x for scatter plots) |
| `alignZero` | `y2Axis` only: both zeros on one grid line (default true) |