---
title: "Axis Intervals"
framework: javascript
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/javascript/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

```ts
import {
  AgCartesianChartOptions,
  AgCharts,
  AgNumberAxisOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";

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

const options: 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 (%)",
      },
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function setStep(step: number) {
  const axis = options.axes?.y as AgNumberAxisOptions;
  axis.interval = { step: step };

  chart.update(options);
}

function clearInterval() {
  const axis = options.axes?.y as AgNumberAxisOptions;
  axis.interval = {};

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).setStep = setStep;
  (<any>window).clearInterval = clearInterval;
}
```

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

### Log Axes

For [Log Axes](https://www.ag-grid.com/charts/javascript/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/javascript/axes-time/), the `step` should be a `AgTimeInterval` or `AgTimeIntervalUnit`.

#### Time Axis Interval

```ts
import {
  AgCartesianChartOptions,
  AgCharts,
  AgUnitTimeAxisThemeOptions,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  TimeAxisModule,
} from "ag-charts-community";

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

const options: 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 },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

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

  chart.update(options);
}

function setOneMonthInterval() {
  (options.axes!.x as AgUnitTimeAxisThemeOptions).interval!.step = "month";

  chart.update(options);
}

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

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).setOneWeekInterval = setOneWeekInterval;
  (<any>window).setOneMonthInterval = setOneMonthInterval;
  (<any>window).setTwoMonthInterval = setTwoMonthInterval;
}
```

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

For more information, see [Time Axis Intervals](https://www.ag-grid.com/charts/javascript/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

```ts
import {
  AgCartesianChartOptions,
  AgCharts,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";

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

const options: 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],
      },
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function setTickValues(values: number[]) {
  options.axes!.y!.interval!.values = values;

  chart.update(options);
}

function reset() {
  options.axes!.y!.interval!.values = undefined;

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).setTickValues = setTickValues;
  (<any>window).reset = reset;
}
```

[Live example: Values](https://www.ag-grid.com/charts/typescript/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

```ts
import {
  AgCartesianChartOptions,
  AgCharts,
  AgNumberAxisOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";

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

const options: 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 },
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function setMinMaxSpacing(minSpacing: number, maxSpacing: number) {
  const axis = options.axes?.y as AgNumberAxisOptions;
  axis.interval = { minSpacing, maxSpacing };

  chart.update(options);
}

function reset() {
  const axis = options.axes?.y as AgNumberAxisOptions;
  axis.interval = {};

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).setMinMaxSpacing = setMinMaxSpacing;
  (<any>window).reset = reset;
}
```

[Live example: Min / Max Spacing](https://www.ag-grid.com/charts/typescript/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/javascript/axes-types/#category), [Unit Time](https://www.ag-grid.com/charts/javascript/axes-time/#unit-time) and [Ordinal Time](https://www.ag-grid.com/charts/javascript/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

```ts
import {
  AgCartesianChartOptions,
  AgCategoryAxisOptions,
  AgCharts,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";

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

const options: 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 (%)",
      },
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function setPlacement(placement: "on" | "between") {
  (options.axes!.x! as AgCategoryAxisOptions).interval!.placement = placement;
  (options.axes!.x! as AgCategoryAxisOptions).title!.text =
    `placement: '${placement}'`;

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).setPlacement = setPlacement;
}
```

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

In the example above:

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