playbooks

home / skills / spences10 / svelte-skills-kit / layerchart-svelte5

layerchart-svelte5 skill

/plugins/svelte-skills/skills/layerchart-svelte5

This skill implements LayerChart Svelte 5 patterns for tooltips, gradients, highlights, and axes to streamline chart components and interactions.

npx playbooks add skill spences10/svelte-skills-kit --skill layerchart-svelte5

Review the files below or copy the command above to add this skill to your agents.

Files (4)
SKILL.md
1.5 KB
---
name: layerchart-svelte5
# prettier-ignore
description: LayerChart Svelte 5 patterns. Use for chart components with tooltip snippets, Chart context access, and all Svelte 5 snippet patterns for tooltips, gradients, highlights, and axes.
---

# LayerChart Svelte 5

Docs: **next.layerchart.com** (NOT layerchart.com - that's Svelte 4)

## Install

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

**CRITICAL**: Use `@next` tag. Stable (1.x) is Svelte 4 only.

## 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

Overview

This skill provides Svelte 5 patterns and snippets for building LayerChart-based chart components with tooltips, gradients, highlights, and axis helpers. It bundles concise examples and recommended usage for Chart context access, tooltip snippet patterns, and tooltip modes optimized for different chart types. Use it to accelerate charts in Svelte 5 projects with LayerChart@next and d3-scale.

How this skill works

The skill exposes reusable Svelte snippet patterns you drop into <Chart> components: Chart context, Tooltip.Root snippets, Svg children like Area and Highlight, and gradient snippets. It relies on LayerChart@next and uses snippet blocks such as {#snippet children({ data })} for tooltip content and {#snippet children({ context })} to access chart internals. Tooltip modes are configurable via tooltip={{ mode: '...' }}.

When to use it

  • Building time-series area or line charts that need bisect-x tooltips.
  • Creating bar charts that use band tooltips and scaleBand layouts.
  • Adding interactive scatter plots that require quadtree nearest-point lookups.
  • Implementing reusable Svelte 5 chart components with gradients and highlights.
  • Needing typed data inside tooltip snippets for IDE/type safety.

Best practices

  • Install LayerChart with the @next tag (npm i layerchart@next d3-scale) — stable 1.x targets Svelte 4.
  • Use {#snippet children({ data })} for tooltip rendering rather than let:data to match Svelte 5 snippet patterns.
  • Pick tooltip mode to match geometry: 'band' for bars, 'bisect-x' for time series, 'quadtree' variants for nearest-point interactions.
  • Type snippet props when using TypeScript: {#snippet children({ data }: { data: MyType })}.
  • Keep Svg children simple (Area, Highlight) and provide classes for fills/gradients to separate style from logic.

Example use cases

  • A Svelte 5 dashboard area chart with bisect-x tooltips and a gradient fill.
  • Bar chart component using tooltip mode 'band' and scaleBand to snap tooltips to bars.
  • Scatter plot with 'quadtree' tooltip mode to show nearest point details on hover.
  • Reusable Chart wrapper exposing context via {#snippet children({ context })} to build custom axes or legends.
  • Annotated time-series showing highlights for selected points with <Highlight points /> inside Svg.

FAQ

Which LayerChart package should I install for Svelte 5?

Install layerchart@next (npm i layerchart@next d3-scale). The @next tag contains Svelte 5 compatible releases.

How do I render tooltip content inside Svelte 5 snippets?

Use the snippet pattern {#snippet children({ data })} to receive data for Tooltip.Root. Do not use let:data.