# Svelte Layerchart

> Svelte LayerChart patterns. Use for chart components with tooltip snippets, Chart context access, and all Svelte 5 snippet patterns for tooltips, gradients, highlights, and axes.

- Skill: `spences10/svelte-layerchart` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds add spences10/svelte-layerchart`
- Raw SKILL.md: https://api.skillmd.com/api/skills/spences10/svelte-layerchart/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: spences10 (https://skillmd.com/u/spences10)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/spences10/svelte-layerchart

---


# Svelte LayerChart

Docs: **layerchart.com**

## Install

```bash
npm i layerchart d3-scale
```

## Quick Start

```svelte
<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](references/full-patterns.md) - Area, Bar, Pie,
  Calendar
- [tooltip-modes.md](references/tooltip-modes.md) - All modes
- [graph-patterns.md](references/graph-patterns.md) - ForceGraph,
  zoom/pan