https://github.com/mhkeller/layercake

graphics framework for sveltejs
https://github.com/mhkeller/layercake

cake charts dataviz delicious dessert graphics layercake layers svelte sveltejs

Last synced: 12 days ago
JSON representation

graphics framework for sveltejs

• Host: GitHub
• URL: https://github.com/mhkeller/layercake
• Owner: mhkeller
• License: mit
• Created: 2018-07-17T06:49:33.000Z (almost 7 years ago)
• Default Branch: main
• Last Pushed: 2025-04-11T15:36:13.000Z (12 days ago)
• Last Synced: 2025-04-11T16:53:23.092Z (12 days ago)
• Topics: cake, charts, dataviz, delicious, dessert, graphics, layercake, layers, svelte, sveltejs
• Language: Svelte
• Homepage: https://layercake.graphics
• Size: 43.4 MB
• Stars: 1,553
• Watchers: 12
• Forks: 34
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-d3 - Layer Cake - A graphics framework built on top of Svelte. (Charts)
• awesome-svelte - Layer Cake - A framework for mostly-reusable graphics with svelte (UI Components / Charts)
• awesome-sveltekit - [code

README

        
Layer Cake  [](https://mhkeller.github.io/layercake)

===

> a framework for mostly-reusable graphics with [svelte](https://github.com/sveltejs/svelte)

[![Tests badges](https://github.com/mhkeller/layercake/actions/workflows/node.js.yml/badge.svg)](https://github.com/mhkeller/layercake/actions/workflows/node.js.yml) [![npm version](https://img.shields.io/npm/v/layercake.svg)](https://npmjs.org/package/layercake) [![npm](https://img.shields.io/npm/dm/layercake.svg)](https://www.npmjs.com/package/layercake)

 🍰 [See examples](https://layercake.graphics)

 🍰 [Read the guide](https://layercake.graphics/guide)

 🍰 [API docs](https://layercake.graphics/guide#layercake-props)

 🍰 [View the Component Gallery](https://layercake.graphics/components)

 🍰 [Try the starter template](https://github.com/mhkeller/layercake-template)

## Svelte versions

Works with Svelte 3 through 5. Note the library itself does not use runes but it is compatible with Svelte 5. This will change in [future versions](https://github.com/mhkeller/layercake/issues/156).

## Install

```sh

npm install --save layercake

```

## Example

```svelte

  // 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 }

  ];

  .chart-container {

    width: 100%;

    height: 500px;

  }



  

    

      

      

      

    


    

      

    

    

      

    

  



```


## License

MIT