> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Axes

## Overview

The `axes` property provides comprehensive control over chart axes. Configure labels, ranges, scales and visibility for x, y and secondary y axes.

```tsx theme={null}
const config: GraphConfig = {
  axes: {
    x: {
      label: 'Month',
    },
    y: {
      label: 'Revenue (£)',
      min: 0,
    },
  },
};
```

<Note>
  Axes configuration only applies to chart types that support axes (line, bar, column, combo, scatter, etc.). Pie and
  donut charts don't use axes.
</Note>

## X-axis

The x-axis typically represents the independent variable (categories, time periods or continuous values).

### Label

<ParamField path="axes.x.label" type="string" optional>
  Custom label for the x-axis. Displayed below the axis.
</ParamField>

```tsx theme={null}
axes: {
  x: {
    label: 'Quarter';
  }
}
```

### Visibility

<ParamField path="axes.x.isHidden" type="boolean" optional>
  Whether to hide the x-axis. When `true`, the axis line, ticks and labels are hidden. The axis label is also hidden.
</ParamField>

```tsx theme={null}
axes: {
  x: {
    isHidden: true;
  }
}
```

### Orientation

<ParamField path="axes.x.isReversed" type="boolean" optional>
  Flip the x-axis position (top↔bottom).
</ParamField>

```tsx theme={null}
axes: {
  x: {
    isReversed: true; // Move x-axis to opposite side
  }
}
```

### Numeric x-axis options

When the x-axis contains numeric values (not categories), additional options are available:

<ParamField path="axes.x.scaleType" type="'linear' | 'logarithmic'" default="linear" optional>
  Scale type for numeric x-axes. Use `'logarithmic'` for data that spans several orders of magnitude.
</ParamField>

<ParamField path="axes.x.min" type="number" optional>
  Minimum value for the x-axis. If not set, automatically calculated from the data.
</ParamField>

<ParamField path="axes.x.max" type="number" optional>
  Maximum value for the x-axis. If not set, automatically calculated from the data.
</ParamField>

<ParamField path="axes.x.tickDisplayMode" type="'auto' | 'edges'" default="auto" optional>
  How to display ticks on numeric x-axes: - `'auto'` - Display all ticks - `'edges'` - Display only the first and last
  ticks
</ParamField>

```tsx theme={null}
axes: {
  x: {
    scaleType: 'linear',
    min: 0,
    max: 100,
    tickDisplayMode: 'auto'
  }
}
```

## Y-axis

The y-axis typically represents the dependent variable (measurements, values, quantities).

### Label

<ParamField path="axes.y.label" type="string" optional>
  Custom label for the y-axis. Displayed beside the axis.
</ParamField>

```tsx theme={null}
axes: {
  y: {
    label: 'Sales (£000s)';
  }
}
```

### Visibility

<ParamField path="axes.y.isHidden" type="boolean" optional>
  Whether to hide the y-axis. When `true`, the axis line, ticks and labels are hidden. The axis label is also hidden.
</ParamField>

```tsx theme={null}
axes: {
  y: {
    isHidden: true;
  }
}
```

### Orientation

<ParamField path="axes.y.isReversed" type="boolean" optional>
  Flip the y-axis position (left↔right).
</ParamField>

```tsx theme={null}
axes: {
  y: {
    isReversed: true; // Move y-axis to opposite side
  }
}
```

### Scale type

<ParamField path="axes.y.scaleType" type="'linear' | 'logarithmic'" default="linear" optional>
  Scale type for the y-axis: - `'linear'` - Standard linear scale with evenly spaced ticks - `'logarithmic'` -
  Logarithmic scale, useful for data spanning multiple orders of magnitude
</ParamField>

```tsx theme={null}
axes: {
  y: {
    scaleType: 'logarithmic'; // Better for data like: 1, 10, 100, 1000
  }
}
```

### Range

<ParamField path="axes.y.min" type="number" optional>
  Minimum value for the y-axis. If not set, automatically calculated from the data. Setting this to `0` is common to
  ensure bars start from zero.
</ParamField>

<ParamField path="axes.y.max" type="number" optional>
  Maximum value for the y-axis. If not set, automatically calculated from the data.
</ParamField>

```tsx theme={null}
axes: {
  y: {
    min: 0,      // Start at zero
    max: 10000   // Cap at 10,000
  }
}
```

### Tick display

<ParamField path="axes.y.tickDisplayMode" type="'auto' | 'edges'" default="auto" optional>
  How to display ticks on the y-axis: - `'auto'` - Display all ticks at appropriate intervals - `'edges'` - Display only
  the minimum and maximum values
</ParamField>

```tsx theme={null}
axes: {
  y: {
    tickDisplayMode: 'edges'; // Show only min and max
  }
}
```

## Secondary y-axis (y2)

Combo charts can display two y-axes to accommodate series with different scales or units.

### Label

<ParamField path="axes.y2.label" type="string" optional>
  Custom label for the secondary y-axis. Only used when dual y-axes are enabled.
</ParamField>

```tsx theme={null}
const config: GraphConfig = {
  type: 'combo',
  axes: {
    y: {
      label: 'Revenue (£)',
    },
    y2: {
      label: 'Units sold',
    },
    hasDualYAxis: true,
  },
};
```

<Note>
  The secondary y-axis (y2) only supports the `label` property. Other axis options (min, max, scale) are not
  configurable for y2.
</Note>

### Dual y-axis mode

<ParamField path="axes.hasDualYAxis" type="boolean" default="true" optional>
  Whether to show two y-axes on a combo chart. When `true`, the primary y-axis appears on the left and the secondary on
  the right (or reversed if `isReversed` is set).
</ParamField>

```tsx theme={null}
const config: GraphConfig = {
  type: 'combo',
  axes: {
    hasDualYAxis: true, // Show both y-axes
  },
};
```

When `hasDualYAxis` is `false`, all series share a single y-axis.

### Swapping y-axes

For combo charts with dual y-axes, use `isReversed` to swap the positions:

```tsx theme={null}
axes: {
  y: {
    label: 'Revenue (£)',
    isReversed: true  // Move primary y-axis to the right
  },
  y2: {
    label: 'Units sold'  // This will now appear on the left
  },
  hasDualYAxis: true
}
```

## Grid lines

<ParamField path="axes.showGridLines" type="boolean" optional>
  Whether to show horizontal grid lines across the chart.
</ParamField>

```tsx theme={null}
axes: {
  showGridLines: true; // Show horizontal grid lines
}
```

## Complete example

```tsx theme={null}
const config: GraphConfig = {
  type: 'line',
  data: {
    /* ... */
  },
  axes: {
    x: {
      label: 'Date',
      isHidden: false,
    },
    y: {
      label: 'Revenue (£)',
      min: 0,
      max: 50000,
      scaleType: 'linear',
      tickDisplayMode: 'auto',
      isHidden: false,
      isReversed: false,
    },
    showGridLines: true,
  },
};
```

## Combo chart example

```tsx theme={null}
const config: GraphConfig = {
  type: 'combo',
  data: {
    /* ... */
  },
  axes: {
    y: {
      label: 'Revenue (£)',
      min: 0,
    },
    y2: {
      label: 'Units sold',
    },
    hasDualYAxis: true,
    showGridLines: true,
  },
};
```