a headless visualization framework for mostly-reusable graphics with svelte
🍰 See examples 🍰 Read the guide 🍰 API docs 🍰 View the Component Gallery 🍰 Try the starter template
Works with version 5, see this issue. Users needing Svelte 3 or Svelte 4 support should use version 8.4.4.
All of the examples use Rune syntax but the Svelte 3 and Svelte 4 versions are still available at the documentation archive.
npm install --save layercake<script>// The library provides a main wrapper component// and a bunch empty layout components...import { LayerCake, Svg, Html, Canvas } from'layercake';// ...that you fill with your own chart components,// that live inside your project and which you// can copy and paste from here as starting points.importAxisXfrom'./components/AxisX.svelte';importAxisYfrom'./components/AxisY.svelte';importLinefrom'./components/Line.svelte';importScatterfrom'./components/Scatter.svelte';importLabelsfrom'./components/Labels.svelte';constdata= [ { x:0, y:1 }, { x:1, y:2 }, { x:2, y:3 } ];</script>
<style>.chart-container {width: 100%;height: 500px; }</style>
<divclass="chart-container">
<LayerCakex='x'y='y'
{data}
>
<Svg>
<AxisX/>
<AxisY/>
<Linecolor='#f0c'/>
</Svg>
<Canvas>
<Scattercolor='#0fc'/>
</Canvas>
<Html>
<Labels/>
</Html>
</LayerCake>
</div>MIT