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.
import AxisX from './components/AxisX.svelte';
import AxisY from './components/AxisY.svelte';
import Line from './components/Line.svelte';
import Scatter from './components/Scatter.svelte';
import Labels from './components/Labels.svelte';
const data = [
{ x: 0, y: 1 },
{ x: 1, y: 2 },
{ x: 2, y: 3 }
];
</script>
<style>
.chart-container {
width: 100%;
height: 500px;
}
</style>
<div class="chart-container">
<LayerCake
x='x'
y='y'
{data}
>
<Svg>
<AxisX/>
<AxisY/>
<Line color='#f0c'/>
</Svg>
<Canvas>
<Scatter color='#0fc'/>
</Canvas>
<Html>
<Labels/>
</Html>
</LayerCake>
</div>MIT