---
product: "AG Charts"
title: "Axis Intervals"
description: "The Axis Interval determines which axis labels, grid lines and ticks are shown along the axis."
framework: react
version: "14.2.0"
related:
    - title: "Axis Configuration"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/axes-configuration/"
    - title: "Axis Types"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/axes-types/"
    - title: "Axis Domain"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/axes-domain/"
    - title: "Axis Position"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/axes-position/"
    - title: "Axis Labels"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/axes-labels/"
    - title: "Time Axes"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/axes-time/"
    - title: "Grid Lines & Band Shading"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/axes-grid-lines/"
    - title: "Secondary Axes"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/axes-secondary/"
llms: "https://www.ag-grid.com/charts/archive/14.2.0/llms.txt"
---

# 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](https://www.ag-grid.com/charts/archive/14.2.0/react/axes-intervals/#step) - Used for regular intervals which are separated by a fixed gap.
- [Values](https://www.ag-grid.com/charts/archive/14.2.0/react/axes-intervals/#values) - Used for irregular intervals which occur at specific values.
- [Min / Max Spacing](https://www.ag-grid.com/charts/archive/14.2.0/react/axes-intervals/#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/archive/14.2.0/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 stepChange = (event: Event) => {
    const nextOptions = clone(options);

    const value = (event.target as HTMLInputElement).value;
    const axis = nextOptions.axes?.y as AgNumberAxisOptions;
    delete axis.interval;
    if (value !== "none") {
      axis.interval = { step: Number(value) };
    }

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <span>Interval Step:</span>
          <div className="button-group" role="group" aria-label="Interval Step">
            <input
              type="radio"
              id="step-none"
              name="interval-step"
              defaultValue="none"
              defaultChecked
              onChange={(event) => stepChange(event)}
            />
            <label htmlFor="step-none">No interval</label>
            <input
              type="radio"
              id="step-5"
              name="interval-step"
              defaultValue="5"
              onChange={(event) => stepChange(event)}
            />
            <label htmlFor="step-5">5</label>
            <input
              type="radio"
              id="step-10"
              name="interval-step"
              defaultValue="10"
              onChange={(event) => stepChange(event)}
            />
            <label htmlFor="step-10">10</label>
            <input
              type="radio"
              id="step-45"
              name="interval-step"
              defaultValue="45"
              onChange={(event) => stepChange(event)}
            />
            <label htmlFor="step-45">45</label>
          </div>
        </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/archive/14.2.0/reactFunctionalTs/axes-intervals/examples/axis-interval/)

### Log Axes

For [Log Axes](https://www.ag-grid.com/charts/archive/14.2.0/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/archive/14.2.0/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 intervalChange = (event: Event) => {
    const nextOptions = clone(options);

    const axis = nextOptions.axes!.x as AgUnitTimeAxisThemeOptions;
    switch ((event.target as HTMLInputElement).value) {
      case "month":
        axis.interval!.step = "month";
        break;
      case "two-months":
        axis.interval!.step = { unit: "month", step: 2 };
        break;
      default:
        axis.interval!.step = {
          unit: "day",
          step: 7,
          epoch: new Date("2025-01-01"),
        };
        break;
    }

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <div className="button-group" role="group" aria-label="Time Interval">
            <input
              type="radio"
              id="interval-week"
              name="time-interval"
              defaultValue="week"
              defaultChecked
              onChange={(event) => intervalChange(event)}
            />
            <label htmlFor="interval-week">1 Week Interval</label>
            <input
              type="radio"
              id="interval-month"
              name="time-interval"
              defaultValue="month"
              onChange={(event) => intervalChange(event)}
            />
            <label htmlFor="interval-month">1 Month Interval</label>
            <input
              type="radio"
              id="interval-two-months"
              name="time-interval"
              defaultValue="two-months"
              onChange={(event) => intervalChange(event)}
            />
            <label htmlFor="interval-two-months">2 Month Interval</label>
          </div>
        </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/archive/14.2.0/reactFunctionalTs/axes-intervals/examples/time-axis-label-format/)

For more information, see [Time Axis Intervals](https://www.ag-grid.com/charts/archive/14.2.0/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,
  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 (%)",
        },
      },
    },
  });

  // 'default' deletes the interval so the axis falls back to its automatically calculated tick values,
  // which is the state the chart is created in — so the checked segment always names what is applied.
  const valuesChange = (event: Event) => {
    const nextOptions = clone(options);

    const value = (event.target as HTMLInputElement).value;
    const axis = nextOptions.axes?.y as AgNumberAxisOptions;
    if (value === "custom") {
      axis.interval = { values: [50, 88, 100] };
    } else {
      delete axis.interval;
    }

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <span>Tick Values:</span>
          <div className="button-group" role="group" aria-label="Tick Values">
            <input
              type="radio"
              id="values-default"
              name="tick-values"
              defaultValue="default"
              defaultChecked
              onChange={(event) => valuesChange(event)}
            />
            <label htmlFor="values-default">Default Values</label>
            <input
              type="radio"
              id="values-custom"
              name="tick-values"
              defaultValue="custom"
              onChange={(event) => valuesChange(event)}
            />
            <label htmlFor="values-custom">50, 88, 100</label>
          </div>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

[Live example: Values](https://www.ag-grid.com/charts/archive/14.2.0/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 (%)",
        },
      },
    },
  });

  // 'default' deletes the interval so the axis falls back to its automatic spacing, which is the state
  // the chart is created in — so the checked segment always names the interval actually applied.
  const spacingChange = (event: Event) => {
    const nextOptions = clone(options);

    const value = (event.target as HTMLInputElement).value;
    const axis = nextOptions.axes?.y as AgNumberAxisOptions;
    if (value === "min-max") {
      axis.interval = { minSpacing: 15, maxSpacing: 25 };
    } else {
      delete axis.interval;
    }

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <span>Interval:</span>
          <div className="button-group" role="group" aria-label="Interval">
            <input
              type="radio"
              id="spacing-default"
              name="interval-spacing"
              defaultValue="default"
              defaultChecked
              onChange={(event) => spacingChange(event)}
            />
            <label htmlFor="spacing-default">Default Spacing</label>
            <input
              type="radio"
              id="spacing-min-max"
              name="interval-spacing"
              defaultValue="min-max"
              onChange={(event) => spacingChange(event)}
            />
            <label htmlFor="spacing-min-max">
              Min Spacing = 15, Max Spacing = 25
            </label>
          </div>
        </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/archive/14.2.0/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/archive/14.2.0/react/axes-types/#category), [Unit Time](https://www.ag-grid.com/charts/archive/14.2.0/react/axes-time/#unit-time) and [Ordinal Time](https://www.ag-grid.com/charts/archive/14.2.0/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: "#999", fillOpacity: 0.1, stroke: "#2b5c95" },
            { stroke: "#2b5c95" },
          ],
        },
        tick: {
          enabled: true,
        },
      },
      y: {
        type: "number",
        title: {
          text: "Market Share (%)",
        },
      },
    },
  });

  const placementChange = (event: Event) => {
    const nextOptions = clone(options);

    const placement = (event.target as HTMLInputElement).value as
      | "on"
      | "between";
    (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">
          <div
            className="button-group"
            role="group"
            aria-label="Interval Placement"
          >
            <input
              type="radio"
              id="placement-on"
              name="interval-placement"
              defaultValue="on"
              onChange={(event) => placementChange(event)}
            />
            <label htmlFor="placement-on">
              <code>placement: 'on'</code>
            </label>
            <input
              type="radio"
              id="placement-between"
              name="interval-placement"
              defaultValue="between"
              defaultChecked
              onChange={(event) => placementChange(event)}
            />
            <label htmlFor="placement-between">
              <code>placement: 'between'</code>
            </label>
          </div>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

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

In the example above:

- The chart is using [Alternating Band Shading](https://www.ag-grid.com/charts/archive/14.2.0/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.