---

name: layerchart-svelte5

prettier-ignore

description: LayerChart Svelte 5 patterns. Use for chart components with tooltip snippets, Chart context access, and all Svelte 5 snippet patterns for tooltips, gradients, highlights, and axes.

LayerChart Svelte 5

Use next.layerchart.com docs (NOT layerchart.com - that's Svelte 4).

Quick Start

Copy<Chart {data} x="date" y="value" tooltip={{ mode: 'bisect-x' }}>
	<Svg>
		<Axis placement="left" grid rule />
		<Area
			class="fill-primary/20"
			line={{ class: 'stroke-primary' }}
		/>
		<Highlight points lines />
	</Svg>
	<Tooltip.Root>
		{#snippet children({ data })}
			<Tooltip.Header>{data.date}</Tooltip.Header>
			<Tooltip.Item label="Value" value={data.value} />
		{/snippet}
	</Tooltip.Root>
</Chart>

Core Patterns

• Tooltip: {#snippet children({ data })} - NOT let:data
• Chart context: {#snippet children({ context })}
• Gradient: {#snippet children({ gradient })}
• Must enable: tooltip={{ mode: 'band' | 'bisect-x' | 'quadtree' }}

Tooltip Modes

Type the Snippet

Copy{#snippet children({ data }: { data: MyDataType })}

References

• references/full-patterns.md - All patterns
• references/tooltip-modes.md - Mode details
• Clone: git clone --branch next https://github.com/techniq/layerchart.git