Layer Cake

https://layercake.graphics
Admin
Layer Cake is a headless graphics framework for Svelte that provides synced scales and a shared...
Tokens:167,294
Snippets:661
Trust Score:8.1
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Layer Cake

Source: https://layercake.graphics/guide

Add the library to your project dependencies.

```bash
npm install --save layercake
```

--------------------------------

### Sample CSV Data

Source: https://layercake.graphics/example/AreaStacked

Example dataset formatted for stacked area visualization.

```csv
month,apples,bananas,cherries,dates
2015-04-01,3840,1920,960,400
2015-03-01,1600,1440,960,400
2015-02-01,640,960,640,400
2015-01-01,320,480,640,400
```

--------------------------------

### Sample CSV Data

Source: https://layercake.graphics/example/CirclePack

Example data structure for the circle pack visualization.

```csv
fruit,value
apples,3240
bananas,1920
cherries,1290
oranges,403
dates,400
pears,230
```

--------------------------------

### Prepare data with d3.stack

Source: https://layercake.graphics/guide

Example of using d3.stack to prepare data for stacked layouts.

```javascript
const data = [
  { month: new Date(2015, 3, 1), apples: 3840, bananas: 1920, cherries: 960, dates: 400 },
  { month: new Date(2015, 2, 1), apples: 1600, bananas: 1440, cherries: 960, dates: 400 },
  { month: new Date(2015, 1, 1), apples: 640, bananas: 960, cherries: 640, dates: 400 },
  { month: new Date(2015, 0, 1), apples: 320, bananas: 480, cherries: 640, dates: 400 }
];

const stack = d3.stack().keys(['apples', 'bananas', 'cherries', 'dates']);

const series = stack(data);
```

--------------------------------

### Configure accessors for stacked data

Source: https://layercake.graphics/guide

Example of setting x and y accessors for stacked data structures.

```svelte
<LayerCake
  x={ [0, 1] }
  y={ d => d.data.month }
>
```

--------------------------------

### Sample CSV Data

Source: https://layercake.graphics/example/Bar

Example CSV data format used for chart inputs.

```csv
year,value
1979,2
1980,3
1981,5
1982,8
1983,18
```

--------------------------------

### Sample Data Series

Source: https://layercake.graphics/example/SmallMultiples

Example data structure containing multiple series of coordinate points.

```javascript
export default [
  [
    { x: 0, y: 0.3513332305465124 },
    { x: 1, y: -0.47850548294493284 },
    { x: 2, y: -0.8631762284263558 },
    { x: 3, y: -1.7484233826606137 },
    { x: 4, y: -1.5706727472497415 },
    { x: 5, y: -3.289713739464341 },
    { x: 6, y: -3.9730820042995005 },
    { x: 7, y: -2.745530296666686 },
    { x: 8, y: -3.5791092007187646 },
    { x: 9, y: -2.6641758464410152 }
  ],
  [
    { x: 0, y: -2.1768831333979946 },
    { x: 1, y: -3.9534632619125096 },
    { x: 2, y: -3.899114148630141 },
    { x: 3, y: -3.9827562738951876 },
    { x: 4, y: -4.580294736167417 },
    { x: 5, y: -3.856065008784584 },
    { x: 6, y: -3.7484016156069195 },
    { x: 7, y: -4.251249481201894 },
    { x: 8, y: -4.469618989456487 },
    { x: 9, y: -4.402688785575379 }
  ],
  [
    { x: 0, y: 0.8587657948567446 },
    { x: 1, y: 0.5079352772290244 },
    { x: 2, y: 2.701251831225464 },
    { x: 3, y: 5.837115995564179 },
    { x: 4, y: 6.760908500285659 },
    { x: 5, y: 6.0834936334060785 },
    { x: 6, y: 7.320640580003705 },
    { x: 7, y: 8.480047690829132 },
    { x: 8, y: 9.105945107644933 },
    { x: 9, y: 9.426539155610454 }
  ],
  [
    { x: 0, y: 2.095248369393952 },
    { x: 1, y: 1.765188669621648 },
    { x: 2, y: 0.5467739943527758 },
    { x: 3, y: -0.3507100722398887 },
    { x: 4, y: 0.2983588210197782 }
```

