Layer Cake

a framework for mostly-reusable graphics with svelte

🍰 See examples 🍰 Read the guide 🍰 API docs 🍰

Example

import LayerCake from 'LayerCake';

const myCake = new LayerCake({
    padding: { top: 0, right: 0, bottom: 20, left: 25 },
    x: 'x',
    y: 'y',
    yDomain: [0, null],
    data: points,
    target: document.getElementById('chart-target')
  })

// Returns a Svelte store that you can use on your own own...
console.log(myCake.get());

// Or to render out components
myCake
  .svgLayers([
    { component: AxisX },
    { component: AxisY },
    { component: Line },
    { component: Area }
  ])
  .htmlLayers([
    { component: TextAnnotations, opts: { annos } },
  ])
  .render();

Install

LayerCake lives in your devDependencies alongside Svelte, which it lists as a peerDependency.

npm install --save-dev layercake

Using in your project

It currently only exports an ES6 module since I've been using it in the basic Svelte and Sapper templates. But if you have another setup or other ideas about how this library could work in your project flow let me know on this issue.

License

MIT