layerchart-svelte5 について
Svelte 5 で LayerChart を使ってチャートを作る開発者向けのパターンリファレンスです。snippet ベースのツールチップやチャートコンテキスト、表示モード、チャート例を扱い、Svelte 5 では `next` タグを使います。
主な機能
- 01`layerchart@next` による Svelte 5 の設定
- 02snippet を使ったツールチップ
- 03チャートコンテキストとグラデーションの snippet
- 04チャート種別に応じたツールチップモード
- 05エリア・棒・円・グラフの参照例
活用シーン
- 01band ツールチップ付き棒グラフの作成
- 02時系列への bisect-x ツールチップ追加
- 03quadtree ツールチップを使った散布図作成
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/layerchart-svelte5を入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/full-patterns.mdgraph-patterns.mdtooltip-modes.mdREADME（原文）English
プロジェクトの README よりこの README の日本語訳はまだありません。以下は英語の原文です。日本語の紹介はページ上部をご覧ください。
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 })}- 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
コメント
Markdown 対応