--------------------------------

### Example Data Structure

Source: https://layercake.graphics/example/CirclePackForce

A JSON array of objects representing nodes, each containing a category and a value for scaling.

```json
[
  { "category": "a", "value": 0 },
  { "category": "a", "value": 2 },
  { "category": "a", "value": 5 },
  { "category": "a", "value": 23 },
  { "category": "a", "value": 12 },
  { "category": "a", "value": 50 },
  { "category": "a", "value": 7 },
  { "category": "a", "value": 20 },
  { "category": "a", "value": 15 },
  { "category": "a", "value": 30 },
  { "category": "a", "value": 2 },
  { "category": "b", "value": 10 },
  { "category": "b", "value": 12 },
  { "category": "b", "value": 15 },
  { "category": "b", "value": 3 },
  { "category": "b", "value": 2 },
  { "category": "b", "value": 5 },
  { "category": "b", "value": 35 },
  { "category": "b", "value": 2 },
  { "category": "b", "value": 5 },
  { "category": "b", "value": 20 },
  { "category": "b", "value": 12 },
  { "category": "c", "value": 5 },
  { "category": "c", "value": 4 },
  { "category": "c", "value": 2 },
  { "category": "c", "value": 32 },
  { "category": "c", "value": 25 },
  { "category": "c", "value": 40 },
  { "category": "c", "value": 35 },
  { "category": "c", "value": 25 },
  { "category": "c", "value": 19 },
  { "category": "c", "value": 25 },
  { "category": "c", "value": 10 }
]
```

--------------------------------

### Sample Data CSV

Source: https://layercake.graphics/example/Brush

A CSV dataset containing year and value pairs used for visualization examples.

```csv
myX,myY
1979,7.19
1980,7.83
1981,7.24
1982,7.44
1983,7.51
1984,7.1
1985,6.91
1986,7.53
1987,7.47
1988,7.48
1989,7.03
1990,6.23
1991,6.54
1992,7.54
1993,6.5
1994,7.18
1995,6.12
1996,7.87
1997,6.73
1998,6.55
1999,6.23
2000,6.31
2001,6.74
2002,5.95
2003,6.13
2004,6.04
2005,5.56
2006,5.91
2007,4.29
2008,4.72
2009,5.38
2010,4.92
2011,4.61
2012,3.62
2013,5.35
2014,5.28
2015,4.63
2016,4.72
```

--------------------------------

### Example Topology JSON Structure

Source: https://layercake.graphics/example/MapSvg

A sample JSON structure representing TopoJSON data for map rendering.

```json
{
  "type": "Topology",
  "bbox": [-57.66491068874468, 12.97635452036684, 957.5235629133763, 606.5694262668667],
  "transform": {
    "scale": [0.010151986255883769, 0.005935990077365771],
    "translate": [-57.66491068874468, 12.97635452036684]
  },
  "objects": {
    "states": {
      "type": "GeometryCollection",
      "geometries": [
        {
          "type": "MultiPolygon",
          "arcs": [[[0]], [[1, 2, 3, 4, 5]]],
          "id": "01",
          "properties": { "name": "Alabama" }
        },
        {
```

--------------------------------

### Hierarchical CSV Data Example

Source: https://layercake.graphics/example/CirclePackNested

Sample CSV structure defining parent-child relationships for the circle pack.

```csv
name,parent
Eve,
Cain,Eve
Seth,Eve
Enos,Seth
Noam,Seth
Abel,Eve
Awan,Eve
Enoch,Awan
Azura,Eve
```

--------------------------------

### CirclePackForce.svelte Implementation

