Skip to main content
Renders background grid with lines and fill colors in a Cartesian chart.

​
Usage

import { LineChart, CartesianGrid } from 'recharts';

<LineChart data={data}>
  <CartesianGrid strokeDasharray="3 3" />
</LineChart>

​
Props

​
horizontal
boolean | object | ReactElement | function
default:"true"
If set false, no horizontal grid lines will be drawn.Can also be an object with SVG line props, a custom element, or a render function.
​
vertical
boolean | object | ReactElement | function
default:"true"
If set false, no vertical grid lines will be drawn.Can also be an object with SVG line props, a custom element, or a render function.
​
stroke
string
default:"#ccc"
The stroke color of grid lines.
​
strokeDasharray
string | number[]
The pattern of dashes and gaps used to paint the lines of the grid.
​
fill
string
default:"none"
The background color used to fill the space between grid lines.
​
fillOpacity
number | string
The opacity of the background used to fill the space between grid lines.
<CartesianGrid fill="red" fillOpacity={0.6} />
​
horizontalFill
string[]
default:"[]"
Defines background color of stripes.The values from this array will be passed in as the fill property in a rect SVG element.In case there are more stripes than colors, the colors will start from beginning. So for example: horizontalFill={['yellow', 'black']} produces a pattern of yellow|black|yellow|blackIf this is undefined, or an empty array, then there is no background fill. Note: Grid lines will be rendered above these background stripes.
​
verticalFill
string[]
default:"[]"
Defines background color of stripes.The values from this array will be passed in as the fill property in a rect SVG element.In case there are more stripes than colors, the colors will start from beginning. So for example: verticalFill={['yellow', 'black']} produces a pattern of yellow|black|yellow|blackIf this is undefined, or an empty array, then there is no background fill. Note: Grid lines will be rendered above these background stripes.
​
syncWithTicks
boolean
default:"false"
If true, only the lines that correspond to the axes ticks values will be drawn. If false, extra lines could be added for each axis (at min and max coordinates), if there will not such ticks. horizontalPoints, verticalPoints, horizontalValues, verticalValues have priority over syncWithTicks.
​
horizontalPoints
number[]
default:"[]"
Array of coordinates in pixels where to draw horizontal grid lines. Has priority over syncWithTicks and horizontalValues.
​
verticalPoints
number[]
default:"[]"
Array of coordinates in pixels where to draw vertical grid lines. Has priority over syncWithTicks and verticalValues.
​
horizontalValues
number[] | string[]
Array of values, where horizontal lines will be drawn. Numbers or strings, in dependence on axis type. Has priority over syncWithTicks but not over horizontalPoints.
​
verticalValues
number[] | string[]
Array of values, where vertical lines will be drawn. Numbers or strings, in dependence on axis type. Has priority over syncWithTicks but not over verticalPoints.
​
horizontalCoordinatesGenerator
function
A function that generates the y-coordinates of all horizontal lines.
(props: {
  yAxis: AxisProps | undefined;
  width: number;
  height: number;
  offset: ChartOffset;
}, syncWithTicks: boolean) => number[]
​
verticalCoordinatesGenerator
function
A function that generates the x-coordinates of all vertical lines.
(props: {
  xAxis: AxisProps | undefined;
  width: number;
  height: number;
  offset: ChartOffset;
}, syncWithTicks: boolean) => number[]
​
x
number
The x-coordinate of grid. If left undefined, it will be computed from the chart’s offset and margins.
​
y
number
The y-coordinate of grid. If left undefined, it will be computed from the chart’s offset and margins.
​
width
number
The width of grid. If undefined, covers the full width of the chart plot area.
​
height
number
The height of grid. If undefined, covers the full height of the chart plot area.
​
xAxisId
string | number
default:"0"
The id of XAxis which is corresponding to the data. Required when there are multiple XAxes.
​
yAxisId
string | number
default:"0"
The id of YAxis which is corresponding to the data. Required when there are multiple YAxes.
​
zIndex
number
default:"-100"
Z-Index of this component. CartesianGrid typically renders behind other elements.

​
Source

https://github.com/recharts/recharts/blob/main/src/cartesian/CartesianGrid.tsx

Build docs developers (and LLMs) love

Get started for freeTalk to us