---
product: "AG Charts"
title: "Axis Domain"
description: "The axis domain is the extent of displayed values 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 Intervals"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/axes-intervals/"
    - 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 Domain

The axis domain is the extent of displayed values along the axis.

For a continuous axis, such as the [Number](https://www.ag-grid.com/charts/archive/14.2.0/react/axes-types/#number) or [Time](https://www.ag-grid.com/charts/archive/14.2.0/react/axes-types/#time) axis, the domain is calculated automatically from the minimum and maximum values of the data.

For the [Category](https://www.ag-grid.com/charts/archive/14.2.0/react/axes-types/#category) axis, the domain consists of the discrete values in the data.

## Nice Domain

By default, a continuous axis is extended to have start and stop values that are visually pleasing, intuitive, and aligned with the tick interval.

To use the exact data bounds without extending to nice round numbers, set the `axis.nice` property to `false`:

```js
{
    axes: {
        y: {
            type: 'number',
            nice: false, // Use the exact data domain as the axis domain
        },
    },
}
```

The `axis.nice` configuration is demonstrated in the example below. Use the button to toggle the `nice` property:

- When `nice` is set to `false`, the axis ranges from the minimum data value of `1.87` to the maximum data value of `88.07`.
- When `nice` is set to `true`, the axis domain is extended to nice round numbers, starting from `0` and stopping at `100`.

#### Number Axis Nice

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

ModuleRegistry.registerModules([
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  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: "line",
        xKey: "os",
        yKey: "share",
      },
    ],
    axes: {
      x: {
        type: "category",
        title: {
          text: "Operating System",
        },
      },
      y: {
        type: "number",
        title: {
          text: "Market Share (%)",
        },
        nice: true,
      },
    },
  });

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

    (nextOptions.axes!.y! as AgNumberAxisOptions).nice = !(
      nextOptions.axes!.y! as AgNumberAxisOptions
    ).nice;

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={toggleAxisNice}>Toggle Axis Nice Domain</button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

[Live example: Number Axis Nice](https://www.ag-grid.com/charts/archive/14.2.0/reactFunctionalTs/axes-domain/examples/axis-nice/)

## Domain Min & Max

Use the `axis.min` and `axis.max` properties to set absolute domain bounds. These are fixed values that will not be extended by the `nice` algorithm or the data.

```js
{
    axes: {
        y: {
            type: 'number',
            min: -50,
            max: 150,
        },
    },
}
```

The example below shows how to use the `axis.min` and `axis.max` configurations.

Use the buttons to set a specific domain minimum and maximum, or the automatically calculated domain.

#### Number Axis Min & Max

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

ModuleRegistry.registerModules([
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  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: "line",
        xKey: "os",
        yKey: "share",
      },
    ],
    axes: {
      x: {
        type: "category",
        title: {
          text: "Operating System",
        },
      },
      y: {
        type: "number",
        title: {
          text: "Market Share (%)",
        },
      },
    },
  });

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

    const value = (event.target as HTMLInputElement).value;
    const numberAxisOptions = nextOptions.axes!.y! as AgNumberAxisOptions;
    delete numberAxisOptions.min;
    delete numberAxisOptions.max;
    if (value === "min-max") {
      numberAxisOptions.min = -50;
      numberAxisOptions.max = 150;
    }

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <span>Axis Domain:</span>
          <div className="button-group" role="group" aria-label="Axis Domain">
            <input
              type="radio"
              id="domain-min-max"
              name="axis-domain"
              defaultValue="min-max"
              onChange={(event) => domainChange(event)}
            />
            <label htmlFor="domain-min-max">Min: -50, Max: 150</label>
            <input
              type="radio"
              id="domain-default"
              name="axis-domain"
              defaultValue="default"
              defaultChecked
              onChange={(event) => domainChange(event)}
            />
            <label htmlFor="domain-default">Default</label>
          </div>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

[Live example: Number Axis Min & Max](https://www.ag-grid.com/charts/archive/14.2.0/reactFunctionalTs/axes-domain/examples/axis-min-max/)

## Preferred Domain Bounds

For more flexible domain configuration, use the `axis.preferredMin` and `axis.preferredMax` properties. These set preferred bounds that can be extended by the `nice` algorithm or by data bounds.

```js
{
    axes: {
        y: {
            type: 'number',
            preferredMin: -50,
            preferredMax: 150,
            nice: true, // Domain may extend beyond preferred bounds
        },
    },
}
```

With `preferredMin` and `preferredMax`:

- If the data extends beyond the preferred bounds, the axis domain expands to accommodate the data.
- The `nice` algorithm can extend the domain to nice round numbers.
- If the data is within the preferred bounds, the axis domain is bounded by the preferred values.

## Reversed Domain

To invert the display of data items in a chart, you can reverse the domain of an axis by setting the `axis.reverse` property to `true`.

```js
{
    axes: {
        y: {
            type: 'number',
            reverse: true,
        },
    },
}
```

The visual impact of using a reversed axis varies depending on the specific series type.

The example below shows the contrasting data representation in a Bar series when the `axis.reverse` property is applied.

Use the button to toggle the value of `axis.reverse`.

#### Cartesian Bar Series Reversed

```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",
        reverse: false,
        title: {
          text: "Market Share (%)",
        },
      },
    },
  });

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

    const numberAxisOptions = nextOptions.axes!.y!;
    numberAxisOptions.reverse = !numberAxisOptions.reverse;

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={toggleAxisReverse}>Toggle Axis Reverse</button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

[Live example: Cartesian Bar Series Reversed](https://www.ag-grid.com/charts/archive/14.2.0/reactFunctionalTs/axes-domain/examples/cartesian-axis-reversed/)