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 Copy Link
Background Regions are defined in the seriesArea.backgroundRegions array.
import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
import {
AgCartesianChartOptions,
LineSeriesModule,
ModuleRegistry,
NumberAxisModule,
UnitTimeAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
LineSeriesModule,
NumberAxisModule,
UnitTimeAxisModule,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgCharts],
template: `<ag-charts
[options]="options"
></ag-charts>
`,
})
export class AppComponent {
public options;
constructor() {
this.options = {
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 (%)",
},
},
},
};
}
}
export function getData() {
return [
{ date: new Date(2025, 0, 1), capacity: 92 },
{ date: new Date(2025, 1, 1), capacity: 95 },
{ date: new Date(2025, 2, 1), capacity: 93 },
{ date: new Date(2025, 3, 1), capacity: 88 },
{ date: new Date(2025, 4, 1), capacity: 79 },
{ date: new Date(2025, 5, 1), capacity: 67 },
{ date: new Date(2025, 6, 1), capacity: 54 },
{ date: new Date(2025, 7, 1), capacity: 42 },
{ date: new Date(2025, 8, 1), capacity: 38 },
{ date: new Date(2025, 9, 1), capacity: 49 },
{ date: new Date(2025, 10, 1), capacity: 68 },
{ date: new Date(2025, 11, 1), capacity: 86 },
];
}
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent);
{
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:
xRangeandyRangebound the region withstartandendvalues, given in the units of the appropriate axis.label.textadds a label to the region.
Regions are drawn behind the series and above the chart background.
Range Bounds Copy Link
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.
import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
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,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgCharts],
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" (change)="setBounds($event)">
<label for="closed">Both Bounds</label>
<input type="radio" id="open" name="bounds" value="open" checked="" (change)="setBounds($event)">
<label for="open">Open Ended</label>
<input type="radio" id="full" name="bounds" value="full" (change)="setBounds($event)">
<label for="full">Full Width</label>
</div>
</div>
</div>
<ag-charts
[options]="options"
></ag-charts>
`,
})
export class AppComponent {
public options;
constructor() {
this.options = {
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,
},
},
};
}
setBounds = (event: Event) => {
const options = clone(this.options);
const mode = (event.target as HTMLInputElement).value;
const region = options.seriesArea!.backgroundRegions![0];
region.xRange = bounds[mode].xRange;
region.yRange = bounds[mode].yRange;
options.subtitle!.text = formatBoundsSubtitle(mode);
this.options = options;
};
}
export function getData() {
return [
{ date: new Date(2025, 0, 1), capacity: 92 },
{ date: new Date(2025, 1, 1), capacity: 95 },
{ date: new Date(2025, 2, 1), capacity: 93 },
{ date: new Date(2025, 3, 1), capacity: 88 },
{ date: new Date(2025, 4, 1), capacity: 79 },
{ date: new Date(2025, 5, 1), capacity: 67 },
{ date: new Date(2025, 6, 1), capacity: 54 },
{ date: new Date(2025, 7, 1), capacity: 42 },
{ date: new Date(2025, 8, 1), capacity: 38 },
{ date: new Date(2025, 9, 1), capacity: 49 },
{ date: new Date(2025, 10, 1), capacity: 68 },
{ date: new Date(2025, 11, 1), capacity: 86 },
];
}
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent);
{
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.
xRangehas noend, so the region extends to the right edge of the series area.yRangehas nostart, so it extends to the bottom edge.
- "Both Bounds" has both
startandenddefined forxRangeandyRange, so the region is bounded on all sides. - "Full Width" has no
xRange, so it spans the full width of the series area, whileyRangeis bounded on both sides. - Values outside the axis domain are clamped to the edge of the series area.
Labels Copy Link
Use label.position to place a label relative to its region.
import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
import {
AgCartesianChartOptions,
AgSeriesAreaBackgroundRegionLabelPosition,
LineSeriesModule,
ModuleRegistry,
NumberAxisModule,
UnitTimeAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";
ModuleRegistry.registerModules([
LineSeriesModule,
NumberAxisModule,
UnitTimeAxisModule,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgCharts],
template: `<div class="example-controls">
<div class="controls-row">
<label for="positionSelect">Position:</label>
<select id="positionSelect" (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" (input)="updateLabelXOffset($event)" (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" (input)="updateLabelYOffset($event)" (change)="updateLabelYOffset($event)">
<span id="yOffsetValue">0</span>
</div>
</div>
</div>
<ag-charts
[options]="options"
></ag-charts>
`,
})
export class AppComponent {
public options;
constructor() {
this.options = {
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 (%)",
},
},
},
};
}
setLabelPosition = (position: AgSeriesAreaBackgroundRegionLabelPosition) => {
const options = clone(this.options);
options.seriesArea!.backgroundRegions![0].label!.position = position;
this.options = options;
};
updateLabelXOffset = (event: any) => {
const options = clone(this.options);
var value = +event.target.value;
options.seriesArea!.backgroundRegions![0].label!.xOffset = value;
document.getElementById("xOffsetValue")!.innerHTML = String(value);
this.options = options;
};
updateLabelYOffset = (event: any) => {
const options = clone(this.options);
var value = +event.target.value;
options.seriesArea!.backgroundRegions![0].label!.yOffset = value;
document.getElementById("yOffsetValue")!.innerHTML = String(value);
this.options = options;
};
}
export function getData() {
return [
{ date: new Date(2025, 0, 1), capacity: 92 },
{ date: new Date(2025, 1, 1), capacity: 95 },
{ date: new Date(2025, 2, 1), capacity: 93 },
{ date: new Date(2025, 3, 1), capacity: 88 },
{ date: new Date(2025, 4, 1), capacity: 79 },
{ date: new Date(2025, 5, 1), capacity: 67 },
{ date: new Date(2025, 6, 1), capacity: 54 },
{ date: new Date(2025, 7, 1), capacity: 42 },
{ date: new Date(2025, 8, 1), capacity: 38 },
{ date: new Date(2025, 9, 1), capacity: 49 },
{ date: new Date(2025, 10, 1), capacity: 68 },
{ date: new Date(2025, 11, 1), capacity: 86 },
];
}
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent);
{
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-leftsits above the region, aligned left, andleft-topsits to its left, aligned top. - An
insideprefix places the label within the region. xOffsetandyOffsetmove the label from its position by the specified number of pixels.
Multiple Axes Copy Link
On a chart with multiple axes in one direction, use axis to specify the axis that the range is plotted against.
import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
import {
AgCartesianChartOptions,
BarSeriesModule,
LegendModule,
LineSeriesModule,
ModuleRegistry,
NumberAxisModule,
UnitTimeAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
BarSeriesModule,
LegendModule,
LineSeriesModule,
NumberAxisModule,
UnitTimeAxisModule,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgCharts],
template: `<ag-charts
[options]="options"
></ag-charts>
`,
})
export class AppComponent {
public options;
constructor() {
this.options = {
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)",
},
},
},
};
}
}
export function getData() {
return [
{ date: new Date(2025, 0, 1), capacity: 92, rainfall: 112 },
{ date: new Date(2025, 1, 1), capacity: 95, rainfall: 106 },
{ date: new Date(2025, 2, 1), capacity: 93, rainfall: 78 },
{ date: new Date(2025, 3, 1), capacity: 88, rainfall: 63 },
{ date: new Date(2025, 4, 1), capacity: 79, rainfall: 54 },
{ date: new Date(2025, 5, 1), capacity: 67, rainfall: 45 },
{ date: new Date(2025, 6, 1), capacity: 54, rainfall: 37 },
{ date: new Date(2025, 7, 1), capacity: 42, rainfall: 41 },
{ date: new Date(2025, 8, 1), capacity: 38, rainfall: 59 },
{ date: new Date(2025, 9, 1), capacity: 49, rainfall: 72 },
{ date: new Date(2025, 10, 1), capacity: 68, rainfall: 84 },
{ date: new Date(2025, 11, 1), capacity: 86, rainfall: 96 },
];
}
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent);
{
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.axisis set to'rainfall', so the range is resolved against that axis rather than thecapacityaxis.yRangehas noend, so the region extends to the top edge of the series area.- When
axisis omitted in this scenario, the range uses the first axis declared in that direction.
Customisation Copy Link
Regions are styled with fill, fillOpacity, stroke, strokeWidth and strokeOpacity.
Labels are styled with font and fills & border options.
import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
import {
AgCartesianChartOptions,
LegendModule,
ModuleRegistry,
NumberAxisModule,
ScatterSeriesModule,
} from "ag-charts-enterprise";
import { dealSeries } from "./data";
ModuleRegistry.registerModules([
LegendModule,
NumberAxisModule,
ScatterSeriesModule,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgCharts],
template: `<ag-charts
[options]="options"
></ag-charts>
`,
})
export class AppComponent {
public options;
constructor() {
this.options = {
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";
},
},
},
},
};
}
}
// Synthetic sales pipeline data ā deal value ($) vs sales cycle length (days), keyed by segment.
export interface DealDatum {
cycleDays: number;
dealValue: number;
}
export const dealSeries: Record<
"Retail" | "MidMarket" | "Enterprise",
DealDatum[]
> = {
Retail: [
{ cycleDays: 10, dealValue: 18000 },
{ cycleDays: 11, dealValue: 27000 },
{ cycleDays: 13, dealValue: 28500 },
{ cycleDays: 13, dealValue: 34000 },
{ cycleDays: 13, dealValue: 34000 },
{ cycleDays: 14, dealValue: 24000 },
{ cycleDays: 14, dealValue: 36000 },
{ cycleDays: 15, dealValue: 24500 },
{ cycleDays: 15, dealValue: 28000 },
{ cycleDays: 15, dealValue: 32500 },
{ cycleDays: 16, dealValue: 25500 },
{ cycleDays: 16, dealValue: 30500 },
{ cycleDays: 16, dealValue: 41500 },
{ cycleDays: 17, dealValue: 31500 },
{ cycleDays: 17, dealValue: 38000 },
{ cycleDays: 17, dealValue: 45000 },
{ cycleDays: 19, dealValue: 30500 },
{ cycleDays: 19, dealValue: 41000 },
{ cycleDays: 20, dealValue: 21000 },
{ cycleDays: 20, dealValue: 27500 },
{ cycleDays: 20, dealValue: 32500 },
{ cycleDays: 20, dealValue: 37000 },
{ cycleDays: 20, dealValue: 39500 },
{ cycleDays: 21, dealValue: 33000 },
{ cycleDays: 21, dealValue: 49500 },
{ cycleDays: 21, dealValue: 51500 },
{ cycleDays: 22, dealValue: 31500 },
{ cycleDays: 22, dealValue: 35500 },
{ cycleDays: 22, dealValue: 36500 },
{ cycleDays: 22, dealValue: 42500 },
{ cycleDays: 22, dealValue: 45000 },
{ cycleDays: 22, dealValue: 46000 },
{ cycleDays: 22, dealValue: 55000 },
{ cycleDays: 23, dealValue: 34000 },
{ cycleDays: 23, dealValue: 44500 },
{ cycleDays: 23, dealValue: 47500 },
{ cycleDays: 23, dealValue: 52000 },
{ cycleDays: 23, dealValue: 53000 },
{ cycleDays: 24, dealValue: 47500 },
{ cycleDays: 24, dealValue: 48500 },
{ cycleDays: 24, dealValue: 52000 },
{ cycleDays: 24, dealValue: 59000 },
{ cycleDays: 25, dealValue: 51500 },
{ cycleDays: 25, dealValue: 53500 },
{ cycleDays: 26, dealValue: 67500 },
{ cycleDays: 27, dealValue: 62500 },
{ cycleDays: 28, dealValue: 55500 },
{ cycleDays: 28, dealValue: 63000 },
{ cycleDays: 29, dealValue: 47000 },
{ cycleDays: 29, dealValue: 58500 },
{ cycleDays: 30, dealValue: 66000 },
{ cycleDays: 30, dealValue: 69000 },
{ cycleDays: 31, dealValue: 59000 },
{ cycleDays: 31, dealValue: 61500 },
{ cycleDays: 31, dealValue: 63500 },
{ cycleDays: 31, dealValue: 66000 },
{ cycleDays: 32, dealValue: 59000 },
{ cycleDays: 33, dealValue: 61500 },
{ cycleDays: 34, dealValue: 59000 },
{ cycleDays: 35, dealValue: 70000 },
],
MidMarket: [
{ cycleDays: 41, dealValue: 69500 },
{ cycleDays: 41, dealValue: 75500 },
{ cycleDays: 42, dealValue: 77500 },
{ cycleDays: 42, dealValue: 78500 },
{ cycleDays: 42, dealValue: 80500 },
{ cycleDays: 43, dealValue: 69500 },
{ cycleDays: 43, dealValue: 76500 },
{ cycleDays: 44, dealValue: 71500 },
{ cycleDays: 45, dealValue: 74500 },
{ cycleDays: 46, dealValue: 76500 },
{ cycleDays: 46, dealValue: 89000 },
{ cycleDays: 47, dealValue: 83500 },
{ cycleDays: 49, dealValue: 83000 },
{ cycleDays: 49, dealValue: 94500 },
{ cycleDays: 49, dealValue: 99000 },
{ cycleDays: 50, dealValue: 85500 },
{ cycleDays: 50, dealValue: 88000 },
{ cycleDays: 50, dealValue: 92500 },
{ cycleDays: 51, dealValue: 84000 },
{ cycleDays: 51, dealValue: 90000 },
{ cycleDays: 52, dealValue: 98500 },
{ cycleDays: 53, dealValue: 91500 },
{ cycleDays: 54, dealValue: 110000 },
{ cycleDays: 54, dealValue: 112000 },
{ cycleDays: 55, dealValue: 88500 },
{ cycleDays: 55, dealValue: 113000 },
{ cycleDays: 56, dealValue: 93000 },
{ cycleDays: 56, dealValue: 98500 },
{ cycleDays: 56, dealValue: 99000 },
{ cycleDays: 57, dealValue: 97500 },
{ cycleDays: 57, dealValue: 108500 },
{ cycleDays: 57, dealValue: 108500 },
{ cycleDays: 58, dealValue: 82500 },
{ cycleDays: 58, dealValue: 120500 },
{ cycleDays: 59, dealValue: 103000 },
{ cycleDays: 59, dealValue: 114500 },
{ cycleDays: 60, dealValue: 106000 },
{ cycleDays: 60, dealValue: 108500 },
{ cycleDays: 61, dealValue: 113000 },
{ cycleDays: 61, dealValue: 113500 },
{ cycleDays: 62, dealValue: 90500 },
{ cycleDays: 62, dealValue: 114500 },
{ cycleDays: 63, dealValue: 107000 },
{ cycleDays: 64, dealValue: 106500 },
{ cycleDays: 64, dealValue: 125000 },
{ cycleDays: 65, dealValue: 111500 },
{ cycleDays: 65, dealValue: 118500 },
{ cycleDays: 65, dealValue: 129500 },
{ cycleDays: 66, dealValue: 130000 },
{ cycleDays: 67, dealValue: 118000 },
{ cycleDays: 67, dealValue: 120500 },
{ cycleDays: 67, dealValue: 127000 },
{ cycleDays: 67, dealValue: 133500 },
{ cycleDays: 67, dealValue: 136000 },
{ cycleDays: 69, dealValue: 127500 },
{ cycleDays: 70, dealValue: 121000 },
{ cycleDays: 71, dealValue: 118500 },
{ cycleDays: 72, dealValue: 130000 },
{ cycleDays: 77, dealValue: 138500 },
{ cycleDays: 78, dealValue: 150500 },
],
Enterprise: [
{ cycleDays: 83, dealValue: 183000 },
{ cycleDays: 86, dealValue: 174000 },
{ cycleDays: 87, dealValue: 174000 },
{ cycleDays: 92, dealValue: 149500 },
{ cycleDays: 93, dealValue: 168000 },
{ cycleDays: 94, dealValue: 164500 },
{ cycleDays: 95, dealValue: 147000 },
{ cycleDays: 95, dealValue: 171000 },
{ cycleDays: 96, dealValue: 180500 },
{ cycleDays: 98, dealValue: 167500 },
{ cycleDays: 98, dealValue: 179000 },
{ cycleDays: 99, dealValue: 148000 },
{ cycleDays: 100, dealValue: 174500 },
{ cycleDays: 100, dealValue: 184000 },
{ cycleDays: 102, dealValue: 174000 },
{ cycleDays: 104, dealValue: 173500 },
{ cycleDays: 105, dealValue: 202000 },
{ cycleDays: 106, dealValue: 194500 },
{ cycleDays: 106, dealValue: 206500 },
{ cycleDays: 108, dealValue: 174000 },
{ cycleDays: 109, dealValue: 191000 },
{ cycleDays: 110, dealValue: 207000 },
{ cycleDays: 110, dealValue: 222000 },
{ cycleDays: 111, dealValue: 193500 },
{ cycleDays: 112, dealValue: 184000 },
{ cycleDays: 113, dealValue: 181500 },
{ cycleDays: 113, dealValue: 189000 },
{ cycleDays: 113, dealValue: 198500 },
{ cycleDays: 114, dealValue: 183000 },
{ cycleDays: 115, dealValue: 188000 },
{ cycleDays: 116, dealValue: 191500 },
{ cycleDays: 116, dealValue: 213500 },
{ cycleDays: 117, dealValue: 207500 },
{ cycleDays: 118, dealValue: 203000 },
{ cycleDays: 118, dealValue: 216000 },
{ cycleDays: 118, dealValue: 219500 },
{ cycleDays: 119, dealValue: 204000 },
{ cycleDays: 121, dealValue: 232500 },
{ cycleDays: 123, dealValue: 210500 },
{ cycleDays: 123, dealValue: 220000 },
{ cycleDays: 124, dealValue: 201000 },
{ cycleDays: 124, dealValue: 210500 },
{ cycleDays: 124, dealValue: 215000 },
{ cycleDays: 124, dealValue: 227500 },
{ cycleDays: 124, dealValue: 230000 },
{ cycleDays: 125, dealValue: 244500 },
{ cycleDays: 127, dealValue: 233000 },
{ cycleDays: 128, dealValue: 203500 },
{ cycleDays: 128, dealValue: 217500 },
{ cycleDays: 128, dealValue: 228000 },
{ cycleDays: 129, dealValue: 214500 },
{ cycleDays: 132, dealValue: 220500 },
{ cycleDays: 133, dealValue: 229000 },
{ cycleDays: 135, dealValue: 213500 },
{ cycleDays: 136, dealValue: 233500 },
{ cycleDays: 136, dealValue: 253500 },
{ cycleDays: 137, dealValue: 248000 },
{ cycleDays: 138, dealValue: 249000 },
{ cycleDays: 143, dealValue: 223000 },
{ cycleDays: 144, dealValue: 241500 },
],
};
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent);
{
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
fillmatching the series colour. - Each label is colour-matched to its region, with
fill,cornerRadius,paddingandborderstyling the box around the text andcolorstyling the text itself. Colours are set with theme parameters so they adapt to light and dark themes. yOffsetlifts each label 4px clear of its region.
API Reference Copy Link
Properties available on the AgSeriesAreaBackgroundRegion interface.
- xRange
AgSeriesAreaBackgroundRegionRange - The bounds of the region on an x-axis. Omit to span the full width 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.
- label
AgSeriesAreaBackgroundRegionLabel - Configuration for the label displayed with the region.
- fill
AgColorType - 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
AgCssColorOrRef - The colour for the stroke.
- strokeWidth
PixelSize - The width of the stroke in pixels.
- strokeOpacity
Opacity - The opacity of the stroke colour.
Properties available on the AgSeriesAreaBackgroundRegion interface.
- xRange
AgSeriesAreaBackgroundRegionRange - The bounds of the region on an x-axis. Omit to span the full width 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.
- label
AgSeriesAreaBackgroundRegionLabel - Configuration for the label displayed with the region.
- fill
AgColorType - 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
AgCssColorOrRef - The colour for the stroke.
- strokeWidth
PixelSize - The width of the stroke in pixels.
- strokeOpacity
Opacity - The opacity of the stroke colour.
Properties available on the AgSeriesAreaBackgroundRegionRange interface.
- 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.
Properties available on the AgSeriesAreaBackgroundRegionRange interface.
- 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.
Properties available on the AgSeriesAreaBackgroundRegionLabel interface.
- fontFamily
FontFamilyFull - 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
PixelSizedefault: 0 - The horizontal offset in pixels for the label.
- yOffset
PixelSizedefault: 0 - The vertical offset in pixels for the label.
- enabled
boolean - Whether the associated elements and properties should be used in the chart.
- color
AgCssColorOrRef - 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.
- cornerRadius
PixelSize - Apply rounded corners to the label box.
- padding
Padding - Distance between the label text and the border. A number applies uniform padding; an object sets each side.
- fill
AgColorType - 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.
Properties available on the AgSeriesAreaBackgroundRegionLabel interface.
- fontFamily
FontFamilyFull - 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
PixelSizedefault: 0 - The horizontal offset in pixels for the label.
- yOffset
PixelSizedefault: 0 - The vertical offset in pixels for the label.
- enabled
boolean - Whether the associated elements and properties should be used in the chart.
- color
AgCssColorOrRef - 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.
- cornerRadius
PixelSize - Apply rounded corners to the label box.
- padding
Padding - Distance between the label text and the border. A number applies uniform padding; an object sets each side.
- fill
AgColorType - 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.