From svelte-skills
Provides Svelte 5 patterns for LayerChart charts with tooltip snippets, Chart context access, gradients, highlights, and axes. Use for interactive chart components.
npx claudepluginhub spences10/svelte-skills-kit --plugin svelte-skillsThis skill uses the workspace's default tool permissions.
Docs: **next.layerchart.com** (NOT layerchart.com - that's Svelte 4)
Guides creation of interactive D3.js data visualizations like networks, geo maps, force layouts, and custom charts in vanilla JS, React, Vue, Svelte.
Creates interactive charts, dashboards, and data visualizations using Recharts for React/Next.js, Chart.js for Vue/Angular, and D3.js for custom needs.
Generates runnable AntV G2 v5 chart code for bar charts, line charts, pie charts, scatter plots, area charts, and other data visualizations.
Share bugs, ideas, or general feedback.
Docs: next.layerchart.com (NOT layerchart.com - that's Svelte 4)
npm i layerchart@next d3-scale
CRITICAL: Use @next tag. Stable (1.x) is Svelte 4 only.
<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 |