# Gridlines

```ts
import { Gridlines } from 'cx/charts';
```

The `Gridlines` component draws horizontal and vertical gridlines in the chart background. Besides aesthetics, gridlines make it easier to read axis values.

Gridlines automatically align with axis tick marks. Use `xAxis` and `yAxis` properties to target different axes or set them to `false` to hide gridlines in that direction.

```tsx
import { Svg, Rectangle } from "cx/svg";
import { Chart, NumericAxis, Gridlines } from "cx/charts";

export default (
  <Svg style="width: 400px; height: 300px; border: 1px dashed #ddd">
    <Chart
      margin="40 20 40 50"
      axes={{
        x: <NumericAxis />,
        y: <NumericAxis vertical />,
      }}
    >
      <Rectangle fill="white" />
      <Gridlines />
    </Chart>
  </Svg>
);

```

## Configuration

| Property | Type             | Description                                                                                       |
| -------- | ---------------- | ------------------------------------------------------------------------------------------------- |
| `xAxis`  | `string/boolean` | Name of the horizontal axis. Default is `"x"`. Set to `false` to hide horizontal gridlines.       |
| `yAxis`  | `string/boolean` | Name of the vertical axis. Default is `"y"`. Set to `false` to hide vertical gridlines.           |
| `style`  | `object/string`  | Custom CSS styles for the gridlines path element.                                                 |