# Grid

> A customizable grid component for charts with horizontal and vertical lines, edge fade, edge line hiding, and dashed styling

Source: https://ui.cortexcn.dev/docs/utility/grid

## Installation

```bash
npx shadcn@latest add @cortexcn/grid
```

## Usage

The Grid component adds visual reference lines to charts. It must be used inside a chart component (`LineChart`, `AreaChart`, `BarChart`, `ScatterChart`, `CandlestickChart`, `LiveLineChart`, and other cartesian charts).

```tsx
import { LineChart, Line, Grid, ChartTooltip } from "@/components/charts";

<LineChart data={data}>
  <Grid horizontal />
  <Line dataKey="value" />
  <ChartTooltip />
</LineChart>;
```

## Props

| Prop                          | Type       | Default                         | Description                                                                                                                                              |
| ----------------------------- | ---------- | ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `horizontal`                  | `boolean`  | `true`                          | Show horizontal grid lines                                                                                                                               |
| `vertical`                    | `boolean`  | `false`                         | Show vertical grid lines                                                                                                                                 |
| `numTicksRows`                | `number`   | `5`                             | Number of horizontal lines                                                                                                                               |
| `numTicksColumns`             | `number`   | `10`                            | Number of vertical lines                                                                                                                                 |
| `rowTickValues`               | `number[]` | -                               | Explicit tick values for horizontal grid lines. When set, overrides `numTicksRows`. Use with Live Line Chart so grid rows align with `LiveYAxis` labels. |
| `stroke`                      | `string`   | `var(--chart-grid)`             | Line color                                                                                                                                               |
| `strokeOpacity`               | `number`   | `1`                             | Line opacity                                                                                                                                             |
| `strokeWidth`                 | `number`   | `1`                             | Line width                                                                                                                                               |
| `strokeDasharray`             | `string`   | `"4,4"`                         | Dash pattern (empty string for solid)                                                                                                                    |
| `highlightRowValues`          | `number[]` | —                               | Emphasize horizontal lines at specific y values (e.g. `[0]` for break-even)                                                                              |
| `highlightRowStroke`          | `string`   | `var(--chart-foreground-muted)` | Stroke for highlighted rows                                                                                                                              |
| `highlightRowStrokeOpacity`   | `number`   | `1`                             | Opacity for highlighted rows                                                                                                                             |
| `highlightRowStrokeWidth`     | `number`   | `1`                             | Width for highlighted rows                                                                                                                               |
| `highlightRowStrokeDasharray` | `string`   | `"0"`                           | Dash pattern for highlighted rows                                                                                                                        |
| `fadeHorizontal`              | `boolean`  | `true`                          | Fade horizontal lines at left/right edges                                                                                                                |
| `fadeVertical`                | `boolean`  | `false`                         | Fade vertical lines at top/bottom edges                                                                                                                  |
| `hideHorizontalEdgeLines`     | `boolean`  | `false`                         | Omit the first and last horizontal grid lines                                                                                                            |
| `hideVerticalEdgeLines`       | `boolean`  | `false`                         | Omit the first and last vertical grid lines                                                                                                              |

For a pattern fill instead of grid lines, use [`Background`](https://ui.cortexcn.dev/docs/utility/background) in place of `Grid`.

## Examples

### Horizontal Only (Default)

The most common configuration with horizontal reference lines.

### Vertical Only

Use vertical grid lines to emphasize time intervals.

### Both Horizontal and Vertical

Display a full grid for detailed reference.

### Solid Lines

Remove the dash pattern for solid grid lines.

### Without Edge Fade

Disable the edge fade effect for sharp line endings.

### Hide edge lines

Omit the outermost horizontal or vertical grid lines — useful when the chart border already provides a frame.

### Dense Grid

Increase the number of grid lines for more granular reference.

### Custom Styling

```tsx
<LineChart data={data}>
  <Grid
    horizontal
    vertical
    stroke="var(--border)"
    strokeOpacity={0.5}
    strokeWidth={0.5}
    strokeDasharray=""
    fadeHorizontal={false}
    fadeVertical={false}
  />
  <Line dataKey="value" />
</LineChart>
```

## Theming

The Grid uses CSS variables for theming:

```css
:root {
  --chart-grid: oklch(0.9 0 0);
}

.dark {
  --chart-grid: oklch(0.25 0 0);
}
```