---
title: "Axis Intervals"
framework: vue
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/vue/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 { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import clone from "clone";

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

const ChartExample = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <button v-on:click="setStep(5)">Set Step = 5</button>
        <button v-on:click="setStep(10)">Set Step = 10</button>
        <button v-on:click="setStep(45)">Set Step = 45</button>
        <button v-on:click="clearInterval()">Clear Interval</button>
      </div>
    </div>
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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) => {
      const optionsCopy = clone(options.value);

      const axis = optionsCopy.axes?.y;
      axis.interval = { step: step };

      options.value = optionsCopy;
    };
    const clearInterval = () => {
      const optionsCopy = clone(options.value);

      const axis = optionsCopy.axes?.y;
      axis.interval = {};

      options.value = optionsCopy;
    };

    return {
      options,
      setStep,
      clearInterval,
    };
  },
});

createApp(ChartExample).mount("#app");
```

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

### Log Axes

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

#### Time Axis Interval

```ts
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  TimeAxisModule,
} from "ag-charts-community";
import clone from "clone";

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

const ChartExample = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <button v-on:click="setOneWeekInterval()">1 Week Interval</button>
        <button v-on:click="setOneMonthInterval()">1 Month Interval</button>
        <button v-on:click="setTwoMonthInterval()">2 Month Interval</button>
      </div>
    </div>
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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 optionsCopy = clone(options.value);

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

      options.value = optionsCopy;
    };
    const setOneMonthInterval = () => {
      const optionsCopy = clone(options.value);

      optionsCopy.axes.x.interval.step = "month";

      options.value = optionsCopy;
    };
    const setTwoMonthInterval = () => {
      const optionsCopy = clone(options.value);

      optionsCopy.axes.x.interval.step = { unit: "month", step: 2 };

      options.value = optionsCopy;
    };

    return {
      options,
      setOneWeekInterval,
      setOneMonthInterval,
      setTwoMonthInterval,
    };
  },
});

createApp(ChartExample).mount("#app");
```

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

For more information, see [Time Axis Intervals](https://www.ag-grid.com/charts/vue/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 { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import clone from "clone";

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

const ChartExample = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <button v-on:click="setTickValues([50, 88, 100])">Set Tick Values [50, 88, 100]</button>
        <button v-on:click="reset()">Reset</button>
      </div>
    </div>
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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) => {
      const optionsCopy = clone(options.value);

      optionsCopy.axes.y.interval.values = values;

      options.value = optionsCopy;
    };
    const reset = () => {
      const optionsCopy = clone(options.value);

      optionsCopy.axes.y.interval.values = undefined;

      options.value = optionsCopy;
    };

    return {
      options,
      setTickValues,
      reset,
    };
  },
});

createApp(ChartExample).mount("#app");
```

[Live example: Values](https://www.ag-grid.com/charts/vue3/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 { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import clone from "clone";

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

const ChartExample = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <button v-on:click="setMinMaxSpacing(15, 25)">Set Spacing: Min = 15, Max = 25</button>
        <button v-on:click="reset()">Reset</button>
      </div>
    </div>
    <div class="resizable-container">
      <ag-charts
        :options="options"
        class="resizable"
      />
    </div>
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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, maxSpacing) => {
      const optionsCopy = clone(options.value);

      const axis = optionsCopy.axes?.y;
      axis.interval = { minSpacing, maxSpacing };

      options.value = optionsCopy;
    };
    const reset = () => {
      const optionsCopy = clone(options.value);

      const axis = optionsCopy.axes?.y;
      axis.interval = {};

      options.value = optionsCopy;
    };

    return {
      options,
      setMinMaxSpacing,
      reset,
    };
  },
});

createApp(ChartExample).mount("#app");
```

[Live example: Min / Max Spacing](https://www.ag-grid.com/charts/vue3/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/vue/axes-types/#category), [Unit Time](https://www.ag-grid.com/charts/vue/axes-time/#unit-time) and [Ordinal Time](https://www.ag-grid.com/charts/vue/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 { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import clone from "clone";

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

const ChartExample = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <button v-on:click="setPlacement('on')"><code>placement: 'on'</code></button>
        <button v-on:click="setPlacement('between')"><code>placement: 'between'</code></button>
      </div>
    </div>
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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) => {
      const optionsCopy = clone(options.value);

      optionsCopy.axes.x.interval.placement = placement;
      optionsCopy.axes.x.title.text = `placement: '${placement}'`;

      options.value = optionsCopy;
    };

    return {
      options,
      setPlacement,
    };
  },
});

createApp(ChartExample).mount("#app");
```

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

In the example above:

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