> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# CartesianGrid

Renders background grid with lines and fill colors in a Cartesian chart.

## Usage

```tsx theme={null}
import { LineChart, CartesianGrid } from 'recharts';

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

## Props

<ParamField path="horizontal" type="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.
</ParamField>

<ParamField path="vertical" type="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.
</ParamField>

<ParamField path="stroke" type="string" default="#ccc">
  The stroke color of grid lines.
</ParamField>

<ParamField path="strokeDasharray" type="string | number[]">
  The pattern of dashes and gaps used to paint the lines of the grid.

  <Expandable title="Examples">
    ```tsx theme={null}
    <CartesianGrid strokeDasharray="3 3" />
    <CartesianGrid strokeDasharray={[5, 5, 1, 5]} />
    <CartesianGrid strokeDasharray="5 5 1 5" />
    ```
  </Expandable>
</ParamField>

<ParamField path="fill" type="string" default="none">
  The background color used to fill the space between grid lines.

  <Expandable title="Examples">
    ```tsx theme={null}
    <CartesianGrid fill="red" />
    <CartesianGrid fill="#ccc" />
    ```
  </Expandable>
</ParamField>

<ParamField path="fillOpacity" type="number | string">
  The opacity of the background used to fill the space between grid lines.

  ```tsx theme={null}
  <CartesianGrid fill="red" fillOpacity={0.6} />
  ```
</ParamField>

<ParamField path="horizontalFill" type="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|black

  If this is undefined, or an empty array, then there is no background fill.
  Note: Grid lines will be rendered above these background stripes.
</ParamField>

<ParamField path="verticalFill" type="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|black

  If this is undefined, or an empty array, then there is no background fill.
  Note: Grid lines will be rendered above these background stripes.
</ParamField>

<ParamField path="syncWithTicks" type="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.
</ParamField>

<ParamField path="horizontalPoints" type="number[]" default="[]">
  Array of coordinates in pixels where to draw horizontal grid lines.
  Has priority over syncWithTicks and horizontalValues.
</ParamField>

<ParamField path="verticalPoints" type="number[]" default="[]">
  Array of coordinates in pixels where to draw vertical grid lines.
  Has priority over syncWithTicks and verticalValues.
</ParamField>

<ParamField path="horizontalValues" type="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.
</ParamField>

<ParamField path="verticalValues" type="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.
</ParamField>

<ParamField path="horizontalCoordinatesGenerator" type="function">
  A function that generates the y-coordinates of all horizontal lines.

  ```tsx theme={null}
  (props: {
    yAxis: AxisProps | undefined;
    width: number;
    height: number;
    offset: ChartOffset;
  }, syncWithTicks: boolean) => number[]
  ```
</ParamField>

<ParamField path="verticalCoordinatesGenerator" type="function">
  A function that generates the x-coordinates of all vertical lines.

  ```tsx theme={null}
  (props: {
    xAxis: AxisProps | undefined;
    width: number;
    height: number;
    offset: ChartOffset;
  }, syncWithTicks: boolean) => number[]
  ```
</ParamField>

<ParamField path="x" type="number">
  The x-coordinate of grid.
  If left undefined, it will be computed from the chart's offset and margins.
</ParamField>

<ParamField path="y" type="number">
  The y-coordinate of grid.
  If left undefined, it will be computed from the chart's offset and margins.
</ParamField>

<ParamField path="width" type="number">
  The width of grid. If undefined, covers the full width of the chart plot area.
</ParamField>

<ParamField path="height" type="number">
  The height of grid. If undefined, covers the full height of the chart plot area.
</ParamField>

<ParamField path="xAxisId" type="string | number" default="0">
  The id of XAxis which is corresponding to the data. Required when there are multiple XAxes.
</ParamField>

<ParamField path="yAxisId" type="string | number" default="0">
  The id of YAxis which is corresponding to the data. Required when there are multiple YAxes.
</ParamField>

<ParamField path="zIndex" type="number" default="-100">
  Z-Index of this component. CartesianGrid typically renders behind other elements.
</ParamField>

## Source

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