Background | Cortexcn

Installation

ProPart of Cortexcn Pro

The source for background comes with a Cortexcn Pro license, along with every other chart and the website templates. Pick a license on the pricing page.

Buy Pro See what is in Pro

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 "@/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 under the hood (PatternLines and PatternCircles).

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.