||

Background

Customize the background of your charts with various styles and patterns

Usage

 
<EvilLineChart
  xDataKey="month"
  data={data}
  chartConfig={chartConfig}
  backgroundVariant="dots"
/>

Variants

Dots

backgroundVariant='dots'

Grid

backgroundVariant='grid'

Cross Hatch

backgroundVariant='cross-hatch'

Diagonal Lines

backgroundVariant='diagonal-lines'

Plus

backgroundVariant='plus'

Falling Triangles

backgroundVariant='falling-triangles'

4-Pointed Star

backgroundVariant='4-pointed-star'

Tiny Checkers

backgroundVariant='tiny-checkers'

Overlapping Circles

backgroundVariant='overlapping-circles'

Wiggle Lines

backgroundVariant='wiggle-lines'

Bubbles

backgroundVariant='bubbles'

Custom Variant

You can add your own background style by defining an SVG <pattern> and registering it as a new variant.

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

Example custom pattern:

src/registry/ui/background.tsx
export type BackgroundVariant =
  | "dots"
  | "grid"
  | "cross-hatch"
  | "custom-pattern";
  // ...other variants

const CustomPattern = ({ id }: { id: string }) => (
  <pattern
    id={id}
    x="0"
    y="0"
    width="24"
    height="24"
    patternUnits="userSpaceOnUse"
  >
    <path
      className="text-border dark:text-border"
      d="M12 2l2.2 4.6L19 9l-4.8 2.4L12 16l-2.2-4.6L5 9l4.8-2.4L12 2z"
      fill="currentColor"
      fillOpacity="0.35"
    />
  </pattern>
);

const PATTERN_MAP: Record<BackgroundVariant, React.FC<{ id: string }>> = {
  dots: DotsPattern,
  grid: GridPattern,
  "cross-hatch": CrossHatchPattern,
  "custom-pattern": CustomPattern,
  // ...other variants
};

Then use your new variant in any chart:

<EvilLineChart
  xDataKey="month"
  data={data}
  chartConfig={chartConfig}
  backgroundVariant="custom-pattern"
/>
Did you like the content?