Archived

Documentation for Layer Cake v10, before Svelte 5 runes. Current docs at layercake.graphics

Menu

Synced brush

Four charts sharing one brush. Each SyncedBrushWrapper.svelte holds a chart and a brush and exposes min and max as bindable props. Binding all four to the same values keeps them in step, so dragging any brush zooms every chart.

  • +page.svelte
  • ./_components/SyncedBrushWrapper.svelte
  • ./_components/Line.svelte
  • ./_components/Area.svelte
  • ./_components/AxisX.svelte
  • ./_components/AxisY.svelte
  • ./_components/Brush.html.svelte
  • ./_data/points.csv
  • ./_data/pointsTwo.csv
  • ./_data/pointsThree.csv
  • ./_data/pointsFour.csv
<script>
  import SyncedBrushWrapper from './_components/SyncedBrushWrapper.svelte';

  // The CSV rows are parsed, and their numbers typed, by @rollup/plugin-dsv. See vite.config.js
  import pointsOne from './_data/points.csv';
  import pointsTwo from './_data/pointsTwo.csv';
  import pointsThree from './_data/pointsThree.csv';
  import pointsFour from './_data/pointsFour.csv';

  // One brush range shared by every chart
  /** @type {[number|null, number|null]} */
  let brushExtents = $state([null, null]);

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

  const datasets = [pointsOne, pointsTwo, pointsThree, pointsFour];

  const colors = ['#00e047', '#00bbff', '#ff00cc', '#ffcc00'];
</script>

<div class="chart-container">
  {#each datasets as dataset, i}
    <SyncedBrushWrapper
      data={dataset}
      {xKey}
      {yKey}
      bind:min={brushExtents[0]}
      bind:max={brushExtents[1]}
      stroke={colors[i]}
    />
  {/each}
</div>

<style>
  /* Give the wrapper a width and height. LayerCake fills it. */
  .chart-container {
    width: 100%;
    height: 250px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
  }
</style>