diff --git a/site/examples/data/4/App.svelte b/site/examples/data/4/App.svelte
new file mode 100644
index 0000000..8005bb7
--- /dev/null
+++ b/site/examples/data/4/App.svelte
@@ -0,0 +1,153 @@
+<script>
+  import * as Pancake from "@sveltejs/pancake";
+  import { fly, scale } from "svelte/transition";
+  import { quintOut } from "svelte/easing";
+  import { crossfade } from "svelte/transition";
+  import { flip } from "svelte/animate";
+  import data from "./data.js";
+
+  const [send, receive] = crossfade({
+    duration: d => Math.sqrt(d * 200),
+
+    fallback(node, params) {
+      const style = getComputedStyle(node);
+      const transform = style.transform === "none" ? "" : style.transform;
+
+      return {
+        duration: 600,
+        easing: quintOut,
+        css: t => `
+					transform: ${transform} scale(${t});
+					opacity: ${t}
+				`
+      };
+    }
+  });
+
+  const fruits = ["apples", "bananas", "cherries", "dates"];
+  const colors = ["#00e047", "#7ceb68", "#b7f486", "#ecfda5"];
+
+  let shiftX = 1 / fruits.length;
+  let isFlattened = false;
+
+  const stacks = Pancake.stacks(data, fruits, "year");
+
+  const max = stacks.reduce(
+    (max, stack) => Math.max(max, ...stack.values.map(v => v.end)),
+    0
+  );
+
+  const years = {
+    min: data[data.length - 1].year,
+    max: data[0].year
+  };
+</script>
+
+<style>
+  .chart {
+    height: 200px;
+    padding: 3em 0 2em 2em;
+    margin: 0 0 36px 0;
+  }
+
+  .grid-line {
+    position: relative;
+    display: block;
+  }
+
+  .grid-line.horizontal {
+    width: calc(100% + 2em);
+    left: -2em;
+  }
+
+  .grid-line span {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    font-family: sans-serif;
+    font-size: 14px;
+    color: #999;
+    line-height: 1;
+  }
+
+  .year-label {
+    position: absolute;
+    width: 4em;
+    left: -2em;
+    bottom: -22px;
+    font-family: sans-serif;
+    font-size: 14px;
+    color: #999;
+    text-align: center;
+  }
+
+  .box {
+    position: absolute;
+    left: 2px;
+    top: 0;
+    width: calc(100% - 4px);
+    height: 100%;
+    border-radius: 2px;
+  }
+  .radio-inputs {
+    display: flex;
+  }
+
+  label {
+    margin: 0 1rem;
+  }
+</style>
+
+<div class="radio-inputs">
+  <label>
+    <input type="radio" bind:group={isFlattened} value={false} />
+    Stacked
+  </label>
+  <label>
+    <input type="radio" bind:group={isFlattened} value={true} />
+    Grouped
+  </label>
+</div>
+
+<div class="chart">
+
+  <Pancake.Chart x1={years.max + 0.5} x2={years.min - 0.5} y1={0} y2={max}>
+    <Pancake.Grid horizontal count={5} let:value let:first>
+      <div class="grid-line horizontal">
+        <span>{value}</span>
+      </div>
+    </Pancake.Grid>
+
+    <Pancake.Grid vertical count={10} let:value>
+      <span class="year-label">{value}</span>
+    </Pancake.Grid>
+
+    {#each stacks as stack, i}
+      {#if !isFlattened}
+        {#each stack.values as d, vi}
+          <Pancake.Box x1={d.i + 0.5} x2={d.i - 0.5} y1={d.start} y2={d.end}>
+            <div
+              in:receive={{ key: (i + 1) * vi }}
+              out:send={{ key: (i + 1) * vi }}
+              class="box"
+              style="background-color: {colors[i]}" />
+          </Pancake.Box>
+        {/each}
+      {:else}
+        {#each stack.values as d, vi}
+          <Pancake.Box
+            x1={d.i + 0.5 - i * shiftX}
+            x2={d.i + 0.5 - i * shiftX - shiftX}
+            y1={d.value}
+            y2={0}>
+            <div
+              in:receive={{ key: (i + 1) * vi }}
+              out:send={{ key: (i + 1) * vi }}
+              class="box"
+              style="background-color: {colors[i]}" />
+          </Pancake.Box>
+        {/each}
+      {/if}
+    {/each}
+  </Pancake.Chart>
+</div>
diff --git a/site/examples/data/4/data.js b/site/examples/data/4/data.js
new file mode 100644
index 0000000..3207f03
--- /dev/null
+++ b/site/examples/data/4/data.js
@@ -0,0 +1,14 @@
+export default [
+  { year: 2019, apples: 3840, bananas: 1920, cherries: 960, dates: 400 },
+  { year: 2018, apples: 1600, bananas: 1440, cherries: 960, dates: 400 },
+  { year: 2017, apples: 820, bananas: 1000, cherries: 640, dates: 400 },
+  { year: 2016, apples: 820, bananas: 560, cherries: 720, dates: 400 },
+  { year: 2015, apples: 3840, bananas: 1020, cherries: 960, dates: 400 },
+  { year: 2014, apples: 1600, bananas: 1240, cherries: 960, dates: 400 },
+  { year: 2013, apples: 820, bananas: 1200, cherries: 640, dates: 400 },
+  { year: 2012, apples: 820, bananas: 860, cherries: 720, dates: 400 },
+  { year: 2011, apples: 840, bananas: 1920, cherries: 960, dates: 400 },
+  { year: 2010, apples: 1600, bananas: 1440, cherries: 960, dates: 400 },
+  { year: 2009, apples: 820, bananas: 1000, cherries: 640, dates: 400 },
+  { year: 2008, apples: 820, bananas: 560, cherries: 720, dates: 400 }
+];
diff --git a/site/examples/data/4/meta.json b/site/examples/data/4/meta.json
new file mode 100644
index 0000000..119243d
--- /dev/null
+++ b/site/examples/data/4/meta.json
@@ -0,0 +1 @@
+{"name": "Pancake • Stacked to Grouped Bar"}
diff --git a/site/examples/data/5/App.svelte b/site/examples/data/5/App.svelte
new file mode 100644
index 0000000..1e6ee62
--- /dev/null
+++ b/site/examples/data/5/App.svelte
@@ -0,0 +1,458 @@
+<script>
+  import * as Pancake from "@sveltejs/pancake";
+  import { fade } from "svelte/transition";
+  import data from "./data.js";
+
+  $: isSlopeHovered = false;
+  $: hoverId = null;
+  $: isLeftToolTip = true;
+  $: isRightToolTip = true;
+
+  $: displayData =
+    isSlopeHovered != false && hoverId
+      ? data.find(d => d.shape === hoverId)
+      : "";
+  let y2 = -Infinity;
+  let y1 = Infinity;
+
+  const rightArrow = [
+    { x: 2.1, y: 65 },
+    { x: 2.3, y: 65 },
+    { x: 2.3, y: 65 },
+    { x: 2.5, y: 95 }
+  ];
+
+  const leftArrow = [{ x: 0.9, y: 60 }, { x: 0.5, y: 45 }, { x: 0.5, y: 45 }];
+
+  //array of the left lables in order by default
+  const left_labels = data.reduce((a, c) => {
+    a.push(c.y2001);
+    return a;
+  }, []);
+
+  //array of right labels - not ordered
+  const right_labels = data.reduce((a, c) => {
+    a.push(c.y2002);
+    return a;
+  }, []);
+
+  // TODO refactor forloops into one function that can be imported as helper
+
+  const slopeData = data.slice(0);
+  const positionData = data.slice(0);
+
+  //sets the y1 to max value of data
+  positionData.forEach((d, i) => {
+    if (i === 0) {
+      y2 = d.y2001;
+      y1 = d.y2001;
+    }
+    let a = d.y2001;
+    let b = d.y2002;
+    if (Math.max(a, b) > y2) {
+      y2 = Math.max(a, b);
+    }
+    if (Math.min(a, b) < y1) {
+      y1 = Math.min;
+    }
+  });
+
+  //our initial shift centers svg line to center of text
+  let left_label_shifts = data.map(d => {
+    return "- .5rem";
+  });
+  let right_label_shifts = data.map(d => {
+    return "- .5rem";
+  });
+
+  //Look for overlapping pairs that can be shifted apart with minimal disruption
+  //labels too closely packed ar bumped out to side circles (clusters)
+  const leftClusters = [];
+  const rightClusters = [];
+
+  function findClusters(arr, start, limit, key, dep) {
+    let remainder = arr.slice(start, limit - 1);
+    let cluster = true;
+
+    //if the starting value is already in cluster return
+    if (dep.includes(arr[start])) {
+      return;
+    } else {
+      let currentCluster = remainder.filter((cur, i, a) => {
+        let nxt = a[i + 1];
+        if (!nxt === false && cur[key] - nxt[key] < 15 && cluster === true) {
+          return true;
+        } else {
+          cluster = false;
+          return false;
+        }
+      });
+      dep.push(...currentCluster);
+    }
+  }
+
+  for (let i = 0; i < data.length; i++) {
+    if (i != 0 && i <= data.length - 2) {
+      let nxt = data[i + 1].y2001;
+      if (data[i].y2001 - nxt < 15) {
+        let space_above = data[i - 1].y2001 - data[i].y2001;
+        let space_below = nxt - data[i + 2].y2001;
+        if (space_above > 7 && space_below > 6) {
+          let diff = data[i].y2001 - nxt;
+          left_label_shifts[i] = (15 - diff) * -1;
+          left_label_shifts[i + 1] = -4;
+        } else {
+          findClusters(data, i, data.length - 2, "y2001", leftClusters);
+        }
+      }
+    }
+  }
+
+  const sorted_by_right_labels = Array.prototype.slice
+    .call(data)
+    .sort((a, b) => {
+      return b.y2002 - a.y2002;
+    });
+  console.log("sorted by right labels", sorted_by_right_labels);
+
+  for (let i = 0; i < data.length; i++) {
+    if (i != 0 && i < data.length - 2) {
+      let nxt = sorted_by_right_labels[i + 1].y2002;
+      if (sorted_by_right_labels[i].y2002 - nxt < 15) {
+        let space_above =
+          sorted_by_right_labels[i - 1].y2002 - sorted_by_right_labels[i].y2002;
+        let space_below = nxt - sorted_by_right_labels[i + 2].y2002;
+        if (space_above > 7 && space_below > 6) {
+          let diff = sorted_by_right_labels[i].y2002 - nxt;
+
+          right_label_shifts[i] = (17 - diff) * -1;
+
+          right_label_shifts[i + 1] = -4;
+        } else {
+          findClusters(
+            sorted_by_right_labels,
+            i,
+            sorted_by_right_labels.length - 2,
+            "y2002",
+            rightClusters
+          );
+        }
+      }
+    }
+  }
+
+  //define svg points
+  const points = data.map(d => ({
+    p: [{ x: 1, y: d.y2001 }, { x: 2, y: d.y2002 }],
+    id: d.shape
+  }));
+
+  function toggleHovered() {
+    isSlopeHovered = !isSlopeHovered;
+    console.log("slope hovered ", isSlopeHovered);
+  }
+
+  function updateHoverId(id) {
+    if (isSlopeHovered) {
+      if (leftClusters.find(d => d.shape === id) != undefined) {
+        isLeftToolTip = true;
+      }
+      if (rightClusters.find(d => d.shape === id) != undefined) {
+        isRightToolTip = true;
+      }
+      hoverId = id;
+      console.log(id, "hovered");
+    } else {
+      hoverId = "";
+    }
+  }
+
+  function highlightSlope(id) {
+    toggleHovered();
+    updateHoverId(id);
+  }
+
+  function cancelHighlight() {
+    toggleHovered();
+    updateHoverId(null);
+  }
+</script>
+
+<style>
+  .chart {
+    height: 600px;
+    padding: 4em 0 2em 2em;
+    margin: 0 0 36px 0;
+    color: #2f2f2f;
+  }
+
+  .data,
+  .arrows {
+    stroke: #2f2f2f50;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+    stroke-width: 2px;
+    fill: none;
+    transition: all 1s ease-out;
+  }
+
+  .upward {
+    stroke: #233627;
+  }
+  .downward {
+    stroke: #877e76;
+  }
+
+  .arrows {
+    stroke: #2f2f2f75;
+  }
+
+  path.highlight {
+    stroke: rgba(255, 62, 0, 0.8);
+    color: rgba(255, 62, 0, 0.8);
+    z-index: 10;
+  }
+
+  .left-labels,
+  .left-header {
+    text-align: right;
+    margin-right: 1rem;
+    transform: translate(0, -0.5rem);
+    transition: all 1s ease-out;
+  }
+
+  .title {
+    text-align: center;
+    transform: translate(0, -4rem);
+  }
+
+  .right-labels,
+  .right-header {
+    margin-left: 1rem;
+    transform: translate(0, -0.5rem);
+  }
+
+  .left-header,
+  .right-header {
+    transform: translate(0, -2rem);
+  }
+
+  .left-labels,
+  .right-labels,
+  .tool-tip {
+    font-size: 12px;
+    cursor: default;
+  }
+
+  .tool-tip {
+    padding: 0 1rem;
+  }
+
+  .tool-tip-container {
+    font-size: 12px;
+    margin: 0rem;
+    width: max-content;
+    padding: 1rem 0;
+    background-color: white;
+  }
+
+  div.right .tool-tip {
+    text-align: center;
+  }
+
+  .right {
+    float: left;
+    transform: translate(100%, -37%);
+
+    padding: 1rem;
+  }
+
+  .tool-tip {
+    text-align: center;
+  }
+
+  .tool-tip:hover,
+  .left-labels:hover,
+  .right-labels:hover {
+    color: rgba(255, 62, 0, 0.8);
+  }
+
+  .left,
+  .right {
+    border-radius: 50%;
+    border-color: #2f2f2f75;
+    border: 1px dotted #2f2f2f75;
+  }
+
+  .left {
+    float: right;
+    transform: translate(-100%, -37%);
+  }
+  .result h2 {
+    text-align: center;
+    color: rgba(255, 62, 0, 0.8);
+    text-transform: capitalize;
+    transition: all 400ms;
+  }
+
+  .result .yr {
+    display: flex;
+    justify-content: space-around;
+    transition: all 400ms;
+  }
+
+  .l,
+  .r {
+    width: 45%;
+    text-align: center;
+    transition: all 400ms;
+  }
+  .l h3,
+  .r h3 {
+    color: #2f2f2f75;
+    padding: 0.5rem 0;
+    text-decoration: underline;
+  }
+
+  .l p,
+  .r p {
+    padding: 0;
+    margin: 0;
+  }
+
+  @media (max-width: 750px) {
+    h2 {
+      font-size: 1rem;
+      transform: translate(0px, -4rem);
+    }
+
+    .arrows {
+      display: none;
+    }
+  }
+</style>
+
+<div class="chart">
+  <Pancake.Chart {y2} y1={0} x1={0} x2={3}>
+
+    <Pancake.Box {y2}>
+      <div class="left-header">2001</div>
+    </Pancake.Box>
+
+    <Pancake.Box {y2} x1={1} x2={2}>
+      <h2 class="title">UFO Sightings (By Shape)</h2>
+    </Pancake.Box>
+    <Pancake.Box {y2} x1={2} x2={3}>
+      <div class="right-header">2002</div>
+    </Pancake.Box>
+
+    <Pancake.Svg>
+      <Pancake.SvgLine data={rightArrow} let:d>
+        <path class="arrows" {d} />
+      </Pancake.SvgLine>
+      <Pancake.SvgLine data={leftArrow} let:d>
+        <path class="arrows" {d} />
+      </Pancake.SvgLine>
+
+      {#each points as point, i}
+        <Pancake.SvgLine data={point.p} let:d>
+          <path
+            on:mouseenter={() => {
+              highlightSlope(point.id);
+            }}
+            on:mouseout={cancelHighlight}
+            class={`data ${hoverId === point.id ? 'highlight' : point.p[0].y > point.p[1].y ? 'downward' : 'upward'}`}
+            {d} />
+        </Pancake.SvgLine>
+      {/each}
+    </Pancake.Svg>
+
+    {#each data as d, i}
+      {#if leftClusters.find(j => j.shape === d.shape) === undefined}
+        <Pancake.Box x2={1} y2={d.y2001} y1={0}>
+          <div
+            on:mouseenter={() => highlightSlope(d.shape)}
+            on:mouseout={cancelHighlight}
+            class={`left-labels ${d.shape === hoverId ? 'highlight' : ''}`}
+            style={`transform: translate(0, ${left_label_shifts[i]}px)`}>
+            {`${d.shape}`}
+          </div>
+        </Pancake.Box>
+      {/if}
+    {/each}
+    {#each data as d, i}
+      {#if rightClusters.find(j => j.shape === d.shape) === undefined}
+        <Pancake.Box x1={2} x2={3} y2={d.y2002} y1={0}>
+          <div
+            on:mouseenter={() => highlightSlope(d.shape)}
+            on:mouseout={cancelHighlight}
+            class={`right-labels ${d.shape === hoverId ? 'highlight' : ''}`}
+            style={`transform: translate(0, ${right_label_shifts[i]}px)`}>
+            {`${d.shape} `}
+          </div>
+        </Pancake.Box>
+      {/if}
+    {/each}
+    <Pancake.Box
+      x2={1}
+      y2={leftClusters[0].y2001 + 30}
+      y1={leftClusters[0].y2001 + 30 - leftClusters.length * 15}>
+      {#if isLeftToolTip}
+        <div transition:fade class="tool-tip-container left">
+          {#each leftClusters as d}
+            <div
+              on:mouseenter={() => highlightSlope(d.shape)}
+              on:mouseout={cancelHighlight}
+              class={`tool-tip  ${d.shape === hoverId ? 'highlight' : ''}`}>
+              {`${d.shape}`}
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </Pancake.Box>
+
+    <Pancake.Box
+      x1={2}
+      x2={3}
+      y1={rightClusters[0].y2002}
+      y2={rightClusters[0].y2002 - rightClusters.length * 15}>
+      {#if isRightToolTip}
+        <div transition:fade class="tool-tip-container right">
+          {#each rightClusters as d}
+            <div
+              on:mouseenter={() => highlightSlope(d.shape)}
+              on:mouseout={cancelHighlight}
+              class={`tool-tip  ${d.shape === hoverId ? 'highlight' : ''}`}>
+              {`${d.shape}`}
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </Pancake.Box>
+
+    {#if hoverId}
+      <Pancake.Box x1={1} x2={2} y1={400} y2={550}>
+        <div transition:fade class="result">
+          <h2>{hoverId}</h2>
+          <div class="yr">
+            <div class="l">
+              <h3>2001</h3>
+              <p>{displayData.y2001}</p>
+            </div>
+            <div class="r">
+              <h3>2002</h3>
+              <p>{displayData.y2002}</p>
+            </div>
+          </div>
+
+        </div>
+      </Pancake.Box>
+    {/if}
+  </Pancake.Chart>
+</div>
+<p>
+  Based on
+  <a href="http://skedasis.com/d3/slopegraph/">
+    http://skedasis.com/d3/slopegraph/
+  </a>
+</p>
diff --git a/site/examples/data/5/data.js b/site/examples/data/5/data.js
new file mode 100644
index 0000000..3d9b6a8
--- /dev/null
+++ b/site/examples/data/5/data.js
@@ -0,0 +1,23 @@
+export default [
+  { shape: "light", y2001: 730, y2002: 722 },
+  { shape: "triangle", y2001: 362, y2002: 365 },
+  { shape: "unknown", y2001: 302, y2002: 387 },
+  { shape: "circle", y2001: 270, y2002: 305 },
+  { shape: "other", y2001: 266, y2002: 274 },
+  { shape: "disk", y2001: 228, y2002: 259 },
+  { shape: "fireball", y2001: 210, y2002: 194 },
+  { shape: "sphere", y2001: 177, y2002: 195 },
+  { shape: "oval", y2001: 170, y2002: 153 },
+  { shape: "formation", y2001: 125, y2002: 102 },
+  { shape: "cigar", y2001: 100, y2002: 83 },
+  { shape: "changing", y2001: 92, y2002: 112 },
+  { shape: "diamond", y2001: 74, y2002: 62 },
+  { shape: "rectangle", y2001: 58, y2002: 56 },
+  { shape: "flash", y2001: 53, y2002: 72 },
+  { shape: "chevron", y2001: 50, y2002: 66 },
+  { shape: "cylinder", y2001: 50, y2002: 65 },
+  { shape: "egg", y2001: 46, y2002: 53 },
+  { shape: "teardrop", y2001: 38, y2002: 44 },
+  { shape: "cone", y2001: 25, y2002: 21 },
+  { shape: "cross", y2001: 9, y2002: 12 }
+];
diff --git a/site/examples/data/5/meta.json b/site/examples/data/5/meta.json
new file mode 100644
index 0000000..b2239fc
--- /dev/null
+++ b/site/examples/data/5/meta.json
@@ -0,0 +1 @@
+{ "name": "Pancake • Slope graph" }
diff --git a/site/examples/data/index.svelte b/site/examples/data/index.svelte
index 0a995af..f94e836 100644
--- a/site/examples/data/index.svelte
+++ b/site/examples/data/index.svelte
@@ -1,65 +1,101 @@
 <script>
-	import Chart1 from './1/App.svelte';
-import Chart2 from './2/App.svelte';
-import Chart3 from './3/App.svelte';
+  import Chart1 from "./1/App.svelte";
+  import Chart2 from "./2/App.svelte";
+  import Chart3 from "./3/App.svelte";
+  import Chart4 from "./4/App.svelte";
+  import Chart5 from "./5/App.svelte";
 </script>
 
-<div class="chart-preview">
-	<header>
-		<h3>Population pyramid</h3>
-		<p><a href="https://svelte.dev/repl/8686ac654dff448eafbe7cb396b8a058">Edit</a></p>
-	</header>
-	<Chart1/>
-</div>
+<style>
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    border-bottom: 1px solid rgba(255, 62, 0, 0.2);
+    margin: 0 0 1em 0;
+    padding: 0 0 3px 0px;
+    overflow: hidden;
+  }
 
+  h3 {
+    /*border-bottom: 3px solid #ddd;*/
+    margin: 0;
+    line-height: 1;
+  }
 
-<div class="chart-preview">
-	<header>
-		<h3>Life expectancy</h3>
-		<p><a href="https://svelte.dev/repl/3eaa39931e8045cf87da8b482e502c29">Edit</a></p>
-	</header>
-	<Chart2/>
-</div>
+  .chart-preview {
+    margin: 2em 0 6em 0;
+  }
 
+  p {
+    margin: 0;
+    line-height: 1;
+  }
+
+  a {
+    font-size: 14px;
+    color: #ff3e00;
+    border-bottom: 6px solid rgba(255, 62, 0, 0.2);
+    text-decoration: none;
+  }
+</style>
 
 <div class="chart-preview">
-	<header>
-		<h3>Treemap</h3>
-		<p><a href="https://svelte.dev/repl/2a8acd2328ff4a5398def8b8c8252904">Edit</a></p>
-	</header>
-	<Chart3/>
+  <header>
+    <h3>Population pyramid</h3>
+    <p>
+      <a href="https://svelte.dev/repl/8686ac654dff448eafbe7cb396b8a058">
+        Edit
+      </a>
+    </p>
+  </header>
+  <Chart1 />
 </div>
 
-<style>
-	header {
-		display: flex;
-		justify-content: space-between;
-		align-items: baseline;
-		border-bottom: 1px solid rgba(255,62,0,0.2);
-		margin: 0 0 1em 0;
-		padding: 0 0 3px 0px;
-		overflow: hidden;
-	}
-
-	h3 {
-		/*border-bottom: 3px solid #ddd;*/
-		margin: 0;
-		line-height: 1;
-	}
-
-	.chart-preview {
-		margin: 2em 0 6em 0;
-	}
-
-	p {
-		margin: 0;
-		line-height: 1;
-	}
+<div class="chart-preview">
+  <header>
+    <h3>Life expectancy</h3>
+    <p>
+      <a href="https://svelte.dev/repl/3eaa39931e8045cf87da8b482e502c29">
+        Edit
+      </a>
+    </p>
+  </header>
+  <Chart2 />
+</div>
 
-	a {
-		font-size: 14px;
-		color: #ff3e00;
-		border-bottom: 6px solid rgba(255,62,0,0.2);
-		text-decoration: none;
-	}
-</style>
\ No newline at end of file
+<div class="chart-preview">
+  <header>
+    <h3>Treemap</h3>
+    <p>
+      <a href="https://svelte.dev/repl/2a8acd2328ff4a5398def8b8c8252904">
+        Edit
+      </a>
+    </p>
+  </header>
+  <Chart3 />
+</div>
+<div class="chart-preview">
+  <header>
+    <h3>Stacked to Grouped Bars</h3>
+    <p>
+      <a
+        href="https://svelte.dev/repl/34bce599eb744d66b80073d21a67bdc2?version=3.18.1">
+        Edit
+      </a>
+    </p>
+  </header>
+  <Chart4 />
+</div>
+<div>
+  <header>
+    <h3>Slope Graph</h3>
+    <p>
+      <a
+        href="https://svelte.dev/repl/c99280af92464455bb4fa522403bf06a?version=3.18.2">
+        Edit
+      </a>
+    </p>
+  </header>
+  <Chart5 />
+</div>