layercake

Layer Cake [<img src="https://raw.githubusercontent.com/mhkeller/layercake.graphics/main/static/layercake-logo-500x400.png" width="115" align="right" alt="layercake-logo">](https://mhkeller.github.io/layercake) ===

Usage no npm install needed!

<script type="module">
  import layercake from 'https://cdn.skypack.dev/layercake';
</script>

README

Layer Cake layercake-logo

a framework for mostly-reusable graphics with svelte

Travis (.org) branch npm version

🍰 See examples 🍰 Read the guide 🍰 API docs 🍰 Component gallery 🍰 Starter template 🍰

Install

npm install --save 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