a framework for mostly-reusable graphics with svelte
🍰 See examples 🍰 Read the guide 🍰 API docs 🍰 View the Component Gallery 🍰 Try the starter template 🍰
npm install --save layercake
<script>
import { LayerCake, Svg, Html, Canvas } from 'layercake';
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 }];
</script>
<style>
/* Set dimensions on the parent.
The <LayerCake> component will expand to fill it.
*/
.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