{"id":13428,"library":"layerchart","title":"LayerChart Svelte Chart Components","description":"LayerChart is a comprehensive collection of composable data visualization components and utilities for Svelte, built upon the Layer Cake framework. It enables developers to construct a diverse array of charts, including Cartesian (Bar, Area, Stack, Scatter), Radial (Pie, Arc, Sunburst), Hierarchy, Graph (Sankey), and Geo (Choropleth, Globe) visualizations. The library currently has a stable release at `1.0.13`, with active development ongoing for `2.0.0-next.x` versions, which introduce significant new features like enhanced HTML layer support, `GeoRaster`, `ArcLabel`, 'smart' label placement, and server-side image rendering. LayerChart differentiates itself by providing a Svelte-native, component-first approach that supports rendering across SVG, Canvas, and HTML layers, offering substantial flexibility and integration with popular UI frameworks like Tailwind and shadcn-svelte.","status":"active","version":"1.0.13","language":"javascript","source_language":"en","source_url":"https://github.com/techniq/layerchart","tags":["javascript","typescript"],"install":[{"cmd":"npm install layerchart","lang":"bash","label":"npm"},{"cmd":"yarn add layerchart","lang":"bash","label":"yarn"},{"cmd":"pnpm add layerchart","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for Svelte components.","package":"svelte","optional":false},{"reason":"Frequently used with LayerChart for scale definitions, though not a direct peer dependency.","package":"d3-scale","optional":true},{"reason":"Often necessary for data manipulation in conjunction with LayerChart, though not a direct peer dependency.","package":"d3-array","optional":true}],"imports":[{"note":"LayerChart components are typically imported as named ES module exports. CommonJS require() is not supported.","wrong":"const Chart = require('layerchart')","symbol":"Chart","correct":"import { Chart } from 'layerchart'"},{"note":"Individual components are named exports, not default exports. Avoid importing them separately if they are from the same package.","wrong":"import Line from 'layerchart'; import Axis from 'layerchart'","symbol":"Line, Axis","correct":"import { Line, Axis } from 'layerchart'"},{"note":"Many core components share simple names. Refer to documentation for exact component names.","wrong":"import { LayerComponent } from 'layerchart'","symbol":"Layer","correct":"import { Layer } from 'layerchart'"}],"quickstart":{"code":"<script lang=\"ts\">\n  import { Chart, Layer, Axis, Line } from 'layerchart';\n  import { scaleLinear, scaleTime } from 'd3-scale';\n\n  // Generate dummy data\n  const generateData = (count: number) => {\n    const data = [];\n    const startDate = new Date('2023-01-01');\n    for (let i = 0; i < count; i++) {\n      const date = new Date(startDate.getTime());\n      date.setDate(startDate.getDate() + i);\n      data.push({\n        date: date,\n        value: Math.random() * 100\n      });\n    }\n    return data;\n  };\n\n  const data = generateData(30);\n\n  const xDomain = [data[0].date, data[data.length - 1].date];\n  const yDomain = [0, 100];\n\n  const xScale = scaleTime().domain(xDomain);\n  const yScale = scaleLinear().domain(yDomain);\n\n  // Define accessors for LayerCake\n  const x = (d: { date: Date }) => d.date;\n  const y = (d: { value: number }) => d.value;\n\n</script>\n\n<style>\n  .chart-container {\n    height: 300px;\n    width: 100%;\n    border: 1px solid #ccc;\n    box-sizing: border-box;\n    padding: 20px;\n  }\n</style>\n\n<div class=\"chart-container\">\n  <Chart\n    {data}\n    x={x}\n    y={y}\n    xScale={xScale}\n    yScale={yScale}\n    padding={{\n      left: 40,\n      right: 20,\n      top: 20,\n      bottom: 40\n    }}\n  >\n    <Layer>\n      <Axis type=\"x\" format=\"%b %d\" />\n      <Axis type=\"y\" />\n      <Line stroke=\"steelblue\" stroke-width={2} />\n    </Layer>\n  </Chart>\n</div>\n","lang":"typescript","description":"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."},"warnings":[{"fix":"Review the v1 -> v2 migration guide on the LayerChart website. Update property names (`tooltip` to `tooltipContext`, `isVertical` usage) and adjust event handler names to lowercase.","message":"Version 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`.","severity":"breaking","affected_versions":">=2.0.0-next"},{"fix":"Migrate `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.","message":"The `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.","severity":"breaking","affected_versions":">=2.0.0-next"},{"fix":"Ensure the container `div` for your chart has a defined `height` and `width` in CSS (e.g., `height: 300px; width: 100%;`).","message":"LayerChart 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"This 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.","message":"When 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.","severity":"gotcha","affected_versions":">=5.36.0 of svelte"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `npm install layerchart` or `pnpm install layerchart` to add the package to your project dependencies.","cause":"The `layerchart` package is not installed or not correctly linked in your project.","error":"Error: Cannot find module 'layerchart'"},{"fix":"Add CSS `height` and `width` properties to the chart's container element, for example: `<div style=\"height: 300px; width: 100%;\"><Chart ... /></div>`.","cause":"The HTML container element for the LayerChart component does not have a defined height, preventing the chart from calculating its dimensions.","error":"[LayerChart] Target div has zero or negative height (-24). Did you forget to set an explicit height in CSS on the container?"},{"fix":"Verify 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.","cause":"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`).","error":"TypeError: Cannot read properties of undefined (reading 'x')"},{"fix":"If 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.","cause":"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.","error":"Property 'valueAxis' does not exist on type 'ChartState'."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null}