About svelte-layerchart
Svelte LayerChart is a skill reference for building charts with LayerChart in Svelte. It documents tooltip patterns, chart context, gradients, and modes for different chart types.
Key features
- 01Svelte chart setup guidance
- 02Snippet-based tooltip patterns
- 03Chart context and gradient snippets
- 04Tooltip modes for chart types
- 05References for chart and graph patterns
Use cases
- 01Add tooltips to bar charts
- 02Show nearest-x values on time-series charts
- 03Build scatter plot tooltips
- 04Reference area, pie, calendar, and graph examples
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/svelte-layerchartin 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 READMESvelte LayerChart
Docs: layerchart.com
Install
npm i layerchart d3-scale
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