---
title: "Axis Position"
framework: javascript
version: "14.1.0"
---

# Axis Position

Cartesian axes can be positioned on the `top`, `bottom`, `left`, or `right` edge of the chart.

## Axis Placement

The axis `position` property controls where the axis is rendered. By default, horizontal axes appear at the bottom of the chart and vertical axes appear on the left.

#### Axis Positions

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

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

const options: AgCartesianChartOptions = {
  title: {
    text: "Company Financials (2023)",
  },
  data: [
    { quarter: "Q1", revenue: 8.5, profitMargin: 22 },
    { quarter: "Q2", revenue: 11.2, profitMargin: 27 },
    { quarter: "Q3", revenue: 9.8, profitMargin: 25 },
    { quarter: "Q4", revenue: 13.4, profitMargin: 31 },
  ],
  axes: {
    x: {
      title: { text: "Quarter" },
    },
    y: {
      position: "left",
      title: { text: "Revenue ($M)" },
      line: {
        stroke: "red",
        width: 3,
      },
    },
    ySecondary: {
      type: "number",
      position: "right",
      title: { text: "Profit Margin (%)" },
      label: {
        formatter: ({ value }) => `${value}%`,
      },
      line: {
        stroke: "red",
        width: 3,
      },
    },
  },
  series: [
    {
      type: "bar",
      xKey: "quarter",
      yKey: "revenue",
    },
    {
      type: "line",
      xKey: "quarter",
      yKey: "profitMargin",
      yKeyAxis: "ySecondary",
    },
  ],
};

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

const chart = AgCharts.create(options);
```

[Live example: Axis Positions](https://www.ag-grid.com/charts/typescript/axes-position/examples/axis-position-basic)

```js
{
    axes: {
        x: {
            type: 'category',
            position: 'bottom',
            title: { text: 'Quarter' },
        },
        y: {
            type: 'number',
            position: 'left',
            title: { text: 'Revenue ($M)' },
        },
        ySecondary: {
            type: 'number',
            position: 'right',
            title: { text: 'Profit Margin (%)' },
        },
    },
}
```

[Secondary Axes](https://www.ag-grid.com/charts/javascript/axes-secondary/) default to the opposite edge from the primary axis, but it is possible to have multiple axes on the same edge. These are displayed alongside each other.

## Axis Crossing Point

The `crossAt` option allows an axis to intersect a perpendicular axis at a specific axis value instead of the chart edge. This is useful for centring the chart origin or aligning axes to highlight particular thresholds.

#### CrossAt

```ts
import {
  AgCartesianChartOptions,
  AgCharts,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

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

const options: AgCartesianChartOptions = {
  theme: {
    overrides: {
      common: {
        axes: {
          number: {
            line: {
              enabled: true,
              stroke: "red",
            },
            tick: {
              enabled: true,
              size: 12,
              stroke: "red",
            },
            label: {
              color: "red",
            },
          },
        },
      },
    },
  },
  title: { text: "Axes crossing at 0", fontWeight: "bold" },
  data: getData(),
  axes: {
    x: {
      type: "number",
      crossAt: {
        value: 0,
      },
    },
    y: {
      type: "number",
      crossAt: {
        value: 0,
      },
    },
  },
  series: [
    {
      type: "line",
      xKey: "x",
      yKey: "y",
      yName: "Function plot",
      strokeWidth: 3,
      marker: { size: 0 },
    },
  ],
};

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

const chart = AgCharts.create(options);
```

[Live example: CrossAt](https://www.ag-grid.com/charts/typescript/axes-position/examples/axis-cross-at)

```js
{
    axes: {
        x: {
            type: 'number',
            // place the bottom axis at '0' on the left axis scale
            crossAt: { value: 0 },
        },
        y: {
            type: 'number',
            // place the left axis at '0' on the bottom axis scale
            crossAt: { value: 0 },
        },
    },
}
```

In this example:

- Both axes have a `crossAt.value` set. It is also possible to set it on a single axis only.
- The `crossAt.value` must be of the same type as the perpendicular axis domain, such as `Number` or `Date`.
- The `crossAt` target value should be within the domain of the perpendicular axis.

When the target value leaves the visible range, such as by [Zooming](https://www.ag-grid.com/charts/javascript/zoom/), the axis will stick to the edge of the chart and remain in view.

Set `sticky: false` to allow the axis to be moved out of view in this scenario.

## Band Alignment

The `bandAlignment` option controls the band layout when using [fixed width bars](https://www.ag-grid.com/charts/javascript/bars/#fixed-width).

#### Band Alignment

```ts
import {
  AgBandAlignment,
  AgCartesianChartOptions,
  AgCategoryAxisOptions,
  AgCharts,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-enterprise";
import { DataType, getData } from "./data";

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

const options: AgCartesianChartOptions<DataType> = {
  data: getData(),
  title: {
    text: "Total Visitors to Museums and Galleries",
  },
  footnote: {
    text: "Source: Department for Digital, Culture, Media & Sport",
  },
  series: [
    {
      type: "bar",
      xKey: "quarter",
      yKey: "museums",
      yName: "Museums",
      width: 10,
    },
    {
      type: "bar",
      xKey: "quarter",
      yKey: "galleries",
      yName: "Galleries",
      width: 10,
    },
    {
      type: "bar",
      xKey: "quarter",
      yKey: "heritage",
      yName: "Heritage Sites",
      width: 10,
    },
  ],
  axes: {
    x: {
      type: "category",
      bandAlignment: "start",
    },
    y: {
      type: "number",
      title: {
        text: "Total Visitors (Millions)",
      },
    },
  },
  formatter: {
    y(params) {
      const value = params.value as number;
      const millions = value / 1000000;
      const accuracy = ["series-label", "axis-label"].includes(params.source)
        ? 0
        : 1;
      return `${millions.toFixed(accuracy)}M`;
    },
  },
};

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

const chart = AgCharts.create(options);

function changeBandAlignment(alignment: AgBandAlignment) {
  (options.axes!.x! as AgCategoryAxisOptions).bandAlignment = alignment;

  chart.update(options);
}

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

[Live example: Band Alignment](https://www.ag-grid.com/charts/typescript/axes-position/examples/band-alignment)

```js
{
    axes: {
        x: {
            type: 'category',
            bandAlignment: 'start',
        },
    },
}
```

See the [Series Bars](https://www.ag-grid.com/charts/javascript/bars/#band-alignment) documentation for more details.