About svelte-layerchart
Svelte LayerChart is a charting library for Svelte developers, documented through usage patterns for chart snippets and tooltips. Its references cover common chart types as well as graph interactions such as zoom and pan.
Key features
- 01Svelte charting library
- 02Snippet-based tooltip and chart context
- 03Band and bisect-x tooltip modes
- 04Quadtree modes for area and scatter plots
- 05References for area, bar, pie, and calendar charts
- 06ForceGraph zoom and pan patterns
Use cases
- 01Building bar charts with band tooltips
- 02Showing values on time-series charts
- 03Creating scatter plot tooltips
- 04Adding zoom and pan to graph views
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