svelte-layerchart

Name: svelte-layerchart
Author: spences10

53installs2forks

How to install svelte-layerchart?

spences10/svelte-skills-kit/svelte-layerchart

$npx -y skills add spences10/svelte-skills-kit --skill svelte-layerchart

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# Svelte LayerChart
2
3	Docs: layerchart.com
4
5	## Install
6
7	```bash
8	npm i layerchart d3-scale
9	```
10
11	## Quick Start
12
13	```svelte
14	<Chart {data} x="date" y="value" tooltip={{ mode: 'bisect-x' }}>
15	<Svg><Area class="fill-primary/20" /><Highlight points /></Svg>
16	<Tooltip.Root>{#snippet children({ data })}{data.value}{/snippet}</Tooltip.Root>
17	</Chart>
18	```
19
20	## Core Patterns
21
22	- Tooltip: `{#snippet children({ data })}` - NOT `let:data`
23	- Chart context: `{#snippet children({ context })}`
24	- Gradient: `{#snippet children({ gradient })}`
25	- Enable tooltip: `tooltip={{ mode: 'band' \| 'bisect-x' }}`
26	- Type data: `{#snippet children({ data }: { data: MyType })}`
27
28	## Tooltip Modes
29
30	\| Mode \| Use Case \|
31	\| ------------ \| ---------------------- \|
32	\| `band` \| Bar charts (scaleBand) \|
33	\| `bisect-x` \| Time-series area/line \|
34	\| `quadtree-x` \| Area (nearest x) \|
35	\| `quadtree` \| Scatter plots \|
36
37	## References
38
39	- [full-patterns.md](references/full-patterns.md) - Area, Bar, Pie,
40	Calendar
41	- [tooltip-modes.md](references/tooltip-modes.md) - All modes
42	- [graph-patterns.md](references/graph-patterns.md) - ForceGraph,
43	zoom/pan

People who liked this also viewed

6 picks

Type

svelte-layerchart

53installs2forks

View on GitHub

How to install svelte-layerchart?

spences10/svelte-skills-kit/svelte-layerchart

$npx -y skills add spences10/svelte-skills-kit --skill svelte-layerchart

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# Svelte LayerChart
2
3	Docs: layerchart.com
4
5	## Install
6
7	```bash
8	npm i layerchart d3-scale
9	```
10
11	## Quick Start
12
13	```svelte
14	<Chart {data} x="date" y="value" tooltip={{ mode: 'bisect-x' }}>
15	<Svg><Area class="fill-primary/20" /><Highlight points /></Svg>
16	<Tooltip.Root>{#snippet children({ data })}{data.value}{/snippet}</Tooltip.Root>
17	</Chart>
18	```
19
20	## Core Patterns
21
22	- Tooltip: `{#snippet children({ data })}` - NOT `let:data`
23	- Chart context: `{#snippet children({ context })}`
24	- Gradient: `{#snippet children({ gradient })}`
25	- Enable tooltip: `tooltip={{ mode: 'band' \| 'bisect-x' }}`
26	- Type data: `{#snippet children({ data }: { data: MyType })}`
27
28	## Tooltip Modes
29
30	\| Mode \| Use Case \|
31	\| ------------ \| ---------------------- \|
32	\| `band` \| Bar charts (scaleBand) \|
33	\| `bisect-x` \| Time-series area/line \|
34	\| `quadtree-x` \| Area (nearest x) \|
35	\| `quadtree` \| Scatter plots \|
36
37	## References
38
39	- [full-patterns.md](references/full-patterns.md) - Area, Bar, Pie,
40	Calendar
41	- [tooltip-modes.md](references/tooltip-modes.md) - All modes
42	- [graph-patterns.md](references/graph-patterns.md) - ForceGraph,
43	zoom/pan

People who liked this also viewed

6 picks

Type