Grid lines are horizontal and vertical lines that divide a chart into sections, providing a visual reference for interpreting data.
Enabling Grid Lines Copy
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
Grid lines can be styled via the gridLine.style property on each axis.
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import clone from "clone";
const ChartExample = () => {
const [options, setOptions] = useState({
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: [
{
type: "category",
position: "bottom",
gridLine: {
enabled: true,
},
},
{
type: "number",
position: "left",
gridLine: {
enabled: true,
},
},
],
});
const setGridStyle1 = () => {
const nextOptions = clone(options);
var gridStyle = [
{
stroke: "gray",
lineDash: [10, 5],
},
{
stroke: "lightgray",
lineDash: [5, 5],
},
];
nextOptions.axes[0].gridLine.style = gridStyle;
nextOptions.axes[1].gridLine.style = gridStyle;
setOptions(nextOptions);
};
const setGridStyle2 = () => {
const nextOptions = clone(options);
var xGridStyle = [
{
stroke: "red",
lineDash: [3, 3],
},
];
var yGridStyle = [
{
stroke: "green",
lineDash: [8, 3, 3, 3],
},
];
nextOptions.axes[0].gridLine.style = xGridStyle;
nextOptions.axes[1].gridLine.style = yGridStyle;
setOptions(nextOptions);
};
const setDefaultGridStyle = () => {
const nextOptions = clone(options);
delete nextOptions.axes[0].gridLine.style;
delete nextOptions.axes[1].gridLine.style;
setOptions(nextOptions);
};
return (
<Fragment>
<div className="toolbar">
<button onClick={setGridStyle1}>Grid Style #1</button>
<button onClick={setGridStyle2}>Grid Style #2</button>
<button onClick={setDefaultGridStyle}>Default Grid Style</button>
</div>
<AgCharts options={options} />
</Fragment>
);
};
const root = createRoot(document.getElementById("root"));
root.render(<ChartExample />);
gridLine: {
style: [
{
stroke: 'gray',
lineDash: [10, 5],
},
{
stroke: 'lightgray',
lineDash: [5, 5],
},
],
},
The gridLine.style property takes an array of objects containing two properties:
stroke- The colour of the line.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.
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.
The interval and position of grid lines is controlled by the Axis Interval options.
API Reference Copy
Next Up Copy
Continue to the next section to learn about Secondary Axes.