Source: https://layercake.graphics/components/CirclePackForce.svelte

The full source code for the CirclePackForce component, including force simulation setup and Svelte rendering logic.

```svelte
<!--
  @component
  Generates an SVG force simulation using [d3-force](https://github.com/d3/d3-force). The values here are defaults which you will likely have to customize because every force simulation is different. This technique comes from @plmrry.
 -->
<script>
  import { getContext } from 'svelte';
  import { forceSimulation, forceX, forceManyBody, forceCollide, forceCenter } from 'd3-force';

  const { data, width, height, xScale, xGet, rGet, zGet } = getContext('LayerCake');

  /**
   * @typedef {Object} Props
   * @property {number} [manyBodyStrength=5] - The value passed into the `.strength` method on `forceManyBody`, which is used as the `'charge'` property on the simulation. See [the documentation](https://github.com/d3/d3-force#manyBody_strength) for more.
   * @property {number} [xStrength=0.1] - The value passed into the `.strength` method on `forceX`, which is used as the `'x'` property on the simulation. See [the documentation](https://github.com/d3/d3-force#x_strength) for more.
   * @property {string|undefined} [nodeColor] - Set a color manually otherwise it will default to the `zScale`.
   * @property {string} [nodeStroke='#fff'] - The circle's stroke color.
   * @property {number} [nodeStrokeWidth=1] - The circle's stroke width, in pixels.
   * @property {boolean} [groupBy=true] - Group the nodes by the return value of the x-scale. If `false`, align all the nodes to the canvas center.
   */

  /** @type {Props} */
  let {
    manyBodyStrength = 5,
    xStrength = 0.1,
    nodeColor,
    nodeStroke = '#fff',
    nodeStrokeWidth = 1,
    groupBy = true
  } = $props();

  /* --------------------------------------------
   * Make a copy because the simulation will alter the objects
   */
  const initialNodes = $data.map(d => ({ ...d }));

  const simulation = forceSimulation(initialNodes);

  let nodes = $state([]);

  simulation.on('tick', () => {
    nodes = simulation.nodes();
  });

  /* ----------------------------------------------
   * When variables change, set forces and restart the simulation
   */
  $effect(() => {
    simulation
      .force(
        'x',
        forceX()
          .x(
            /** @param {any} d */ d => {
              return groupBy === true ? $xGet(d) + $xScale.bandwidth() / 2 : $width / 2;
            }
          )
          .strength(xStrength)
      )
      .force('center', forceCenter($width / 2, $height / 2))
      .force('charge', forceManyBody().strength(manyBodyStrength))
      .force(
        'collision',
        forceCollide().radius(
          /** @param {any} d */ d => {
            return $rGet(d) + nodeStrokeWidth / 2; // Divide this by two because an svg stroke is drawn halfway out
          }
        )
      )
      .force('center', forceCenter($width / 2, $height / 2))
      .alpha(1)
      .restart();
  });
</script>

{#each nodes as point}
  <circle
    class="node"
    r={$rGet(point)}
    fill={nodeColor || $zGet(point)}
    stroke={nodeStroke}
    stroke-width={nodeStrokeWidth}
    cx={point.x}
    cy={point.y}
  >
    <!-- <title>{point[$custom.title]}</title> -->
  </circle>
{/each}
```

--------------------------------

### Pass Custom Configuration to LayerCake

Source: https://layercake.graphics/guide

Provides an example of passing arbitrary configuration objects to the LayerCake context via the custom prop.

```svelte
<LayerCake
  custom={ { size: 10, names: ['a', 'b', 'c'] } }
>
```

--------------------------------

### Implement Circle Pack in Svelte

Source: https://layercake.graphics/example/CirclePack

Usage example for the CirclePack component within a LayerCake container. Requires a parent container with explicit dimensions.

