Svelte 5 port
| |

Background

Documentation Index

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

Style chart backgrounds with built-in and custom patterns.

Usage

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

Variants

Dots

Grid

Cross Hatch

Diagonal Lines

Plus

Falling Triangles

4-Pointed Star

Tiny Checkers

Overlapping Circles

Wiggle Lines

Bubbles

Custom Variant

Add your own style: define an SVG <pattern> and register it as a variant.

  1. Add the new name to the BackgroundVariant union in src/lib/registry/ui/layerchart-background/types.ts.
  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/lib/registry/ui/layerchart-background/types.ts 
export type BackgroundVariant =
	| 'dots'
	| 'grid'
	| 'cross-hatch'
	| 'diagonal-lines'
	| 'plus'
	| 'falling-triangles'
	| '4-pointed-star'
	| 'tiny-checkers'
	| 'overlapping-circles'
	| 'wiggle-lines'
	| 'bubbles'
	| 'custom-pattern';
src/lib/registry/ui/layerchart-background/patterns/custom-pattern.svelte 
<script lang="ts">
	let { id }: { id: string } = $props();
</script>

<pattern {id} x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
	<path
		class="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"
		fill-opacity="0.35"
	/>
</pattern>
src/lib/registry/ui/layerchart-background/pattern-map.ts 
import type { Component } from 'svelte';
import Bubbles from './patterns/bubbles.svelte';
import CrossHatch from './patterns/cross-hatch.svelte';
import DiagonalLines from './patterns/diagonal-lines.svelte';
import DotsPattern from './patterns/dots.svelte';
import FallingTriangles from './patterns/falling-triangles.svelte';
import FourPointedStar from './patterns/four-pointed-star.svelte';
import GridPattern from './patterns/grid.svelte';
import OverlappingCircles from './patterns/overlapping-circles.svelte';
import Plus from './patterns/plus.svelte';
import TinyCheckers from './patterns/tiny-checkers.svelte';
import WiggleLines from './patterns/wiggle-lines.svelte';
import CustomPattern from './patterns/custom-pattern.svelte';
import type { BackgroundVariant, PatternProps } from './types.js';

export const PATTERN_MAP: Record<BackgroundVariant, Component<PatternProps>> = {
	dots: DotsPattern,
	grid: GridPattern,
	plus: Plus,
	bubbles: Bubbles,
	'cross-hatch': CrossHatch,
	'diagonal-lines': DiagonalLines,
	'falling-triangles': FallingTriangles,
	'4-pointed-star': FourPointedStar,
	'tiny-checkers': TinyCheckers,
	'overlapping-circles': OverlappingCircles,
	'wiggle-lines': WiggleLines,
	'custom-pattern': CustomPattern
};

Then use it in any chart:

<EvilLineChart xDataKey="month" {data} {chartConfig} backgroundVariant="custom-pattern" />
Was this page helpful?