layerchart-svelte5

spences10's avatarfrom spences10

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.

⭐1stars🔀0forks📁View on GitHub🕐Updated Jan 10, 2026
[Code Generation]

When & Why to Use This Skill

This Claude skill provides specialized patterns and code snippets for LayerChart optimized for Svelte 5. It assists developers in implementing advanced data visualizations by leveraging Svelte 5's new snippet syntax for tooltips, gradients, and chart contexts, ensuring modern and performant charting implementations.

Use Cases

  • Case 1: Rapidly generating Svelte 5 chart components with integrated tooltip snippets and context access.
  • Case 2: Implementing specific tooltip modes like bisect-x for time-series data or quadtree for high-performance scatter plots.
  • Case 3: Migrating legacy Svelte 4 LayerChart code to the new Svelte 5 snippet-based patterns.
  • Case 4: Customizing chart aesthetics using Svelte 5 snippets for gradients, highlights, and rule-based axes.
namelayerchart-svelte5
descriptionLayerChart 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

Use next.layerchart.com docs (NOT layerchart.com - that's Svelte 4).

Quick Start

<Chart {data} x="date" y="value" tooltip={{ mode: 'bisect-x' }}>
	<Svg>
		<Axis placement="left" grid rule />
		<Area
			class="fill-primary/20"
			line={{ class: 'stroke-primary' }}
		/>
		<Highlight points lines />
	</Svg>
	<Tooltip.Root>
		{#snippet children({ data })}
			<Tooltip.Header>{data.date}</Tooltip.Header>
			<Tooltip.Item label="Value" value={data.value} />
		{/snippet}
	</Tooltip.Root>
</Chart>

Core Patterns

  • Tooltip: {#snippet children({ data })} - NOT let:data
  • Chart context: {#snippet children({ context })}
  • Gradient: {#snippet children({ gradient })}
  • Must enable: tooltip={{ mode: 'band' | 'bisect-x' | 'quadtree' }}

Tooltip Modes

Mode Use Case
band Bar charts (scaleBand)
bisect-x Time-series area/line
quadtree-x Area (nearest x)
quadtree Scatter plots

Type the Snippet

{#snippet children({ data }: { data: MyDataType })}

References