```svelte
<script>
  import { LayerCake, Html } from 'layercake';

  import CirclePack from './_components/CirclePack.html.svelte';

  // This example loads csv data as json and converts numeric columns to numbers using @rollup/plugin-dsv. See vite.config.js for details
  import data from './_data/fruitGroups.csv';

  /** @type {string} */
  const idKey = 'fruit';
  /** @type {string} */
  const valueKey = 'value';
</script>

<div class="chart-container">
  <LayerCake padding={{ top: 0, bottom: 20, left: 30 }} {data}>
    <Html>
      <CirclePack
        {idKey}
        {valueKey}
        fill="#ff00cc"
        stroke="#9f0080"
        textColor="#61004e"
        textStroke="#ffdbf8"
        textStrokeWidth={1}
      />
    </Html>
  </LayerCake>
</div>

<style>
  /*
    The wrapper div needs to have an explicit width and height in CSS.
    It can also be a flexbox child or CSS grid element.
    The point being it needs dimensions since the <LayerCake> element will
    expand to fill it.
  */
  .chart-container {
    width: 100%;
    height: 250px;
  }
</style>
```

--------------------------------

### Initialize Project Template

Source: https://layercake.graphics/guide

Use degit to clone the official starter template.

```bash
degit mhkeller/layercake-template my-chart
cd my-chart
```

--------------------------------

### Accessing Data and Scales via Context

Source: https://layercake.graphics/guide

Demonstrates the equivalence between manual scaling and using the xGet accessor.

```svelte
<script>
  import { getContext } from 'svelte';

  const { data, x, xScale, xGet } = getContext('LayerCake');

  // data === [{ myX: 'hello', myY: 'hi' }];
</script>

{#each $data as d}
  <!-- These are equivalent: -->
  d.myX === $x(d); $xScale(d.myX) === $xScale($x(d)) === $xGet(d);
{/each}
```

--------------------------------

### TopoJSON Data Structure

Source: https://layercake.graphics/example/MapLayered

Example of a TopoJSON object structure containing a GeometryCollection.

```json
{
  "type": "Topology",
  "objects": {
    "collection": {
      "type": "GeometryCollection",
      "geometries": [
        { "type": "Polygon", "arcs": [[0, 1, 2, 3, 4]], "properties": { "name": "Alabama" } },
        {
          "type": "MultiPolygon",
          "arcs": [
            [[5]],
            [[6]],
            [[7]],
            [[8]],
            [[9]],
            [[10]],
            [[11]],
            [[12]],
            [[13]],
            [[14]],
            [[15]],
            [[16]],
            [[17]],
            [[18]],
            [[19]],
            [[20]],
            [[21]],
            [[22]],
            [[23]],
```

--------------------------------

### Radar Chart Data Format

Source: https://layercake.graphics/example/Radar

Example CSV data structure suitable for a radar chart.

```csv
name,fastball,change,slider,cutter,curve
Allison,10,0,4,8,5
```

--------------------------------

### Sample Dataset

Source: https://layercake.graphics/example/Beeswarm

CSV formatted data representing car specifications used for testing the Beeswarm component.

```csv
Name,Miles_per_Gallon,Cylinders,Displacement,Horsepower,Weight_in_lbs,Acceleration,Year,Origin
chevrolet chevelle malibu,18,8,307,130,3504,12,1970,USA
buick skylark 320,15,8,350,165,3693,11.5,1970,USA
plymouth satellite,18,8,318,150,3436,11,1970,USA
amc rebel sst,16,8,304,150,3433,12,1970,USA
ford torino,17,8,302,140,3449,10.5,1970,USA
ford galaxie 500,15,8,429,198,4341,10,1970,USA
chevrolet impala,14,8,454,220,4354,9,1970,USA
plymouth fury iii,14,8,440,215,4312,8.5,1970,USA
pontiac catalina,14,8,455,225,4425,10,1970,USA
amc ambassador dpl,15,8,390,190,3850,8.5,1970,USA
citroen ds-21 pallas,,4,133,115,3090,17.5,1970,Europe
chevrolet chevelle concours (sw),,8,350,165,4142,11.5,1970,USA
ford torino (sw),,8,351,153,4034,11,1970,USA
plymouth satellite (sw),,8,383,175,4166,10.5,1970,USA
amc rebel sst (sw),,8,360,175,3850,11,1970,USA
dodge challenger se,15,8,383,170,3563,10,1970,USA
plymouth 'cuda 340,14,8,340,160,3609,8,1970,USA
ford mustang boss 302,,8,302,140,3353,8,1970,USA
chevrolet monte carlo,15,8,400,150,3761,9.5,1970,USA
buick estate wagon (sw),14,8,455,225,3086,10,1970,USA
toyota corona mark ii,24,4,113,95,2372,15,1970,Japan
plymouth duster,22,6,198,95,2833,15.5,1970,USA
amc hornet,18,6,199,97,2774,15.5,1970,USA
ford maverick,21,6,200,85,2587,16,1970,USA
datsun pl510,27,4,97,88,2130,14.5,1970,Japan
volkswagen 1131 deluxe sedan,26,4,97,46,1835,20.5,1970,Europe
peugeot 504,25,4,110,87,2672,17.5,1970,Europe
audi 100 ls,24,4,107,90,2430,14.5,1970,Europe
saab 99e,25,4,104,95,2375,17.5,1970,Europe
bmw 2002,26,4,121,113,2234,12.5,1970,Europe
amc gremlin,21,6,199,90,2648,15,1970,USA
ford f250,10,8,360,215,4615,14,1970,USA
chevy c20,10,8,307,200,4376,15,1970,USA
dodge d200,11,8,318,210,4382,13.5,1970,USA
hi 1200d,9,8,304,193,4732,18.5,1970,USA
datsun pl510,27,4,97,88,2130,14.5,1971,Japan
chevrolet vega 2300,28,4,140,90,2264,15.5,1971,USA
toyota corona,25,4,113,95,2228,14,1971,Japan
ford pinto,25,4,98,,2046,19,1971,USA
volkswagen super beetle 117,,4,97,48,1978,20,1971,Europe
amc gremlin,19,6,232,100,2634,13,1971,USA
plymouth satellite custom,16,6,225,105,3439,15.5,1971,USA
chevrolet chevelle malibu,17,6,250,100,3329,15.5,1971,USA
ford torino 500,19,6,250,88,3302,15.5,1971,USA
amc matador,18,6,232,100,3288,15.5,1971,USA
chevrolet impala,14,8,350,165,4209,12,1971,USA
pontiac catalina brougham,14,8,400,175,4464,11.5,1971,USA
ford galaxie 500,14,8,351,153,4154,13.5,1971,USA
plymouth fury iii,14,8,318,150,4096,13,1971,USA
```

--------------------------------

### Main Page Implementation

Source: https://layercake.graphics/example/SmallMultiples

The parent component that calculates global extents and manages the scale state for the small multiples.

```svelte
<script>
  import { calcExtents, flatten } from 'layercake';

  import SmallMultipleWrapper from './_components/SmallMultipleWrapper.svelte';

  import dataSeries from './_data/pointSeries.js';

  /* --------------------------------------------
   * Grab the extents of the full dataset
   */
  const extentGetters = {
    x: d => d.x,
    y: d => d.y
  };

  const fullExtents = calcExtents(flatten(dataSeries), extentGetters);

  /* --------------------------------------------
   * Sort by the last value
   */
  dataSeries.sort((a, b) => {
    return b[b.length - 1].y - a[a.length - 1].y;
  });

  let scale = $state('individual');
</script>

<div class="input-container">
  <label><input type="radio" bind:group={scale} value="individual" />Individual scale</label>
  <label><input type="radio" bind:group={scale} value="shared" />Shared scale</label>
</div>

<div class="group-container">
  {#each dataSeries as data}
    <div class="small-multiple-container">
      <SmallMultipleWrapper {data} {fullExtents} {scale} {extentGetters} />
    </div>
  {/each}
</div>

<style>
  .group-container {
    height: calc(100% - 40px);
    width: 100%;
  }
  .input-container {
    margin-bottom: 7px;
  }
  label {
    cursor: pointer;
  }
  input {
    margin-right: 7px;
  }
  /*
    The wrapper div needs to have an explicit width and height in CSS.
    It can also be a flexbox child or CSS grid element.
    The point being it needs dimensions since the <LayerCake> element will
    expand to fill it.
  */
  .small-multiple-container {
    position: relative;
    display: inline-block;
    width: 11%;
    height: 30%;
  }
</style>
```

--------------------------------

### Import LayerCake Components Directly

Source: https://layercake.graphics/guide

Import components from the source directory to bypass build issues or customize library components.

```svelte
<script>
  import LayerCake from './layercake/src/lib/LayerCake.svelte';
  import Svg from './layercake/src/lib/layouts/Svg.svelte';
  // etc...
</script>
```

--------------------------------

### Configure xDomain with fixed or partial values

Source: https://layercake.graphics/guide

Use fixed arrays to set domain bounds or partial null values to inherit from data extent.

```jsx
<LayerCake
  xDomain={ [0, 100] } // Fixes the x scale's domain
  // or..
  xDomain={ [0, null] } // Fixes the min but allows the max to be whatever is in the data
>
```

--------------------------------

### Implement Nested Circle Pack Chart

Source: https://layercake.graphics/example/CirclePackNested

The main Svelte component setup using LayerCake and the custom CirclePack component.

```svelte
<script>
  import { LayerCake, Html } from 'layercake';

  import CirclePack from './_components/CirclePack.html.svelte';

  // This example loads csv data as json and converts numeric columns to numbers using @rollup/plugin-dsv. See vite.config.js for details
  import data from './_data/familyTree.csv';

  const idKey = 'name';
  const parentKey = 'parent';
</script>

<div class="chart-container">
  <LayerCake padding={{ top: 0, bottom: 20, left: 30 }} {data}>
    <Html>
      <CirclePack
        {idKey}
        {parentKey}
        spacing={5}
        sortBy={(a, b) => b.depth - a.depth}
        labelVisibilityThreshold={r => false}
        stroke="#00bbff"
      />
    </Html>
  </LayerCake>
</div>

<style>
  /*
    The wrapper div needs to have an explicit width and height in CSS.
    It can also be a flexbox child or CSS grid element.
    The point being it needs dimensions since the <LayerCake> element will
    expand to fill it.
  */
  .chart-container {
    width: 100%;
    height: 250px;
  }
</style>
```

--------------------------------

### Implement a Synchronized Brush Chart

Source: https://layercake.graphics/example/Brush

Uses LayerCake to create a main chart and a secondary brush container, synchronizing data selection via reactive state.

```svelte
<script>
  import { LayerCake, Svg, Html } from 'layercake';

  import Line from './_components/Line.svelte';
  import Area from './_components/Area.svelte';
  import AxisX from './_components/AxisX.svelte';
  import AxisY from './_components/AxisY.svelte';
  import Brush from './_components/Brush.html.svelte';

  // This example loads csv data as json and converts numeric columns to numbers using @rollup/plugin-dsv. See vite.config.js for details
  import data from './_data/points.csv';

  let brushExtents = $state([null, null]);

  const xKey = 'myX';
  const yKey = 'myY';

  let brushedData = $derived.by(() => {
    let selection = data.slice(
      (brushExtents[0] || 0) * data.length,
      (brushExtents[1] || 1) * data.length
    );
    if (selection.length < 2 && brushExtents[0] !== null) {
      selection = data.slice(brushExtents[0] * data.length, brushExtents[0] * data.length + 2);
    }
    return selection;
  });
</script>

<div class="brushed-chart-container">
  <LayerCake
    padding={{ bottom: 20, left: 25 }}
    x={xKey}
    y={yKey}
    yDomain={[0, null]}
    data={brushedData}
  >
    <Svg>
      <AxisX
        ticks={ticks => {
          const filtered = ticks.filter(t => t % 1 === 0);
          if (filtered.length > 7) {
            return filtered.filter((t, i) => i % 2 === 0);
          }
          return filtered;
        }}
      />
      <AxisY ticks={4} />
      <Line stroke="#00e047" />
      <Area fill="#00e04710" />
    </Svg>
  </LayerCake>
</div>

<div class="brush-container">
  <LayerCake padding={{ top: 5 }} x={xKey} y={yKey} yDomain={[0, null]} {data}>
    <Svg>
      <Line stroke="#00e047" />
      <Area fill="#00e04710" />
    </Svg>
    <Html>
      <Brush bind:min={brushExtents[0]} bind:max={brushExtents[1]} />
    </Html>
  </LayerCake>
</div>

<style>
  /*
    The wrapper div needs to have an explicit width and height in CSS.
    It can also be a flexbox child or CSS grid element.
    The point being it needs dimensions since the <LayerCake> element will
    expand to fill it.
  */
  .brushed-chart-container {
    width: 100%;
    height: 80%;
  }
  .brush-container {
    width: 100%;
    height: 20%;
  }
</style>
```

--------------------------------

### Stacked Bar CSV Data Format

Source: https://layercake.graphics/example/BarStacked

Example CSV data structure suitable for a stacked bar chart, organized by year and categories.

```csv
year,apples,bananas,cherries,dates
2019,3840,1920,960,400
2018,1600,1440,960,400
2017,820,1000,640,400
2016,820,560,720,400
```

--------------------------------

### Implement a Sankey chart in Svelte

Source: https://layercake.graphics/example/Sankey

Usage example for the Sankey component within a LayerCake wrapper. The container requires explicit dimensions for the chart to render correctly.

```svelte
<script>
  import { LayerCake, Svg } from 'layercake';

  import Sankey from './_components/Sankey.svelte';

  import data from './_data/sankey-data.js';
</script>

<div class="chart-container">
  <LayerCake {data}>
    <Svg>
      <Sankey colorNodes={d => '#00bbff'} colorLinks={d => '#00bbff35'} />
    </Svg>
  </LayerCake>
</div>

<style>
  /*
    The wrapper div needs to have an explicit width and height in CSS.
    It can also be a flexbox child or CSS grid element.
    The point being it needs dimensions since the <LayerCake> element will
    expand to fill it.
  */
  .chart-container {
    width: 100%;
    height: 250px;
  }
</style>
```

--------------------------------

### Tooltip.html.svelte Implementation

Source: https://layercake.graphics/components/Tooltip.html.svelte

The complete source code for the Tooltip component, including props definition and styling.

```svelte
<!--
  @component
  Generates a hover tooltip positioned at the coordinates of the mouse event passed to the `event` prop, plus a y-`offset`. Whatever you put inside the component becomes the body of the tooltip.
 -->
<script>
  /**
   * @typedef {Object} Props
   * @property {MouseEvent} event - The mouse event that triggered the tooltip.
   * @property {number} [offset=-35] - A y-offset from the hover point, in pixels.
   * @property {import('svelte').Snippet} [children]
   */

  /** @type {Props} */
  let { event, offset = -35, children } = $props();
</script>

{#if event.layerX !== undefined && event.layerY !== undefined}
  <div
    class="tooltip"
    style="
      top:{event.layerY + offset}px;
      left:{event.layerX}px;
    "
  >
    {@render children?.()}
  </div>
{/if}

<style>
  .tooltip {
    position: absolute;
    width: 150px;
    border: 1px solid #ccc;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.85);
    transform: translate(-50%, -100%);
    padding: 5px;
    z-index: 15;
  }
</style>
```
Tokens:
Raw