Registry / data / layercake

layercake

JSON →
library0.4.0jsnpmunverified

LayerCake is a lightweight, opinionated graphics framework designed for building highly customizable and reusable data visualizations with Svelte. It emphasizes a clear separation between the data layering, scaling, and rendering logic, allowing developers to bring their own Svelte components for charts and annotations. The current stable version is 10.0.2, with major versions released somewhat frequently to align with Svelte's evolution (e.g., Svelte 5 'Runes' support in v9/v10). Key differentiators include its Svelte-native component approach, making it highly composable and performant within a Svelte application, and its flexibility in rendering to SVG, HTML, or Canvas elements without dictating visual styles.

dataweb-framework
npm install layercake
github ↗package ↗homepage ↗
INSTALL
IMPORT
SIG · LAYERCAKE
L
layercake
datajavascriptv0.4.0
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

LayerCake
✓ import { LayerCake } from 'layercake';
✗ import LayerCake from 'layercake';
The main wrapper component is a named export. It is not a default export.
Svg
✓ import { Svg } from 'layercake';
✗ const Svg = require('layercake').Svg;
ESM named import is the standard for Svelte components. CommonJS `require` is not typically used for Svelte component imports directly.
Html
✓ import { Html } from 'layercake';
✗ import { HtmlComponent } from 'layercake';
Common layout components like `Html` and `Canvas` are named exports. Do not append 'Component' to their names.

This example demonstrates how to set up a basic LayerCake chart using `LayerCake` as the primary wrapper, and rendering different chart elements to `Svg`, `Canvas`, and `Html` containers. It also shows how to define accessor functions for data properties.

<script lang="ts"> 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, label: 'Point A' }, { x: 1, y: 2, label: 'Point B' }, { x: 2, y: 3, label: 'Point C' } ]; // Example of how you might pass context values as slot props // If you define 'x' and 'y' props on LayerCake, these will be available // to descendant components via context or slot props. function getX(d: typeof data[0]) { return d.x; } function getY(d: typeof data[0]) { return d.y; } </script> <style> .chart-container { width: 100%; max-width: 800px; height: 500px; border: 1px solid #eee; margin: 20px auto; } </style> <div class="chart-container"> <LayerCake x={getX} y={getY} {data} > <Svg let:x let:y let:width let:height> <!-- Svg provides scales and dimensions via slot props --> <AxisX/> <AxisY/> <Line color='#f0c'/> </Svg> <Canvas let:xScale let:yScale let:data> <!-- Canvas components draw to a canvas element --> <Scatter color='#0fc'/> </Canvas> <Html> <!-- Html components render standard HTML elements --> <Labels/> </Html> </LayerCake> </div>
Debug
Known issues
breakingLayerCake v10.0.0 removed the `innerElement` binding from the `Svg` component. If you were relying on this binding, your code will break.
fix
Review your `Svg` component usage. The `innerElement` binding is no longer available. Most use cases for this binding might be achievable through direct DOM manipulation within Svelte or by rethinking the component structure.
affects: >=10.0.0
breakingLayerCake v9.0.0 introduced breaking changes related to sorting domains and updated layout components to use Svelte 5 'Runes' syntax. This may require updates to custom layout components and how domains are handled.
fix
Consult the v9.0.0 changelog. Ensure your Svelte setup supports Runes, and update any custom components that interact with layout or domain sorting. If using Svelte 3 or 4, stick to LayerCake v8.4.4 or older.
affects: >=9.0.0
breakingLayerCake v8.0.0 changed default behavior for ordinal domains, sorting them by default. This was later made optional in v8.1.0.
fix
If you require unsorted ordinal domains in v8.0.0, you will need to upgrade to v8.1.0 or newer and use the new option to disable sorting. For earlier versions, review the changelog for `sorted` prop usage.
affects: 8.0.0
gotchaLayerCake versions 9.0.0 and above are primarily designed for Svelte 5 and utilize Svelte's 'Runes' syntax. Earlier versions (up to 8.4.4) are compatible with Svelte 3 and Svelte 4.
fix
If targeting Svelte 5, use LayerCake v9.0.0 or higher. If you need Svelte 3 or 4 compatibility, explicitly install `layercake@8.4.4`. Consult the `layercake-prerunes` documentation archive for Svelte 3/4 examples.
affects: >=9.0.0
gotchaLayerCake relies heavily on Svelte's context API and slot props for component composition. Understanding these Svelte features is crucial for effective use.
fix
Familiarize yourself with Svelte's context and slot prop mechanisms. The LayerCake examples and guide extensively demonstrate their usage for passing scales, dimensions, and data down the component tree.
affects: >=1.0.0
Errors
Common errors & fixes
Error: 'Component' is not a constructor (when importing LayerCake components in a Svelte 3/4 project with LayerCake v9+)
Attempting to use LayerCake v9.0.0 or higher with Svelte 3 or Svelte 4. LayerCake v9+ uses Svelte 5 Runes, which are incompatible with older Svelte versions.
fix
Downgrade LayerCake to `8.4.4` to maintain compatibility with Svelte 3/4: `npm install layercake@8.4.4`.
TypeError: Cannot read properties of undefined (reading 'xScale') in a custom chart component.
A custom chart component is trying to access `xScale` from LayerCake's context, but it's not being provided, likely due to incorrect placement or missing `let:` slot prop definitions.
fix
Ensure your custom component is nested within a LayerCake layout component (`<Svg>`, `<Html>`, `<Canvas>`) and that you are correctly receiving context values via `getContext` or using `let:xScale` on the slot if it's exposed that way, as shown in the LayerCake examples.
SyntaxError: Unexpected token 'export' (when trying to `require('layercake')` in a CommonJS environment)
LayerCake is published as an ESM-first package, and directly `require()`ing it in a pure CommonJS environment might fail without proper transpilation or configuration.
fix
Prefer ESM `import { ... } from 'layercake';` syntax. If you are forced to use CommonJS, ensure your build setup correctly handles ESM imports (e.g., Babel or Webpack configured with `esm` support or consider dynamic `import('layercake')`).
Upgrade
Version history
0.4.0latest on npm
Audit
Dependencies
svelterequiredCore UI framework for LayerCake components.
typescriptoptionalUsed for type checking and development, as LayerCake ships with types.
Agent activity
4 hits · last 30 days
node
4
Resources
githubhttps://github.com/mhkeller/layercake ↗
packagehttps://www.npmjs.com/package/layercake ↗
homepagehttps://layercake.graphics ↗