<Recharts />

CartesianGrid

Properties

• xNumber

  The x-coordinate of grid.

  DEFAULT: 0

• yNumber

  The y-coordinate of grid.

  DEFAULT: 0

• widthNumber

  The width of grid.

  DEFAULT: 0

• heightNumber

  The height of grid.

  DEFAULT: 0

• horizontalBoolean

  If set false, no horizontal grid lines will be drawn.

  DEFAULT: true

• verticalBoolean

  If set false, no vertical grid lines will be drawn.

  DEFAULT: true

• horizontalPointsArray

  The y-coordinates of all horizontal lines.

  DEFAULT: []

• horizontalCoordinatesGeneratorFunctionoptional

  A function that generates the y-coordinates of all horizontal lines. The generator gets passed an object of the shape { yAxis, width, height, offset }.

  FORMAT:

  <CartesianGrid strokeDasharray="3 3" horizontalCoordinatesGenerator={(props) => props.height > 250 ? [75, 150, 225] : [100, 200]} />

  Examples:

  • Cartesian grid with coordinate generators

• verticalPointsArray

  The x-coordinates of all vertical lines.

  DEFAULT: []

• verticalCoordinatesGeneratorFunctionoptional

  A function that generates the x-coordinates of all vertical lines. The generator gets passed an object of the shape { xAxis, width, height, offset }.

  FORMAT:

  <CartesianGrid strokeDasharray="3 3" verticalCoordinatesGenerator={(props) => props.width > 450 ? [150, 300, 450] : [200, 400]} />

  Examples:

  • Cartesian grid with coordinate generators

• fillStringoptional

  The background color used to fill the space between grid lines

  FORMAT:

  <CartesianGrid strokeDasharray="3 3" fill="red" />
  <CartesianGrid strokeDasharray="3 3" fill="#ccc" />

• fillOpacityNumberoptional

  The opacity of the background used to fill the space between grid lines

  FORMAT:

  <CartesianGrid strokeDasharray="3 3" fill="red" fillOpacity={0.6} />

• strokeDasharrayStringoptional

  The pattern of dashes and gaps used to paint the lines of the grid

  FORMAT:

  <CartesianGrid strokeDasharray="4" />
  <CartesianGrid strokeDasharray="4 1" />
  <CartesianGrid strokeDasharray="4 1 2" />

• xAxisIdString | Numberoptional

  The id of x-axis which you would like to add grid lines for. Must match if xAxisId is set on XAxis or a graphical component .

  DEFAULT: 0

  FORMAT:

  <CartesianGrid xAxisId="top" />
  <XAxis xAxisId="top" />
  <Bar dataKey="temp" xAxisId="top" />

• yAxisIdString | Numberoptional

  The id of y-axis which you would like to add grid lines for. Must match if yAxisId is set on YAxis or a graphical component.

  DEFAULT: 0

  FORMAT:

  <CartesianGrid yAxisId="left" />
  <YAxis yAxisId="left" />
  <Bar dataKey="temp" yAxisId="left" />