// Build Svelte LayerChart components. Use for tooltip snippets, Chart context access, gradients, highlights, axes, and Svelte 5 snippet patterns.
Svelte 5 core best practices. Use when creating, editing, or reviewing .svelte, .svelte.ts, or .svelte.js files. Routes to deeper Svelte skills.
Svelte template directive guidance. Use when working with snippets, attachments, dynamic HTML, declaration tags, debugging tags, or global DOM events.
Implement SvelteKit remote functions. Use for query(), query.live(), form(), command(), and prerender() patterns in .remote.ts files.
SvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.
Build Svelte components. Use for Svelte custom elements, component libraries (Bits UI, Ark UI, Melt UI), form patterns, or third-party integration.
Implement Svelte 5 runes correctly. Use for reactive state, props, effects, $state.raw, $derived.by, $props, and $bindable.
| name | svelte-layerchart |
| description | Build Svelte LayerChart components. Use for tooltip snippets, Chart context access, gradients, highlights, axes, and Svelte 5 snippet patterns. |
| metadata | {"last_updated":"2026-05-31","verified_against":"Svelte 5 official docs and sveltejs/svelte#18282"} |
Docs: layerchart.com
npm i layerchart d3-scale
<Chart {data} x="date" y="value" tooltip={{ mode: 'bisect-x' }}>
<Svg><Area class="fill-primary/20" /><Highlight points /></Svg>
<Tooltip.Root>{#snippet children({ data })}{data.value}{/snippet}</Tooltip.Root>
</Chart>
{#snippet children({ data })} - NOT let:data{#snippet children({ context })}{#snippet children({ gradient })}tooltip={{ mode: 'band' | 'bisect-x' }}{#snippet children({ data }: { data: MyType })}| Mode | Use Case |
|---|---|
band | Bar charts (scaleBand) |
bisect-x | Time-series area/line |
quadtree-x | Area (nearest x) |
quadtree | Scatter plots |