---
product: "AG Charts"
title: "Axis Grid Lines & Band Shading"
description: "Grid lines are horizontal and vertical lines that divide a chart into sections, providing a visual reference for interpreting data."
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 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: "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 Grid Lines & Band Shading

Grid lines are horizontal and vertical lines that divide a chart into sections, providing a visual reference for interpreting data.

## Enabling Grid Lines

Grid lines are shown by default on `number`, `log` and `time` axes types, and are disabled by default on `category` axes.

To change this, use the `gridLine.enabled` property on each axis.

## Customising Grid Lines

Grid lines can be styled via the `gridLine.style` property on each axis.

#### Axis Grid Lines

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  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>({
    title: {
      text: "Most Common Girls' First Names In English",
    },
    subtitle: {
      text: "over the past 100 years",
    },
    data: [
      { name: "Mary", count: 234000 },
      { name: "Patricia", count: 211000 },
      { name: "Jennifer", count: 178000 },
      { name: "Elizabeth", count: 153000 },
      { name: "Linda", count: 123000 },
    ],
    series: [
      {
        type: "line",
        xKey: "name",
        yKey: "count",
      },
    ],
    axes: {
      x: {
        type: "category",
        gridLine: {
          enabled: true,
        },
      },
      y: {
        type: "number",
        gridLine: {
          enabled: true,
        },
      },
    },
  });

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

    switch ((event.target as HTMLInputElement).value) {
      case "1": {
        const gridStyle = [
          {
            stroke: "gray",
            lineDash: [10, 5],
          },
          {
            stroke: "lightgray",
            lineDash: [5, 5],
          },
        ];
        nextOptions.axes!.x!.gridLine!.style = gridStyle;
        nextOptions.axes!.y!.gridLine!.style = gridStyle;
        break;
      }
      case "2": {
        const xGridStyle = [
          {
            stroke: "red",
            lineDash: [3, 3],
          },
        ];
        const yGridStyle = [
          {
            stroke: "green",
            lineDash: [8, 3, 3, 3],
          },
        ];
        nextOptions.axes!.x!.gridLine!.style = xGridStyle;
        nextOptions.axes!.y!.gridLine!.style = yGridStyle;
        break;
      }
      default: {
        delete nextOptions.axes!.x!.gridLine!.style;
        delete nextOptions.axes!.y!.gridLine!.style;
        break;
      }
    }

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <div className="button-group" role="group" aria-label="Grid Style">
            <input
              type="radio"
              id="style-1"
              name="grid-style"
              defaultValue="1"
              onChange={(event) => styleChange(event)}
            />
            <label htmlFor="style-1">Grid Style #1</label>
            <input
              type="radio"
              id="style-2"
              name="grid-style"
              defaultValue="2"
              onChange={(event) => styleChange(event)}
            />
            <label htmlFor="style-2">Grid Style #2</label>
            <input
              type="radio"
              id="style-default"
              name="grid-style"
              defaultValue="default"
              defaultChecked
              onChange={(event) => styleChange(event)}
            />
            <label htmlFor="style-default">Default Grid Style</label>
          </div>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

[Live example: Axis Grid Lines](https://www.ag-grid.com/charts/archive/14.2.0/reactFunctionalTs/axes-grid-lines/examples/axis-grid-lines/)

```js
{
    gridLine: {
        style: [
            {
                stroke: 'gray',
                lineDash: [10, 5],
            },
            {
                stroke: 'lightgray',
                lineDash: [5, 5],
            },
        ],
    },
}
```

The `gridLine.style` property takes an array of objects containing styling properties:

- `stroke` - The colour of the line.
- `strokeWidth` - The width of the line. This overrides the top level `gridLine.width` option.
- `lineDash` - How the line stroke is rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. If the array is empty, the grid lines will be solid without any dashes.
- `fill` - The colour of the fill between grid lines.
- `fillOpacity` - The opacity of the fill between grid lines.

Each object in the `gridLine.style` array is applied to the each grid line sequentially, looping around if necessary. This allows alternating styles across multiple grid lines, or styling each individual grid line separately.

## Alternating Band Shading

Alternating band shading can be achieved using the `fill` and `fillOpacity` properties of the objects in the `gridLine.style` array.

#### Axis Grid Fills

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

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

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    title: {
      text: "Most Common Girls' First Names In English",
    },
    subtitle: {
      text: "over the past 100 years",
    },
    data: [
      { name: "Mary", count: 234000 },
      { name: "Patricia", count: 211000 },
      { name: "Jennifer", count: 178000 },
      { name: "Elizabeth", count: 153000 },
      { name: "Linda", count: 123000 },
    ],
    series: [
      {
        type: "line",
        xKey: "name",
        yKey: "count",
      },
    ],
    axes: {
      x: {
        type: "category",
        gridLine: {
          style: [
            {
              fill: "#999",
              fillOpacity: 0.1,
              strokeWidth: 0,
            },
            {},
          ],
        },
      },
    },
  });

  return <AgCharts options={options} />;
};

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

[Live example: Axis Grid Fills](https://www.ag-grid.com/charts/archive/14.2.0/reactFunctionalTs/axes-grid-lines/examples/axis-grid-fills/)

```js
{
    gridLine: {
        style: [
            {
                fill: '#999',
                fillOpacity: 0.1,
                strokeWidth: 0, //don't show lines around the bands
            },
            {}, //empty object for an unshaded band
        ],
    },
}
```

> **Note**
>
> The interval and position of grid lines is controlled by the [Axis Interval](https://www.ag-grid.com/charts/archive/14.2.0/react/axes-intervals/) options.

## API Reference

#### GridLine Options

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| enabled | boolean |  | Set to `false` to hide the axis grid lines. |
| width | PixelSize |  | The width in pixels of the axis grid lines. |
| style | AgAxisGridStyle[] |  | Configuration of the lines used to form the grid in the chart series area. |
| style.fill | CssColor |  | The colour of the fill between grid lines. |
| style.fillOpacity | Ratio |  | The opacity of the fill between grid lines. |
| style.stroke | CssColor |  | The colour of the grid line. |
| style.strokeWidth | PixelSize |  | The width of the grid line in pixels. |
| style.lineDash | PixelSize[] |  | Defines how the grid lines are rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, `[6, 3]` means dashes with a length of `6` pixels with gaps between of `3` pixels. |