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

```ts
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  UnitTimeAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

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

const ChartExample = defineComponent({
  template: `
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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 {
      options,
    };
  },
});

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

[Live example: Simple Background Region](https://www.ag-grid.com/charts/vue3/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/vue/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

```ts
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  UnitTimeAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

const bounds = {
  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) {
  return date.toLocaleDateString("en-US", { month: "short", year: "numeric" });
}

function formatBoundsSubtitle(mode) {
  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 = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <div class="button-group" role="group" aria-label="Bounds">
          <input type="radio" id="closed" name="bounds" value="closed" v-on:change="setBounds($event)">
            <label for="closed">Both Bounds</label>
            <input type="radio" id="open" name="bounds" value="open" checked="" v-on:change="setBounds($event)">
              <label for="open">Open Ended</label>
              <input type="radio" id="full" name="bounds" value="full" v-on:change="setBounds($event)">
                <label for="full">Full Width</label>
              </div>
            </div>
          </div>
          <ag-charts
            :options="options"
          />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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) => {
      const optionsCopy = clone(options.value);

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

      options.value = optionsCopy;
    };

    return {
      options,
      setBounds,
    };
  },
});

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

[Live example: Range Bounds](https://www.ag-grid.com/charts/vue3/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

```ts
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  UnitTimeAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

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

const ChartExample = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <label for="positionSelect">Position:</label>
        <select id="positionSelect" v-on:change="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 class="gap-right">
          <label for="xOffsetLabel"><code>xOffset:</code></label>
          <input type="range" id="xOffsetLabel" min="-100" max="100" value="0" v-on:input="updateLabelXOffset($event)" v-on:change="updateLabelXOffset($event)">
            <span id="xOffsetValue">0</span>
          </div>
          <div>
            <label for="yOffsetLabel"><code>yOffset:</code></label>
            <input type="range" id="yOffsetLabel" min="-100" max="100" value="0" v-on:input="updateLabelYOffset($event)" v-on:change="updateLabelYOffset($event)">
              <span id="yOffsetValue">0</span>
            </div>
          </div>
        </div>
        <ag-charts
          :options="options"
        />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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) => {
      const optionsCopy = clone(options.value);

      optionsCopy.seriesArea.backgroundRegions[0].label.position = position;

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

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

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

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

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

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

      options.value = optionsCopy;
    };

    return {
      options,
      setLabelPosition,
      updateLabelXOffset,
      updateLabelYOffset,
    };
  },
});

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

[Live example: Labels](https://www.ag-grid.com/charts/vue3/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/vue/axes-secondary/) in one direction, use `axis` to specify the axis that the range is plotted against.

#### Multiple Axes

```ts
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  BarSeriesModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  UnitTimeAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

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

const ChartExample = defineComponent({
  template: `
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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 {
      options,
    };
  },
});

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

[Live example: Multiple Axes](https://www.ag-grid.com/charts/vue3/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/vue/background-regions/#labels) are styled with [font](https://www.ag-grid.com/charts/vue/text/) and [fills & border](https://www.ag-grid.com/charts/vue/fills-borders/) options.

#### Customisation

```ts
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  ScatterSeriesModule,
} from "ag-charts-enterprise";
import { dealSeries } from "./data";

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

const ChartExample = defineComponent({
  template: `
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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 {
      options,
    };
  },
});

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

[Live example: Customisation](https://www.ag-grid.com/charts/vue3/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/vue/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. |