---
title: "Axis Intervals"
framework: react
version: "14.1.0"
---

# Axis Intervals

The Axis Interval determines which axis labels, grid lines and ticks are shown along the axis.

> **Note**
>
> Category axes show these items for every category. Number and time axes will display around 5 items depending on the available space.

## Customisation

The axis interval can be configured with one of the following strategies:

- [Step](#step) - Used for regular intervals which are separated by a fixed gap.
- [Values](#values) - Used for irregular intervals which occur at specific values.
- [Min / Max Spacing](#min--max-spacing) - Used for responsive intervals based on the chart size, separated by the rendered pixel gap range.

## Step

The `interval.step` property defines the size of the fixed interval, expressed in the units of the respective axis.

> **Note**
>
> If the configured `interval` results in too many items given the data domain and chart size, it will be ignored and the default interval will be applied.

### Number Axes

For [Number Axes](https://www.ag-grid.com/charts/react/axes-types/#number), the `step` should be a number. For example, a `step` of `5`, will display values at `0`, `5`, `10`.

```js
{
    interval: { step: 5 },
}
```

#### Number Axis Interval

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  AgNumberAxisOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import clone from "clone";

ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    data: [
      { os: "Windows", share: 88.07 },
      { os: "macOS", share: 9.44 },
      { os: "Linux", share: 1.87 },
    ],
    series: [
      {
        type: "bar",
        xKey: "os",
        yKey: "share",
      },
    ],
    axes: {
      x: {
        type: "category",
        title: {
          text: "Operating System",
        },
      },
      y: {
        type: "number",
        title: {
          text: "Market Share (%)",
        },
      },
    },
  });

  const setStep = (step: number) => {
    const nextOptions = clone(options);

    const axis = nextOptions.axes?.y as AgNumberAxisOptions;
    axis.interval = { step: step };

    setOptions(nextOptions);
  };

  const clearInterval = () => {
    const nextOptions = clone(options);

    const axis = nextOptions.axes?.y as AgNumberAxisOptions;
    axis.interval = {};

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={() => setStep(5)}>Set Step = 5</button>
          <button onClick={() => setStep(10)}>Set Step = 10</button>
          <button onClick={() => setStep(45)}>Set Step = 45</button>
          <button onClick={clearInterval}>Clear Interval</button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Number Axis Interval](https://www.ag-grid.com/charts/reactFunctionalTs/axes-intervals/examples/axis-interval)

### Log Axes

For [Log Axes](https://www.ag-grid.com/charts/react/axes-types/#log), the `step` should be a number.

This number increments the exponent to which the base of the logarithm is elevated. For example, a `step` of `2` will display values at `10^0`, `10^2`, `10^4`.

### Time Axes

For all [Time Axes](https://www.ag-grid.com/charts/react/axes-time/), the `step` should be a `AgTimeInterval` or `AgTimeIntervalUnit`.

#### Time Axis Interval

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  AgUnitTimeAxisThemeOptions,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  TimeAxisModule,
} from "ag-charts-community";
import clone from "clone";

ModuleRegistry.registerModules([
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
  TimeAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    title: {
      text: "Monthly average daily temperatures in the UK",
    },
    series: [
      {
        type: "line",
        xKey: "date",
        yKey: "temp",
      },
    ],
    axes: {
      x: {
        type: "time",
        nice: false,
        interval: {
          step: { unit: "day", step: 7, epoch: new Date("2025-01-01") },
        },
        label: {
          autoRotate: true,
        },
      },
      y: {
        type: "number",
        label: {
          format: "#{~f} °C",
        },
      },
    },
    padding: {
      top: 20,
      right: 40,
      bottom: 20,
      left: 20,
    },
    data: [
      { date: new Date("2025-01-01"), temp: 4.2 },
      { date: new Date("2025-01-08"), temp: 4.9 },
      { date: new Date("2025-01-15"), temp: 5.1 },
      { date: new Date("2025-01-22"), temp: 6.9 },
      { date: new Date("2025-01-29"), temp: 7.2 },
      { date: new Date("2025-02-05"), temp: 7.5 },
      { date: new Date("2025-02-12"), temp: 7.9 },
      { date: new Date("2025-02-19"), temp: 8.7 },
      { date: new Date("2025-02-26"), temp: 8.8 },
      { date: new Date("2025-03-05"), temp: 9.1 },
      { date: new Date("2025-03-12"), temp: 9.2 },
      { date: new Date("2025-03-19"), temp: 9.3 },
      { date: new Date("2025-03-26"), temp: 9.5 },
      { date: new Date("2025-04-02"), temp: 9.8 },
      { date: new Date("2025-04-09"), temp: 10.2 },
      { date: new Date("2025-04-16"), temp: 10.7 },
      { date: new Date("2025-04-23"), temp: 10.8 },
      { date: new Date("2025-04-30"), temp: 11.2 },
      { date: new Date("2025-05-07"), temp: 11.3 },
    ],
  });

  const setOneWeekInterval = () => {
    const nextOptions = clone(options);

    (nextOptions.axes!.x as AgUnitTimeAxisThemeOptions).interval!.step = {
      unit: "day",
      step: 7,
      epoch: new Date("2025-01-01"),
    };

    setOptions(nextOptions);
  };

  const setOneMonthInterval = () => {
    const nextOptions = clone(options);

    (nextOptions.axes!.x as AgUnitTimeAxisThemeOptions).interval!.step =
      "month";

    setOptions(nextOptions);
  };

  const setTwoMonthInterval = () => {
    const nextOptions = clone(options);

    (nextOptions.axes!.x as AgUnitTimeAxisThemeOptions).interval!.step = {
      unit: "month",
      step: 2,
    };

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={setOneWeekInterval}>1 Week Interval</button>
          <button onClick={setOneMonthInterval}>1 Month Interval</button>
          <button onClick={setTwoMonthInterval}>2 Month Interval</button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Time Axis Interval](https://www.ag-grid.com/charts/reactFunctionalTs/axes-intervals/examples/time-axis-label-format)

For more information, see [Time Axis Intervals](https://www.ag-grid.com/charts/react/axes-time/#time-intervals).

## Values

The `interval.values` property allows you to specify the precise array of values to display. Depending on the axis type, this should be an array consisting of `number`, `Date`, or `String` values.

```js
{
    interval: {
        values: [50, 88, 100],
    },
}
```

#### Values

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import clone from "clone";

ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    data: [
      { os: "Windows", share: 88.07 },
      { os: "macOS", share: 9.44 },
      { os: "Linux", share: 1.87 },
    ],
    series: [
      {
        type: "bar",
        xKey: "os",
        yKey: "share",
      },
    ],
    axes: {
      x: {
        type: "category",
        title: {
          text: "Operating System",
        },
      },
      y: {
        type: "number",
        title: {
          text: "Market Share (%)",
        },
        interval: {
          values: [0, 20, 40, 60, 80, 100],
        },
      },
    },
  });

  const setTickValues = (values: number[]) => {
    const nextOptions = clone(options);

    nextOptions.axes!.y!.interval!.values = values;

    setOptions(nextOptions);
  };

  const reset = () => {
    const nextOptions = clone(options);

    nextOptions.axes!.y!.interval!.values = undefined;

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={() => setTickValues([50, 88, 100])}>
            Set Tick Values [50, 88, 100]
          </button>
          <button onClick={reset}>Reset</button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Values](https://www.ag-grid.com/charts/reactFunctionalTs/axes-intervals/examples/axis-values)

## Min / Max Spacing

The `interval.minSpacing` and `interval.maxSpacing` options define the approximate minimum and maximum pixel gaps that should exist between values. You can provide one or both options as needed.

An appropriate number of items will be generated to meet the specified `interval.minSpacing` and `interval.maxSpacing` constraints, taking the rendered size of the chart into account.

> **Note**
>
> Category axes do not support `maxSpacing`, as intervals are derived from the domain of category values.

```js
{
    interval: {
        minSpacing: 15,
        maxSpacing: 25,
    },
}
```

#### Min / Max Spacing

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  AgNumberAxisOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import clone from "clone";
import "./styles.css";

ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    data: [
      { os: "Windows", share: 88.07 },
      { os: "macOS", share: 9.44 },
      { os: "Linux", share: 1.87 },
    ],
    series: [
      {
        type: "bar",
        xKey: "os",
        yKey: "share",
      },
    ],
    axes: {
      x: {
        type: "category",
        title: {
          text: "Operating System",
        },
      },
      y: {
        type: "number",
        title: {
          text: "Market Share (%)",
        },
        interval: { step: 20 },
      },
    },
  });

  const setMinMaxSpacing = (minSpacing: number, maxSpacing: number) => {
    const nextOptions = clone(options);

    const axis = nextOptions.axes?.y as AgNumberAxisOptions;
    axis.interval = { minSpacing, maxSpacing };

    setOptions(nextOptions);
  };

  const reset = () => {
    const nextOptions = clone(options);

    const axis = nextOptions.axes?.y as AgNumberAxisOptions;
    axis.interval = {};

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={() => setMinMaxSpacing(15, 25)}>
            Set Spacing: Min = 15, Max = 25
          </button>
          <button onClick={reset}>Reset</button>
        </div>
      </div>
      <div className="resizable-container">
        <AgCharts options={options} className="resizable" />
      </div>
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Min / Max Spacing](https://www.ag-grid.com/charts/reactFunctionalTs/axes-intervals/examples/axis-min-max-spacing)

In this example:

- There is a button at the top of the chart to apply min / max spacing.
- There is a grab handle in the bottom right to allow resizing of the chart to see how the interval changes with available space.

> **Note**
>
> When `minSpacing` and `maxSpacing` are very close in value, the actual spacing may be outside the requested range. This is because the specified constraints may result in non-standard intervals rather than round intervals such as 1x, 2x, 5x, and 10x. To avoid this, set `maxSpacing` to be 2-3 times larger than `minSpacing`.

## Placement

For [Category](https://www.ag-grid.com/charts/react/axes-types/#category), [Unit Time](https://www.ag-grid.com/charts/react/axes-time/#unit-time) and [Ordinal Time](https://www.ag-grid.com/charts/react/axes-time/#ordinal-time) axes, the ticks and grid lines are positioned between the categories by default.

To place them on each category instead, use the `interval.placement: 'on'` option.

#### Placement

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  AgCategoryAxisOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import clone from "clone";

ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    data: [
      { os: "Windows", share: 88.07 },
      { os: "macOS", share: 9.44 },
      { os: "Linux", share: 1.87 },
    ],
    series: [
      {
        type: "bar",
        xKey: "os",
        yKey: "share",
      },
    ],
    axes: {
      x: {
        type: "category",
        title: {
          text: "placement: 'between'",
          fontSize: 15,
        },
        interval: {
          placement: "between",
        },
        gridLine: {
          width: 1,
          style: [
            { fill: "black", fillOpacity: 0.05, stroke: "#2b5c95" },
            { stroke: "#2b5c95" },
          ],
        },
        tick: {
          enabled: true,
        },
      },
      y: {
        type: "number",
        title: {
          text: "Market Share (%)",
        },
      },
    },
  });

  const setPlacement = (placement: "on" | "between") => {
    const nextOptions = clone(options);

    (nextOptions.axes!.x! as AgCategoryAxisOptions).interval!.placement =
      placement;
    (nextOptions.axes!.x! as AgCategoryAxisOptions).title!.text =
      `placement: '${placement}'`;

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={() => setPlacement("on")}>
            <code>placement: 'on'</code>
          </button>
          <button onClick={() => setPlacement("between")}>
            <code>placement: 'between'</code>
          </button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Placement](https://www.ag-grid.com/charts/reactFunctionalTs/axes-intervals/examples/axis-placement)

In the example above:

- The chart is using [Alternating Band Shading](https://www.ag-grid.com/charts/react/axes-grid-lines/#alternating-band-shading).
- When the `placement` is set to `between` (default), the ticks and grid lines are positioned between the labels of each category.
- When the `placement` is set to `on`, the ticks and grid lines are positioned above the label on each category.