Style Segments allow customising the style of a series for defined ranges along an axis, making it easier to highlight thresholds, distinguish data ranges, or separate actual and predicted values.
Segmentation Copy Link
import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
import {
AgCartesianChartOptions,
AreaSeriesModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
UnitTimeAxisModule,
} from "ag-charts-community";
import { DataType, data } from "./data";
ModuleRegistry.registerModules([
AreaSeriesModule,
LegendModule,
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 = {
title: { text: "Performance Variance" },
data,
series: [
{
type: "area",
yKey: "variance",
xKey: "date",
interpolation: {
type: "smooth",
},
strokeWidth: 2,
fillOpacity: 0.3,
fill: "green", //used for the series
stroke: "green", //used for the series
segmentation: {
key: "y", //segment along the y axis
segments: [
{
stop: 0, //domain min until 0
fill: "red", //used for this segment
stroke: "red", //used for this segment
},
],
},
},
],
axes: {
x: {
type: "unit-time",
paddingOuter: 0,
},
y: {
type: "number",
title: { text: "Variance ($)" },
},
},
};
}
}
export interface DataType {
date: Date;
variance: number;
}
export const data: DataType[] = [
{ date: new Date(2024, 0, 25), variance: -1 },
{ date: new Date(2024, 1, 25), variance: -7 },
{ date: new Date(2024, 2, 25), variance: -3 },
{ date: new Date(2024, 3, 25), variance: -12 },
{ date: new Date(2024, 4, 25), variance: -16 },
{ date: new Date(2024, 5, 25), variance: -4 },
{ date: new Date(2024, 6, 25), variance: -9 },
{ date: new Date(2024, 7, 25), variance: -5 },
{ date: new Date(2024, 8, 25), variance: -2 },
{ date: new Date(2024, 9, 25), variance: 18 },
{ date: new Date(2024, 10, 25), variance: 4 },
{ date: new Date(2024, 11, 25), variance: 9 },
{ date: new Date(2025, 0, 25), variance: 2 },
{ date: new Date(2025, 1, 25), variance: 14 },
{ date: new Date(2025, 2, 25), variance: 5 },
{ date: new Date(2025, 3, 25), variance: 22 },
{ date: new Date(2025, 4, 25), variance: 11 },
{ date: new Date(2025, 5, 25), variance: 1 },
{ date: new Date(2025, 6, 25), variance: 17 },
{ date: new Date(2025, 7, 25), variance: -15 },
{ date: new Date(2025, 8, 25), variance: -8 },
{ date: new Date(2025, 9, 25), variance: 8 },
{ date: new Date(2025, 10, 25), variance: 6 },
{ date: new Date(2025, 11, 25), variance: 3 },
{ date: new Date(2025, 11, 25), variance: 13 },
];
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent);
The segmentation option takes a key to determine which axis to use, and a segments array for the styles.
{
series: [
{
type: 'area',
yKey: 'variance',
xKey: 'date',
strokeWidth: 2,
fillOpacity: 0.3,
fill: 'green', //used for the series
stroke: 'green', //used for the series
segmentation: {
key: 'y', //segment along the y-axis
segments: [
{
stop: 0, //domain minimum until 0
fill: 'red', //used for this segment
stroke: 'red', //used for this segment
},
],
},
},
],
}In this configuration:
- The series
fillandstrokeare red when values fall below 0 on the y-axis. - The series
fillandstrokeare green when values are above 0 on the y-axis. - Properties
fillOpacityandstrokeWidthnot specified in the segment are inherited from the series.
Segmentation Key Copy Link
Set segmentation.key: 'x' to segment along the xKey axis, or segmentation.key: 'y' to segment along the yKey axis.
import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
import {
AgCartesianChartOptions,
LegendModule,
LineSeriesModule,
ModuleRegistry,
NumberAxisModule,
UnitTimeAxisModule,
} from "ag-charts-community";
import { DataType, data } from "./data";
ModuleRegistry.registerModules([
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 = {
title: { text: "Performance Variance" },
data,
series: [
{
type: "line",
xKey: "date",
yKey: "value",
xName: "Date",
yName: "Value",
interpolation: {
type: "smooth",
},
segmentation: {
key: "x",
segments: [
{
start: new Date("2025-01-01"),
lineDash: [5, 10],
},
],
},
},
],
axes: {
x: { type: "unit-time" },
y: { type: "number" },
},
};
}
}
export interface DataType {
date: Date;
value: number;
status: "actual" | "forecast";
}
export const data: DataType[] = [
// Actuals
{ date: new Date("2024-07-01"), value: 120, status: "actual" },
{ date: new Date("2024-08-01"), value: 118, status: "actual" },
{ date: new Date("2024-09-01"), value: 121, status: "actual" },
{ date: new Date("2024-10-01"), value: 125, status: "actual" },
{ date: new Date("2024-11-01"), value: 128, status: "actual" },
{ date: new Date("2024-12-01"), value: 130, status: "actual" },
{ date: new Date("2025-01-01"), value: 129, status: "actual" },
{ date: new Date("2025-02-01"), value: 131, status: "actual" },
{ date: new Date("2025-03-01"), value: 133, status: "actual" },
// Forecasts
{ date: new Date("2025-04-01"), value: 135, status: "forecast" },
{ date: new Date("2025-05-01"), value: 137, status: "forecast" },
{ date: new Date("2025-06-01"), value: 140, status: "forecast" },
{ date: new Date("2025-07-01"), value: 142, status: "forecast" },
{ date: new Date("2025-08-01"), value: 145, status: "forecast" },
];
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent);
{
series: [
{
type: 'line',
xKey: 'date',
yKey: 'value',
segmentation: {
key: 'x',
segments: [
{
start: new Date('2025-01-01'),
lineDash: [5, 10],
},
],
},
},
],
}In the example above:
- The series uses a solid stroke for 2024 and a dashed stroke for 2025 to distinguish actual and forecast data.
Segments Copy Link
Each segment in the segments array is defined by bounds and provides style overrides:
start/stop- The axis range for the segment style to start and stop at.
- Omit
startto begin at the axis minimum or thestopof the previous segment. - Omit
stopto end at the axis maximum or thestartof the next segment.
Style properties
- These are the same styling keys available on the series, such as
strokeandfill. - Unspecified properties fall back to the main series options or defaults.
- These are the same styling keys available on the series, such as