layerchart-svelte5

📁 spences10/svelte-skills-kit 📅 Jan 20, 2026

总安装量

周安装量

#4918

全站排名

安装命令

npx skills add https://github.com/spences10/svelte-skills-kit --skill layerchart-svelte5

Agent 安装分布

opencode 32

claude-code 31

gemini-cli 27

codex 22

cursor 19

Skill 文档

LayerChart 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 })} – NOT let: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

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台