spences10 Svelte LayerChart
Docs: layerchart.com
Install
npm i layerchart d3-scale
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 })}- NOTlet: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 - Area, Bar, Pie, Calendar
- tooltip-modes.md - All modes
- graph-patterns.md - ForceGraph, zoom/pan