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>
// 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
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent