DOCSEARCHbyAlgolia
Submit Docs

LayerChart Documentation

repository·main·Indexed 23 days ago

https://github.com/techniq/layerchart

A library of composable Svelte components for building data visualizations, including Cartesian, radial, hierarchical, graph, and geographic maps. The library provides a wide range of components such as Arc, Annotation, and ArcChart, supporting svg, canvas, and html rendering layers.

Tokens
67.2K
Snippets
164
Records
441
Agent score
78%

What's inside LayerChart

  1. Overview of LayerChart components

    main

    LayerChart is a collection of composable Svelte chart components designed for building various data visualizations. The library provides components across several chart types:

    • Cartesian: Area, Bar, Line, Scatter
    • Radial/Polar: Arc, Area, Bar, Line, Radar, Pie
    • Hierarchical: Pack, Partition, Tree, Treemap
    • Graph: Dagre, Force, Sankey
    • Geo: Choropleth, Spike, Bubble, Point, Globe
    • Calendar

    For highly interactive applications, you can also use the companion library Svelte UX.

  2. Use the Grid component to draw chart lines

    main
    The Grid component draws horizontal and vertical lines that respect the scales provided to the chart. This is used to enhance readability by helping users align data points with axis values. It supports svg, canvas, and html layers and is closely related to the Axis and Rule components.

  4. Use the Tooltip component for interaction management

    main

    The Tooltip component is an interaction component used to manage and display tooltips. It allows dynamic information to appear in response to user interactions. It is compatible with svg, canvas, and html layers.

    Key sub-components include:

    • Tooltip.Root
    • TooltipHeader
    • TooltipList
    • TooltipItem
    • TooltipSeparator

    For detailed usage instructions, including positioning modes and specific examples, refer to the Tooltip guide.

  6. Available Geo components

    main

    LayerChart provides several specialized components for rendering geographic data:

    • GeoContext: The primary projection context component (also accessible via <Chart geo={...}>).
    • GeoProjection: A secondary projection context component.
    • GeoPath: Used for rendering geographic boundaries and shapes.
    • GeoPoint: Used for plotting specific geographic locations.
    • GeoTile: Used for rendering raster map tiles.
    • GeoCircle: Used for rendering circular geographic regions.
    • GeoSpline: Used for rendering curved geographic connections.

  7. Use the Chart component as a base

    main

    The Chart component serves as the foundational layer for building charts in LayerChart. It provides essential chart dimensions and manages various contexts required for advanced features, including:

    • TooltipContext for handling hover interactions.
    • GeoContext for geographic data rendering.
    • TransformContext for coordinate transformations (panning, zooming, etc.).

    While Chart is the base component, LayerChart also provides streamlined, high-level implementations like AreaChart and BarChart for common use cases. The Chart component also includes built-in support for x and y baselines (e.g., ensuring a 0 baseline is always visible).

    <Chart {data} ... />

  8. What is a scale in LayerChart?

    main
    A scale is a function that maps data values (the domain) to pixel or color values (the range) on a per-dimension basis (e.g., x, y, or color). LayerChart uses d3-scale under the hood, allowing you to use various scale types like linear, time, or band scales to transform your data into visual coordinates.

  10. Register Marks implicitly for automatic series detection

    main

    LayerChart v2 introduces automatic mark registration. Marks now register their data and accessors with the <Chart> component automatically. You no longer need to manually pass all accessor arrays to the <Chart> component.

    This enables implicit series generation, which provides tooltip and legend support without requiring explicit series definitions.

    - <Chart y={['apples', 'oranges']}>
-   <Spline y="apples" />
-   <Spline y="oranges" />
- </Chart>
+ <Chart>
+   <Spline y="apples" />
+   <Spline y="oranges" />
+ </Chart>

  11. Use Wide vs Separate data formats for series

    main

    LayerChart supports two primary data patterns for multi-series charts:

    Wide format (shared data)

    One data array where each object contains columns for every series. This is the most common approach.

    const data = [
	{ date: '2024-01', apples: 100, bananas: 80, oranges: 60 },
	{ date: '2024-02', apples: 120, bananas: 90, oranges: 70 }
];

    Separate data per series

    Each series provides its own data array. This is useful for long-format data or when series have different data points or lengths. When using this, ensure you set the y accessor on the chart (or the value accessor on each series) to specify which property holds the value.

    <LineChart
	x="date"
	y="value"
	series={[
		{ key: 'apples', data: applesData, color: 'red' },
		{ key: 'bananas', data: bananasData, color: 'yellow' }
	]}
/>

  12. Reshape tabular data with pivotLonger

    main
    Use pivotLonger to convert data from a wide format (where variables are spread across multiple columns) to a long format (where variables are collapsed into rows). This is useful for preparing data for layered charts where each layer represents a different category or variable.