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