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
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Chart
✓ import { Chart } from 'layerchart'
✗ const Chart = require('layerchart')
LayerChart components are typically imported as named ES module exports. CommonJS require() is not supported.
Line, Axis
✓ import { Line, Axis } from 'layerchart'
✗ import Line from 'layerchart'; import Axis from 'layerchart'
Individual components are named exports, not default exports. Avoid importing them separately if they are from the same package.
Layer
✓ import { Layer } from 'layerchart'
✗ import { LayerComponent } from 'layerchart'
Many core components share simple names. Refer to documentation for exact component names.
This quickstart renders a basic line chart with automatically scaled X (time) and Y (linear) axes using randomly generated data. It demonstrates the fundamental Chart, Layer, Axis, and Line components.
<script lang="ts">
import { Chart, Layer, Axis, Line } from 'layerchart';
import { scaleLinear, scaleTime } from 'd3-scale';
// Generate dummy data
const generateData = (count: number) => {
const data = [];
const startDate = new Date('2023-01-01');
for (let i = 0; i < count; i++) {
const date = new Date(startDate.getTime());
date.setDate(startDate.getDate() + i);
data.push({
date: date,
value: Math.random() * 100
});
}
return data;
};
const data = generateData(30);
const xDomain = [data[0].date, data[data.length - 1].date];
const yDomain = [0, 100];
const xScale = scaleTime().domain(xDomain);
const yScale = scaleLinear().domain(yDomain);
// Define accessors for LayerCake
const x = (d: { date: Date }) => d.date;
const y = (d: { value: number }) => d.value;
</script>
<style>
.chart-container {
height: 300px;
width: 100%;
border: 1px solid #ccc;
box-sizing: border-box;
padding: 20px;
}
</style>
<div class="chart-container">
<Chart
{data}
x={x}
y={y}
xScale={xScale}
yScale={yScale}
padding={{
left: 40,
right: 20,
top: 20,
bottom: 40
}}
>
<Layer>
<Axis type="x" format="%b %d" />
<Axis type="y" />
<Line stroke="steelblue" stroke-width={2} />
</Layer>
</Chart>
</div>
Debug
Known issues
breakingVersion 2.0.0 (currently in `2.0.0-next.x` pre-release) introduces significant breaking changes. Key components like `ChartState` have changed (e.g., `isVertical` removed, `valueAxis` added) and event names have been lowercased for Svelte 5 compatibility (e.g., `onTooltipClick` to `ontooltipclick`). The `tooltip` prop on charts has been renamed to `tooltipContext`.fixReview the v1 -> v2 migration guide on the LayerChart website. Update property names (`tooltip` to `tooltipContext`, `isVertical` usage) and adjust event handler names to lowercase.
affects: >=2.0.0-next
breakingThe `Bar` and `Bars` components in `2.x` have replaced the `inset: number` prop with `insets: Insets | undefined` to allow for more granular control over bar padding. Additionally, `2.0.0-next.50` changed the default `tickSpacing` for categorical band scales from a reduced set to showing all ticks by default.fixMigrate `inset=n` to `insets={x: n / 2}` for vertical bars or `insets={y: n / 2}` for horizontal bars. For categorical band scales, explicitly set `tickSpacing={80}` or another desired value to re-enable tick reduction. affects: >=2.0.0-next
gotchaLayerChart components, especially `<Chart>`, require explicit dimensions (height, width) on their containing HTML element to render correctly. Without defined dimensions, the chart may render with zero or negative height, leading to an empty or distorted visualization.fixEnsure the container `div` for your chart has a defined `height` and `width` in CSS (e.g., `height: 300px; width: 100%;`).
affects: >=1.0.0
gotchaWhen upgrading Svelte to versions 5.36.0 or higher, users may encounter `effect_update_depth_exceeded` errors, causing applications using LayerChart to hang. This appears to be a Svelte internal reactivity issue interacting with LayerChart's update mechanisms.fixThis issue is actively being investigated. As a temporary measure, consider pinning your Svelte version to `<5.36.0` or monitoring LayerChart and Svelte release notes for a fix. There are ongoing discussions and potential workarounds in the GitHub issue tracker for LayerChart and Svelte.
affects: >=5.36.0 of svelte
Errors
Common errors & fixes
Error: Cannot find module 'layerchart'
The `layerchart` package is not installed or not correctly linked in your project.
fixRun `npm install layerchart` or `pnpm install layerchart` to add the package to your project dependencies.
[LayerChart] Target div has zero or negative height (-24). Did you forget to set an explicit height in CSS on the container?
The HTML container element for the LayerChart component does not have a defined height, preventing the chart from calculating its dimensions.
fixAdd CSS `height` and `width` properties to the chart's container element, for example: `<div style="height: 300px; width: 100%;"><Chart ... /></div>`.
TypeError: Cannot read properties of undefined (reading 'x')
This usually indicates that the `x` or `y` accessor functions are incorrectly defined or that the data provided to the `Chart` component is not in the expected format (e.g., missing the properties accessed by `x` or `y`).
fixVerify that your data objects contain the properties accessed by your `x` and `y` functions (e.g., `d => d.value` requires a `value` property on each data point). Ensure `data` is an array of objects.
Property 'valueAxis' does not exist on type 'ChartState'.
You are attempting to access `valueAxis` on `ChartState` in LayerChart v1.x, or `isVertical` in v2.x. This indicates an API mismatch between major versions.
fixIf on LayerChart v1.x, use `isVertical`. If on LayerChart v2.x (pre-release), use `valueAxis` and consult the v2 migration guide for other API changes.
Audit
Dependencies
svelterequiredRequired peer dependency for Svelte components.
d3-scaleoptionalFrequently used with LayerChart for scale definitions, though not a direct peer dependency.
d3-arrayoptionalOften necessary for data manipulation in conjunction with LayerChart, though not a direct peer dependency.