Layer Cake

A graphics framework for Svelte

ChartingSvelte
mhkeller/layercakelayercake.graphicslayercake

README

Layer Cake  


a framework for mostly-reusable graphics with svelte


🍰 See examples
🍰 Read the guide
🍰 API docs
🍰 View the Component Gallery
🍰 Try the starter template

Svelte versions


Works Svelte 3 and Svelte 4

Install


  1. ```sh
  2. npm install --save layercake
  3. ```

Example


  1. ```svelte
  2. <script>
  3.   // The library provides a main wrapper component
  4.   // and a bunch empty layout components...
  5.   import { LayerCake, Svg, Html, Canvas } from 'layercake';

  7.   // ...that you fill with your own chart components,
  8.   // that live inside your project and which you
  9.   // can copy and paste from here as starting points.
  10.   import AxisX from './components/AxisX.svelte';
  11.   import AxisY from './components/AxisY.svelte';
  12.   import Line from './components/Line.svelte';
  13.   import Scatter from './components/Scatter.svelte';
  14.   import Labels from './components/Labels.svelte';

  16.   const data = [{ x: 0, y: 1 }, { x: 1, y: 2 }, { x: 2, y: 3 }];
  17. </script>

  19. <style>
  20.   .chart-container {
  21.     width: 100%;
  22.     height: 500px;
  23.   }
  24. </style>

  26. <div class="chart-container">
  27.   <LayerCake
  28.     x='x'
  29.     y='y'
  30.     {data}
  31.   >
  32.     <Svg>
  33.       <AxisX/>
  34.       <AxisY/>
  35.       <Line color='#f0c'/>
  36.     </Svg>

  38.     <Canvas>
  39.       <Scatter color='#0fc'/>
  40.     </Canvas>

  42.     <Html>
  43.       <Labels/>
  44.     </Html>
  45.   </LayerCake>
  46. </div>
  47. ```

License


MIT