---
product: "AG Charts"
title: "Background Regions"
description: "Shade a rectangular area of the React Chart series area, bounded by value ranges on the x and y axes. Add labels and customise fills and strokes."
enterprise: true
framework: react
version: "14.2.0"
related:
    - title: "Cross Lines"
      url: "https://www.ag-grid.com/charts/react/axes-cross-lines/"
    - title: "Legend"
      url: "https://www.ag-grid.com/charts/react/legend/"
    - title: "Formatters"
      url: "https://www.ag-grid.com/charts/react/formatters/"
    - title: "Stylers"
      url: "https://www.ag-grid.com/charts/react/stylers/"
    - title: "Series Bars"
      url: "https://www.ag-grid.com/charts/react/bars/"
    - title: "Series Fills"
      url: "https://www.ag-grid.com/charts/react/fills/"
    - title: "Series Labels"
      url: "https://www.ag-grid.com/charts/react/series-labels/"
    - title: "Series Markers"
      url: "https://www.ag-grid.com/charts/react/markers/"
    - title: "Style Segments"
      url: "https://www.ag-grid.com/charts/react/style-segments/"
    - title: "Annotations"
      url: "https://www.ag-grid.com/charts/react/annotations/"
    - title: "Colour Scale"
      url: "https://www.ag-grid.com/charts/react/colour-scale/"
    - title: "Error Bars"
      url: "https://www.ag-grid.com/charts/react/error-bars/"
llms: "https://www.ag-grid.com/charts/llms.txt"
---

# Background Regions

Background Regions are shaded rectangular areas in a cartesian chart, bounded by value ranges on both the x and y axes. These can denote additional information or thresholds, making them useful for data analysis.

## Adding Background Regions

Background Regions are defined in the `seriesArea.backgroundRegions` array.

#### Simple Background Region

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  UnitTimeAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

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

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    data: getData(),
    title: {
      text: "Reservoir Capacity",
    },
    seriesArea: {
      backgroundRegions: [
        {
          xRange: { start: new Date(2025, 5, 1), end: new Date(2025, 8, 1) },
          yRange: { start: 0, end: 50 },
          label: {
            text: "Drought Risk",
          },
        },
      ],
    },
    series: [
      {
        type: "line",
        xKey: "date",
        yKey: "capacity",
        yName: "Capacity",
      },
    ],
    axes: {
      x: {
        type: "unit-time",
      },
      y: {
        type: "number",
        title: {
          text: "Capacity (%)",
        },
      },
    },
  });

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

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

