Background | Bklit UI

Preview

Installation

pnpm dlx shadcn@latest add @bklit/background

pnpm dlx shadcn@latest add @bklit/background

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).

import { LineChart, Line, Background, ChartTooltip, XAxis } from "@bklitui/ui/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 under the hood (PatternLines and PatternCircles).

Studio

Edit in Studio

Open in Studio

Open Studio with the line chart, hide Grid in the layers panel, then select Background to tune pattern, fade, and opacity. The same layer is available on area, bar, candlestick, composed, live line, line, and scatter charts.

Examples

Diagonal (default)

<LineChart data={data}>
  <Background />
  <Line dataKey="value" />
  <XAxis />
  <ChartTooltip />
</LineChart>

<LineChart data={data}>  <Background />  <Line dataKey="value" />  <XAxis />  <ChartTooltip /></LineChart>

Dot grid

<LineChart data={data}>
  <Background pattern="dots" opacity={0.85} />
  <Line dataKey="value" />
  <XAxis />
  <ChartTooltip />
</LineChart>

<LineChart data={data}>  <Background pattern="dots" opacity={0.85} />  <Line dataKey="value" />  <XAxis />  <ChartTooltip /></LineChart>

Cross hatch

<LineChart data={data}>
  <Background pattern="cross" scale={1.25} />
  <Line dataKey="value" />
  <XAxis />
  <ChartTooltip />
</ComponentShowcase>

<LineChart data={data}>  <Background pattern="cross" scale={1.25} />  <Line dataKey="value" />  <XAxis />  <ChartTooltip /></ComponentShowcase>

No edge fade

<LineChart data={data}>
  <Background pattern="horizontal" fadeHorizontal={false} fadeVertical={false} />
  <Line dataKey="value" />
  <XAxis />
  <ChartTooltip />
</LineChart>

<LineChart data={data}>  <Background pattern="horizontal" fadeHorizontal={false} fadeVertical={false} />  <Line dataKey="value" />  <XAxis />  <ChartTooltip /></LineChart>

Grid vs Background

Use 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.