OpenSkillIndex← back to search
claude-code

Asi layerchart-svelte5

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.

install
source · Clone the upstream repo
git clone https://github.com/plurigrid/asi
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/plurigrid/asi "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/layerchart-svelte5" ~/.claude/skills/plurigrid-asi-layerchart-svelte5 && rm -rf "$T"
manifest: skills/layerchart-svelte5/SKILL.md
source content

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 })}
    - 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

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

References