[Live example: Simple Background Region](https://www.ag-grid.com/charts/reactFunctionalTs/background-regions/examples/simple-background-regions/)

```js
{
    seriesArea: {
        backgroundRegions: [
            {
                xRange: { start: new Date(2025, 5, 1), end: new Date(2025, 8, 1) },
                yRange: { start: 0, end: 50 },
                label: {
                    text: 'Drought Risk',
                },
            },
        ],
    },
}
```

In this configuration:

- `xRange` and `yRange` bound the region with `start` and `end` values, given in the units of the appropriate axis.
- `label.text` adds a [label](https://www.ag-grid.com/charts/react/background-regions/#labels) to the region.

Regions are drawn behind the series and above the chart background.

## Range Bounds

The range boundaries are defined by optional `xRange` and `yRange` properties, each containing optional `start` and `end` properties. These must be in the units of the appropriate axis.

Omitting a `start` or an `end` extends that side of the region along the entire axis domain in that direction. Omitting a range entirely spans the entire axis.

#### Range Bounds

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  AgSeriesAreaBackgroundRegion,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  UnitTimeAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

const bounds: Record<string, AgSeriesAreaBackgroundRegion> = {
  closed: {
    xRange: { start: new Date(2025, 5, 1), end: new Date(2025, 8, 1) },
    yRange: { start: 20, end: 50 },
  },
  open: {
    xRange: { start: new Date(2025, 5, 1) },
    yRange: { end: 50 },
  },
  full: {
    yRange: { start: 20, end: 50 },
  },
};
function formatDate(date: Date) {
  return date.toLocaleDateString("en-US", { month: "short", year: "numeric" });
}
function formatBoundsSubtitle(mode: string) {
  const { xRange, yRange } = bounds[mode];
  const x = `${xRange?.start ? formatDate(xRange.start) : "start"} – ${xRange?.end ? formatDate(xRange.end) : "end"}`;
  const y = `${yRange?.start ?? "start"} – ${yRange?.end ?? "end"}`;
  return `X: ${x}   Y: ${y}`;
}
ModuleRegistry.registerModules([
  LineSeriesModule,
  NumberAxisModule,
  UnitTimeAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    data: getData(),
    title: {
      text: "Reservoir Capacity",
    },
    subtitle: {
      text: formatBoundsSubtitle("open"),
    },
    seriesArea: {
      backgroundRegions: [
        {
          ...bounds.open,
          label: {
            text: "Drought Risk",
          },
        },
      ],
    },
    series: [
      {
        type: "line",
        xKey: "date",
        yKey: "capacity",
        yName: "Capacity",
      },
    ],
    axes: {
      x: {
        type: "unit-time",
      },
      y: {
        type: "number",
        title: {
          text: "Capacity (%)",
        },
        min: 0,
      },
    },
  });

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

    const mode = (event.target as HTMLInputElement).value;
    const region = nextOptions.seriesArea!.backgroundRegions![0];
    region.xRange = bounds[mode].xRange;
    region.yRange = bounds[mode].yRange;
    nextOptions.subtitle!.text = formatBoundsSubtitle(mode);

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <div className="button-group" role="group" aria-label="Bounds">
            <input
              type="radio"
              id="closed"
              name="bounds"
              defaultValue="closed"
              onChange={(event) => setBounds(event)}
            />
            <label htmlFor="closed">Both Bounds</label>
            <input
              type="radio"
              id="open"
              name="bounds"
              defaultValue="open"
              defaultChecked
              onChange={(event) => setBounds(event)}
            />
            <label htmlFor="open">Open Ended</label>
            <input
              type="radio"
              id="full"
              name="bounds"
              defaultValue="full"
              onChange={(event) => setBounds(event)}
            />
            <label htmlFor="full">Full Width</label>
          </div>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

[Live example: Range Bounds](https://www.ag-grid.com/charts/reactFunctionalTs/background-regions/examples/range-bounds/)

```js
{
    seriesArea: {
        backgroundRegions: [
            {
                xRange: { start: new Date(2025, 5, 1) },
                yRange: { end: 50 },
                label: {
                    text: 'Drought Risk',
                },
            },
        ],
    },
}
```

In this configuration:

- "Open Ended" has only one bound defined for each range.
  - `xRange` has no `end`, so the region extends to the right edge of the series area.
  - `yRange` has no `start`, so it extends to the bottom edge.
- "Both Bounds" has both `start` and `end` defined for `xRange` and `yRange`, so the region is bounded on all sides.
- "Full Width" has no `xRange`, so it spans the full width of the series area, while `yRange` is bounded on both sides.
- Values outside the axis domain are clamped to the edge of the series area.

## Labels

Use `label.position` to place a label relative to its region.

#### Labels

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  AgSeriesAreaBackgroundRegionLabelPosition,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  UnitTimeAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

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

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    data: getData(),
    title: {
      text: "Reservoir Capacity",
    },
    seriesArea: {
      backgroundRegions: [
        {
          xRange: { start: new Date(2025, 5, 1), end: new Date(2025, 8, 1) },
          yRange: { start: 20, end: 50 },
          label: {
            text: "Drought Risk",
            position: "top",
          },
        },
      ],
    },
    series: [
      {
        type: "line",
        xKey: "date",
        yKey: "capacity",
        yName: "Capacity",
      },
    ],
    axes: {
      x: {
        type: "unit-time",
      },
      y: {
        type: "number",
        title: {
          text: "Capacity (%)",
        },
      },
    },
  });

  const setLabelPosition = (
    position: AgSeriesAreaBackgroundRegionLabelPosition,
  ) => {
    const nextOptions = clone(options);

    nextOptions.seriesArea!.backgroundRegions![0].label!.position = position;

    setOptions(nextOptions);
  };

  const updateLabelXOffset = (event: any) => {
    const nextOptions = clone(options);

    var value = +event.target.value;
    nextOptions.seriesArea!.backgroundRegions![0].label!.xOffset = value;

    document.getElementById("xOffsetValue")!.innerHTML = String(value);

    setOptions(nextOptions);
  };

  const updateLabelYOffset = (event: any) => {
    const nextOptions = clone(options);

    var value = +event.target.value;
    nextOptions.seriesArea!.backgroundRegions![0].label!.yOffset = value;

    document.getElementById("yOffsetValue")!.innerHTML = String(value);

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <label htmlFor="positionSelect">Position:</label>
          <select
            id="positionSelect"
            onChange={(event) => setLabelPosition(event.target.value)}
          >
            <option value="top">top</option>
            <option value="bottom">bottom</option>
            <option value="left">left</option>
            <option value="right">right</option>
            <option value="left-top">left-top</option>
            <option value="right-top">right-top</option>
            <option value="left-bottom">left-bottom</option>
            <option value="right-bottom">right-bottom</option>
            <option value="inside">inside</option>
            <option value="inside-top">inside-top</option>
            <option value="inside-bottom">inside-bottom</option>
            <option value="inside-left">inside-left</option>
            <option value="inside-right">inside-right</option>
            <option value="inside-top-left">inside-top-left</option>
            <option value="inside-top-right">inside-top-right</option>
            <option value="inside-bottom-left">inside-bottom-left</option>
            <option value="inside-bottom-right">inside-bottom-right</option>
            <option value="top-left">top-left</option>
            <option value="top-right">top-right</option>
            <option value="bottom-left">bottom-left</option>
            <option value="bottom-right">bottom-right</option>
          </select>
          <div className="gap-right">
            <label htmlFor="xOffsetLabel">
              <code>xOffset:</code>
            </label>
            <input
              type="range"
              id="xOffsetLabel"
              min="-100"
              max="100"
              defaultValue="0"
              onInput={(event) => updateLabelXOffset(event)}
              onChange={(event) => updateLabelXOffset(event)}
            />
            <span id="xOffsetValue">0</span>
          </div>
          <div>
            <label htmlFor="yOffsetLabel">
              <code>yOffset:</code>
            </label>
            <input
              type="range"
              id="yOffsetLabel"
              min="-100"
              max="100"
              defaultValue="0"
              onInput={(event) => updateLabelYOffset(event)}
              onChange={(event) => updateLabelYOffset(event)}
            />
            <span id="yOffsetValue">0</span>
          </div>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

[Live example: Labels](https://www.ag-grid.com/charts/reactFunctionalTs/background-regions/examples/region-labels/)

```js
{
    seriesArea: {
        backgroundRegions: [
            {
                xRange: { start: new Date(2025, 5, 1), end: new Date(2025, 8, 1) },
                yRange: { start: 20, end: 50 },
                label: {
                    text: 'Drought Risk',
                    position: 'top',
                },
            },
        ],
    },
}
```

In this example:

- Use the dropdown to change `position`.
- Position names give the edge first, then the alignment along it. `top-left` sits above the region, aligned left, and `left-top` sits to its left, aligned top.
- An `inside` prefix places the label within the region.
- `xOffset` and `yOffset` move the label from its position by the specified number of pixels.

## Multiple Axes

On a chart with [multiple axes](https://www.ag-grid.com/charts/react/axes-secondary/) in one direction, use `axis` to specify the axis that the range is plotted against.

#### Multiple Axes

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  BarSeriesModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  UnitTimeAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

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

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    data: getData(),
    title: {
      text: "Reservoir Capacity and Rainfall",
    },
    seriesArea: {
      backgroundRegions: [
        {
          xRange: { start: new Date(2025, 0, 1), end: new Date(2025, 4, 1) },
          yRange: { axis: "rainfall", start: 100 },
          label: {
            text: "Heavy Rainfall",
            position: "inside-top-left",
          },
        },
      ],
    },
    series: [
      {
        type: "bar",
        xKey: "date",
        yKey: "rainfall",
        yName: "Rainfall",
        yKeyAxis: "rainfall",
      },
      {
        type: "line",
        xKey: "date",
        yKey: "capacity",
        yName: "Capacity",
        yKeyAxis: "capacity",
      },
    ],
    axes: {
      x: {
        type: "unit-time",
      },
      capacity: {
        type: "number",
        position: "left",
        title: {
          text: "Capacity (%)",
        },
      },
      rainfall: {
        type: "number",
        position: "right",
        title: {
          text: "Rainfall (mm)",
        },
      },
    },
  });

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

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

[Live example: Multiple Axes](https://www.ag-grid.com/charts/reactFunctionalTs/background-regions/examples/multiple-axes/)

```js
{
    seriesArea: {
        backgroundRegions: [
            {
                xRange: { start: new Date(2025, 0, 1), end: new Date(2025, 4, 1) },
                yRange: { axis: 'rainfall', start: 100 },
                label: {
                    text: 'Heavy Rainfall',
                    position: 'inside-top-left',
                },
            },
        ],
    },
    axes: {
        x: { type: 'unit-time' },
        capacity: { type: 'number', position: 'left' },
        rainfall: { type: 'number', position: 'right' },
    },
}
```

In this example:

- `yRange.axis` is set to `'rainfall'`, so the range is resolved against that axis rather than the `capacity` axis.
- `yRange` has no `end`, so the region extends to the top edge of the series area.
- When `axis` is omitted in this scenario, the range uses the first axis declared in that direction.

## Customisation

Regions are styled with `fill`, `fillOpacity`, `stroke`, `strokeWidth` and `strokeOpacity`.

[Labels](https://www.ag-grid.com/charts/react/background-regions/#labels) are styled with [font](https://www.ag-grid.com/charts/react/text/) and [fills & border](https://www.ag-grid.com/charts/react/fills-borders/) options.

#### Customisation

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  ScatterSeriesModule,
} from "ag-charts-enterprise";
import { dealSeries } from "./data";

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

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    title: {
      text: "Deal Size by Segment",
    },
    seriesArea: {
      backgroundRegions: [
        {
          fill: "#5090dc",
          fillOpacity: 0.2,
          stroke: { ref: "foregroundColor", mix: 0.35, ontoColor: "#5090dc" },
          strokeWidth: 2,
          xRange: { start: 14, end: 31 },
          yRange: { start: 27500, end: 63000 },
          label: {
            text: "Retail",
            position: "top-left",
            yOffset: -4,
            color: { ref: "foregroundColor", mix: 0.35, ontoColor: "#5090dc" },
            fontSize: 13,
            fontWeight: "bold",
            fill: { ref: "backgroundColor" },
            fillOpacity: 0.85,
            cornerRadius: 4,
            padding: { top: 4, right: 8, bottom: 4, left: 8 },
            border: {
              enabled: true,
              stroke: {
                ref: "foregroundColor",
                mix: 0.35,
                ontoColor: "#5090dc",
              },
            },
          },
        },
        {
          fill: "#ffa03a",
          fillOpacity: 0.2,
          stroke: { ref: "foregroundColor", mix: 0.35, ontoColor: "#ffa03a" },
          strokeWidth: 2,
          xRange: { start: 43, end: 67 },
          yRange: { start: 76500, end: 129500 },
          label: {
            text: "Mid-Market",
            position: "top-left",
            yOffset: -4,
            color: { ref: "foregroundColor", mix: 0.35, ontoColor: "#ffa03a" },
            fontSize: 13,
            fontWeight: "bold",
            fill: { ref: "backgroundColor" },
            fillOpacity: 0.85,
            cornerRadius: 4,
            padding: { top: 4, right: 8, bottom: 4, left: 8 },
            border: {
              enabled: true,
              stroke: {
                ref: "foregroundColor",
                mix: 0.35,
                ontoColor: "#ffa03a",
              },
            },
          },
        },
        {
          fill: "#459d55",
          fillOpacity: 0.2,
          stroke: { ref: "foregroundColor", mix: 0.35, ontoColor: "#459d55" },
          strokeWidth: 2,
          xRange: { start: 95, end: 135 },
          yRange: { start: 170500, end: 233000 },
          label: {
            text: "Enterprise",
            position: "top-left",
            yOffset: -4,
            color: { ref: "foregroundColor", mix: 0.35, ontoColor: "#459d55" },
            fontSize: 13,
            fontWeight: "bold",
            fill: { ref: "backgroundColor" },
            fillOpacity: 0.85,
            cornerRadius: 4,
            padding: { top: 4, right: 8, bottom: 4, left: 8 },
            border: {
              enabled: true,
              stroke: {
                ref: "foregroundColor",
                mix: 0.35,
                ontoColor: "#459d55",
              },
            },
          },
        },
      ],
    },
    series: [
      {
        type: "scatter",
        title: "Retail",
        data: dealSeries.Retail,
        xKey: "cycleDays",
        xName: "Sales Cycle",
        yKey: "dealValue",
        yName: "Deal Value",
      },
      {
        type: "scatter",
        title: "Mid-Market",
        data: dealSeries.MidMarket,
        xKey: "cycleDays",
        xName: "Sales Cycle",
        yKey: "dealValue",
        yName: "Deal Value",
      },
      {
        type: "scatter",
        title: "Enterprise",
        data: dealSeries.Enterprise,
        xKey: "cycleDays",
        xName: "Sales Cycle",
        yKey: "dealValue",
        yName: "Deal Value",
      },
    ],
    axes: {
      x: {
        type: "number",
        position: "bottom",
        nice: false,
        title: {
          text: "Sales Cycle (days)",
        },
        label: {
          formatter: (params) => {
            return params.value + " days";
          },
        },
      },
      y: {
        type: "number",
        position: "left",
        nice: false,
        title: {
          text: "Deal Value",
        },
        label: {
          formatter: (params) => {
            return "$" + params.value / 1000 + "k";
          },
        },
      },
    },
  });

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

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

[Live example: Customisation](https://www.ag-grid.com/charts/reactFunctionalTs/background-regions/examples/customisation/)

```js
{
    seriesArea: {
        backgroundRegions: [
            {
                fill: '#5090dc',
                fillOpacity: 0.2,
                stroke: { ref: 'foregroundColor', mix: 0.35, ontoColor: '#5090dc' },
                strokeWidth: 2,
                xRange: { start: 14, end: 31 },
                yRange: { start: 27500, end: 63000 },
                label: {
                    text: 'Retail',
                    position: 'top-left',
                    yOffset: -4,
                    color: { ref: 'foregroundColor', mix: 0.35, ontoColor: '#5090dc' },
                    fontSize: 13,
                    fontWeight: 'bold',
                    fill: { ref: 'backgroundColor' },
                    fillOpacity: 0.85,
                    cornerRadius: 4,
                    padding: { top: 4, right: 8, bottom: 4, left: 8 },
                    border: {
                        enabled: true,
                        stroke: { ref: 'foregroundColor', mix: 0.35, ontoColor: '#5090dc' },
                    },
                },
            },
            //... other regions
        ],
    },
}
```

In this example:

- Each market segment has a region covering the middle 80% of its deals on each axis, with a `fill` matching the series colour.
- Each label is colour-matched to its region, with `fill`, `cornerRadius`, `padding` and `border` styling the box around the text and `color` styling the text itself. Colours are set with [theme parameters](https://www.ag-grid.com/charts/react/colours/#theme-parameter-references) so they adapt to light and dark themes.
- `yOffset` lifts each label 4px clear of its region.

## API Reference

#### Background Region

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| xRange | AgSeriesAreaBackgroundRegionRange |  | The bounds of the region on an x-axis. Omit to span the full width of the series area. |
| xRange.axis | string |  | The key of the axis in the `axes` dictionary that this range applies to. |
| xRange.start | AxisValue |  | The axis value where the region starts. Omit to extend the region to the edge of the series area. |
| xRange.end | AxisValue |  | The axis value where the region ends. Omit to extend the region to the edge of the series area. |
| yRange | AgSeriesAreaBackgroundRegionRange |  | The bounds of the region on a y-axis. Omit to span the full height of the series area. |
| yRange.axis | string |  | The key of the axis in the `axes` dictionary that this range applies to. |
| yRange.start | AxisValue |  | The axis value where the region starts. Omit to extend the region to the edge of the series area. |
| yRange.end | AxisValue |  | The axis value where the region ends. Omit to extend the region to the edge of the series area. |
| label | AgSeriesAreaBackgroundRegionLabel |  | Configuration for the label displayed with the region. |
| label.fontFamily | FontFamily \| GoogleFontFamily \| Array<FontFamily \| GoogleFontFamily> |  | The font family to use for the label. A single family name, or an array of names used as fallbacks. |
| label.position | AgSeriesAreaBackgroundRegionLabelPosition |  | The position of the Background Region label. |
| label.rotation | Degree |  | The rotation of the Background Region label in degrees. |
| label.text | string |  | The text to show in the label. |
| label.xOffset | PixelSize | 0 | The horizontal offset in pixels for the label. |
| label.yOffset | PixelSize | 0 | The vertical offset in pixels for the label. |
| label.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| label.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| label.fontStyle | FontStyle |  | The style to use for text elements. |
| label.fontWeight | FontWeight |  | The font weight to use for text elements. |
| label.border | BorderOptions |  | Stroke options for the box border. |
| label.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| label.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| label.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| label.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| label.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| label.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| label.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| label.fillOpacity | Opacity |  | The opacity of the fill colour. |
| fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| fillOpacity | Opacity |  | The opacity of the fill colour. |
| stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| strokeOpacity | Opacity |  | The opacity of the stroke colour. |

#### Range

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| axis | string |  | The key of the axis in the `axes` dictionary that this range applies to. |
| start | AxisValue |  | The axis value where the region starts. Omit to extend the region to the edge of the series area. |
| end | AxisValue |  | The axis value where the region ends. Omit to extend the region to the edge of the series area. |

#### Label

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| fontFamily | FontFamily \| GoogleFontFamily \| Array<FontFamily \| GoogleFontFamily> |  | The font family to use for the label. A single family name, or an array of names used as fallbacks. |
| position | AgSeriesAreaBackgroundRegionLabelPosition |  | The position of the Background Region label. |
| rotation | Degree |  | The rotation of the Background Region label in degrees. |
| text | string |  | The text to show in the label. |
| xOffset | PixelSize | 0 | The horizontal offset in pixels for the label. |
| yOffset | PixelSize | 0 | The vertical offset in pixels for the label. |
| enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| fontSize | FontSize |  | The size of the font in pixels for text elements. |
| fontStyle | FontStyle |  | The style to use for text elements. |
| fontWeight | FontWeight |  | The font weight to use for text elements. |
| border | BorderOptions |  | Stroke options for the box border. |
| border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| fillOpacity | Opacity |  | The opacity of the fill colour. |