About layerchart-svelte5
A pattern reference for using LayerChart with Svelte 5, intended for developers building charts. It documents snippet-based tooltip and chart context patterns, tooltip modes, and chart examples; Svelte 5 use requires the `next` package tag.
Key features
- 01Svelte 5 setup with `layerchart@next`
- 02Snippet-based tooltip patterns
- 03Chart context and gradient snippets
- 04Tooltip modes by chart type
- 05Area, bar, pie, and graph references
Use cases
- 01Build a bar chart with band tooltips
- 02Add bisect-x tooltips to time series
- 03Create scatter plots with quadtree tooltips
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/layerchart-svelte5in Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
references/full-patterns.mdgraph-patterns.mdtooltip-modes.mdDetails
From the project READMELayerChart Svelte 5
Docs: next.layerchart.com (NOT layerchart.com - that's Svelte 4)
Install
npm i layerchart@next d3-scale
CRITICAL: Use @next tag. Stable (1.x) is Svelte 4 only.
Quick Start
<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>
Core Patterns
- Tooltip:
{#snippet children({ data })}- NOTlet:data - Chart context:
{#snippet children({ context })} - Gradient:
{#snippet children({ gradient })} - Enable tooltip:
tooltip={{ mode: 'band' | 'bisect-x' }} - Type data:
{#snippet children({ data }: { data: MyType })}
Tooltip Modes
| Mode | Use Case |
|---|---|
band | Bar charts (scaleBand) |
bisect-x | Time-series area/line |
quadtree-x | Area (nearest x) |
quadtree | Scatter plots |
References
- full-patterns.md - Area, Bar, Pie, Calendar
- tooltip-modes.md - All modes
- graph-patterns.md - ForceGraph, zoom/pan
Comments
Markdown supported