0|

Background

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Customize the background of your charts with various styles and patterns

Usage

Compose ChartBackground inside any Bee*Chart that uses the plot shell (line, bar, composed):

import { BeeLineChart, Line, XAxis, Legend, Tooltip } from "@beecharts/line-chart";
import { ChartBackground } from "@beecharts/background";
 
<BeeLineChart data={data} config={chartConfig} className="h-full w-full p-4" xDataKey="month">
  <ChartBackground variant="dots" />
  <XAxis dataKey="month" />
  <Legend />
  <Tooltip />
  <Line dataKey="desktop" />
  <Line dataKey="mobile" />
</BeeLineChart>

Background pattern vs chart grid

APIWhat it is
<ChartBackground variant="graph-paper" />Decorative SVG wallpaper (small repeating squares)
<Grid />Optional y-axis split lines at value ticks (wide spacing)

Background previews omit <Grid /> so split lines do not stack on the pattern. Add <Grid /> when you want those value guides.

Variants

Dots

variant='dots'

Graph paper

variant='graph-paper'

Cross Hatch

variant='cross-hatch'

Diagonal Lines

variant='diagonal-lines'

Plus

variant='plus'

Falling Triangles

variant='falling-triangles'

4-Pointed Star

variant='4-pointed-star'

Tiny Checkers

variant='tiny-checkers'

Overlapping Circles

variant='overlapping-circles'

Wiggle Lines

variant='wiggle-lines'

Bubbles

variant='bubbles'

Custom Variant

You can add your own background style by defining an SVG <pattern> and registering it in PATTERN_MAP inside src/registry/ui/background.tsx.

  1. Add the new name to the BackgroundVariant union.
  2. Create a pattern component that returns a <pattern> with your SVG shapes.
  3. Register the pattern component in PATTERN_MAP.

Then use your variant:

<ChartBackground variant="custom-pattern" />
Did you like the content?