a framework for mostly-reusable graphics with svelte
🍰 See examples 🍰 Read the guide 🍰 API docs 🍰 Starter template 🍰
<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>
.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>Layer Cake lives in your devDependencies alongside Svelte, which it lists as a peerDependency.
npm install --save-dev layercakeMIT