Grid lines are horizontal and vertical lines that divide a chart into sections, providing a visual reference for interpreting data.
Enabling Grid Lines Copy Link
Grid lines are shown by default on number, log and time axes types, and are disabled by default on category axes.
To change this, use the gridLine.enabled property on each axis.
Customising Grid Lines Copy Link
Grid lines can be styled via the gridLine.style property on each axis.
import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
import {
AgCartesianChartOptions,
CategoryAxisModule,
LegendModule,
LineSeriesModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-community";
import clone from "clone";
ModuleRegistry.registerModules([
CategoryAxisModule,
LegendModule,
LineSeriesModule,
NumberAxisModule,
]);
@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="Grid Style">
<input type="radio" id="style-1" name="grid-style" value="1" (change)="styleChange($event)">
<label for="style-1">Grid Style #1</label>
<input type="radio" id="style-2" name="grid-style" value="2" (change)="styleChange($event)">
<label for="style-2">Grid Style #2</label>
<input type="radio" id="style-default" name="grid-style" value="default" checked="" (change)="styleChange($event)">
<label for="style-default">Default Grid Style</label>
</div>
</div>
</div>
<ag-charts
[options]="options"
></ag-charts>
`,
})
export class AppComponent {
public options;
constructor() {
this.options = {
title: {
text: "Most Common Girls' First Names In English",
},
subtitle: {
text: "over the past 100 years",
},
data: [
{ name: "Mary", count: 234000 },
{ name: "Patricia", count: 211000 },
{ name: "Jennifer", count: 178000 },
{ name: "Elizabeth", count: 153000 },
{ name: "Linda", count: 123000 },
],
series: [
{
type: "line",
xKey: "name",
yKey: "count",
},
],
axes: {
x: {
type: "category",
gridLine: {
enabled: true,
},
},
y: {
type: "number",
gridLine: {
enabled: true,
},
},
},
};
}
styleChange = (event: Event) => {
const options = clone(this.options);
switch ((event.target as HTMLInputElement).value) {
case "1": {
const gridStyle = [
{
stroke: "gray",
lineDash: [10, 5],
},
{
stroke: "lightgray",
lineDash: [5, 5],
},
];
options.axes!.x!.gridLine!.style = gridStyle;
options.axes!.y!.gridLine!.style = gridStyle;
break;
}
case "2": {
const xGridStyle = [
{
stroke: "red",
lineDash: [3, 3],
},
];
const yGridStyle = [
{
stroke: "green",
lineDash: [8, 3, 3, 3],
},
];
options.axes!.x!.gridLine!.style = xGridStyle;
options.axes!.y!.gridLine!.style = yGridStyle;
break;
}
default: {
delete options.axes!.x!.gridLine!.style;
delete options.axes!.y!.gridLine!.style;
break;
}
}
this.options = options;
};
}
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent);
{
gridLine: {
style: [
{
stroke: 'gray',
lineDash: [10, 5],
},
{
stroke: 'lightgray',
lineDash: [5, 5],
},
],
},
}The gridLine.style property takes an array of objects containing styling properties:
stroke- The colour of the line.strokeWidth- The width of the line. This overrides the top levelgridLine.widthoption.lineDash- How the line stroke is rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. If the array is empty, the grid lines will be solid without any dashes.fill- The colour of the fill between grid lines.fillOpacity- The opacity of the fill between grid lines.
Each object in the gridLine.style array is applied to the each grid line sequentially, looping around if necessary. This allows alternating styles across multiple grid lines, or styling each individual grid line separately.
Alternating Band Shading Copy Link
Alternating band shading can be achieved using the fill and fillOpacity properties of the objects in the gridLine.style array.
import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
import {
AgCartesianChartOptions,
CategoryAxisModule,
LegendModule,
LineSeriesModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-community";
ModuleRegistry.registerModules([
CategoryAxisModule,
LegendModule,
LineSeriesModule,
NumberAxisModule,
]);
@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: "Most Common Girls' First Names In English",
},
subtitle: {
text: "over the past 100 years",
},
data: [
{ name: "Mary", count: 234000 },
{ name: "Patricia", count: 211000 },
{ name: "Jennifer", count: 178000 },
{ name: "Elizabeth", count: 153000 },
{ name: "Linda", count: 123000 },
],
series: [
{
type: "line",
xKey: "name",
yKey: "count",
},
],
axes: {
x: {
type: "category",
gridLine: {
style: [
{
fill: "#999",
fillOpacity: 0.1,
strokeWidth: 0,
},
{},
],
},
},
},
};
}
}
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent);
{
gridLine: {
style: [
{
fill: '#999',
fillOpacity: 0.1,
strokeWidth: 0, //don't show lines around the bands
},
{}, //empty object for an unshaded band
],
},
}The interval and position of grid lines is controlled by the Axis Interval options.
API Reference Copy Link
Properties available on the AgAxisGridLineOptions interface.
- enabled
boolean - Set to `false` to hide the axis grid lines.
- width
PixelSize - The width in pixels of the axis grid lines.
- style
AgAxisGridStyle[] - Configuration of the lines used to form the grid in the chart series area.
Properties available on the AgAxisGridLineOptions interface.
- enabled
boolean - Set to `false` to hide the axis grid lines.
- width
PixelSize - The width in pixels of the axis grid lines.
- style
AgAxisGridStyle[] - Configuration of the lines used to form the grid in the chart series area.