# Background

> Pattern fill for the plot area when grid lines are hidden, with presets, an edge fade, and an enter animation

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

## Installation

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

## Usage

Use `Background` instead of `Grid` when you want a textured plot fill rather than reference lines. It must be a child of a cartesian chart (`LineChart`, `AreaChart`, `BarChart`, `ScatterChart`, `CandlestickChart`, `ComposedChart`, `LiveLineChart`, and other charts that provide chart context).

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

<LineChart data={data}>
  <Background pattern="diagonal" />
  <Line dataKey="value" />
  <XAxis />
  <ChartTooltip />
</LineChart>;
```

`Background` renders behind series layers. On time-series charts it sits outside the series clip reveal and fades in after the chart finishes loading.

## Props

| Prop                   | Type                                                                                               | Default             | Description                                             |
| ---------------------- | -------------------------------------------------------------------------------------------------- | ------------------- | ------------------------------------------------------- |
| `pattern`              | `"diagonal" \| "horizontal" \| "vertical" \| "cross" \| "dots" \| "circles" \| "accent" \| "none"` | `"diagonal"`        | Pattern preset (`"none"` renders nothing)               |
| `color`                | `string`                                                                                           | `var(--chart-grid)` | Pattern stroke or dot color                             |
| `scale`                | `number`                                                                                           | `1`                 | Tile scale multiplier                                   |
| `strokeWidth`          | `number`                                                                                           | preset default      | Line stroke width for line-based patterns               |
| `radius`               | `number`                                                                                           | preset default      | Dot or circle radius for `dots` / `circles`             |
| `complement`           | `boolean`                                                                                          | `false`             | Alternate tile fill for circle patterns                 |
| `fill`                 | `string`                                                                                           | —                   | Solid fill inside circles                               |
| `dotFill`              | `boolean`                                                                                          | `true`              | Dot grid only — hollow dots when `false`                |
| `tileBackground`       | `string`                                                                                           | —                   | Background color inside each pattern tile               |
| `showFill`             | `boolean`                                                                                          | `true`              | Apply the pattern texture to the plot area              |
| `opacity`              | `number`                                                                                           | `1`                 | Pattern fill opacity                                    |
| `fadeHorizontal`       | `boolean`                                                                                          | `true`              | Fade pattern at left and right edges                    |
| `fadeVertical`         | `boolean`                                                                                          | `true`              | Fade pattern at top and bottom edges                    |
| `fadeHorizontalLength` | `number`                                                                                           | `10`                | Horizontal fade zone as % of plot width per edge (0–45) |
| `fadeVerticalLength`   | `number`                                                                                           | `10`                | Vertical fade zone as % of plot height per edge (0–45)  |

Patterns use [@visx/pattern](https://visx.airbnb.tech/docs/pattern) under the hood (`PatternLines` and `PatternCircles`).

## Examples

### Diagonal (default)

### Dot grid

### Cross hatch

### No edge fade

## Grid vs Background

Use [`Grid`](https://ui.cortexcn.dev/docs/utility/grid) for reference lines. Use `Background` when you want a subtle pattern fill without ticks. They are typically mutually exclusive — pick one visual treatment for the plot area.