diff --git a/.changeset/eighty-islands-jam.md b/.changeset/eighty-islands-jam.md
new file mode 100644
index 000000000..4ba875d87
--- /dev/null
+++ b/.changeset/eighty-islands-jam.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix: Improve memory leak caused by detached DOM increase when using Canvas rendering due to sometimes still rendering Svg components (ex. `<g>` vs `<Group>`) (#490)
diff --git a/packages/layerchart/src/lib/components/Axis.svelte b/packages/layerchart/src/lib/components/Axis.svelte
index 2f50ed5c4..eb869a78c 100644
--- a/packages/layerchart/src/lib/components/Axis.svelte
+++ b/packages/layerchart/src/lib/components/Axis.svelte
@@ -104,13 +104,11 @@
   };
 
   export type AxisProps<In extends Transition = Transition> = AxisPropsWithoutHTML<In> &
-    Without<SVGAttributes<SVGGElement>, AxisPropsWithoutHTML<In>>;
+    Without<GroupProps, AxisPropsWithoutHTML<In>>;
 </script>
 
 <script lang="ts" generics="T extends Transition = Transition">
   import { type ComponentProps, type Snippet } from 'svelte';
-  import { fade } from 'svelte/transition';
-  import { cubicIn } from 'svelte/easing';
   import type { SVGAttributes } from 'svelte/elements';
 
   import { extent } from 'd3-array';
@@ -119,6 +117,7 @@
   import { format as formatValue, type FormatType } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
+  import Group, { type GroupProps } from './Group.svelte';
   import Line from './Line.svelte';
   import Rule from './Rule.svelte';
   import Text from './Text.svelte';
@@ -126,7 +125,7 @@
 
   import { getChartContext } from './Chart.svelte';
   import { extractLayerProps, layerClass } from '$lib/utils/attributes.js';
-  import { extractTweenConfig, type MotionProp } from '$lib/utils/motion.svelte.js';
+  import { type MotionProp } from '$lib/utils/motion.svelte.js';
   import { resolveTickVals, type TicksConfig } from '$lib/utils/ticks.js';
 
   let {
@@ -142,8 +141,8 @@
     format,
     tickLabelProps,
     motion,
-    transitionIn: transitionInProp,
-    transitionInParams: transitionInParamsProp,
+    transitionIn,
+    transitionInParams,
     scale: scaleProp,
     classes = {},
     class: className,
@@ -151,13 +150,6 @@
     ...restProps
   }: AxisProps<T> = $props();
 
-  const transitionIn = $derived(
-    transitionInProp ? transitionInProp : extractTweenConfig(motion)?.options ? fade : () => {}
-  ) as T;
-  const transitionInParams = $derived(
-    transitionInParamsProp ? transitionInParamsProp : { easing: cubicIn }
-  );
-
   const ctx = getChartContext();
 
   const orientation = $derived(
@@ -342,7 +334,7 @@
   }) satisfies ComponentProps<typeof Text>;
 </script>
 
-<g
+<Group
   {...restProps}
   data-placement={placement}
   class={cls(layerClass('axis'), `placement-${placement}`, classes.root, className)}
@@ -364,7 +356,7 @@
     <Text {...resolvedLabelProps} />
   {/if}
 
-  {#each tickVals as tick, index (tick)}
+  {#each tickVals as tick, index (tick.toString())}
     {@const tickCoords = getCoords(tick)}
     {@const [radialTickCoordsX, radialTickCoordsY] = pointRadial(tickCoords.x, tickCoords.y)}
     {@const [radialTickMarkCoordsX, radialTickMarkCoordsY] = pointRadial(
@@ -386,7 +378,7 @@
       ),
     }}
 
-    <g in:transitionIn={transitionInParams} class={layerClass('axis-tick-group')}>
+    <Group {transitionIn} {transitionInParams} class={layerClass('axis-tick-group')}>
       {#if grid !== false}
         {@const ruleProps = extractLayerProps(grid, 'axis-grid')}
         <Rule
@@ -404,7 +396,6 @@
           'stroke-surface-content/50',
           classes.tick
         )}
-        <!-- Tick marks -->
         {#if orientation === 'horizontal'}
           <Line
             x1={tickCoords.x}
@@ -434,13 +425,12 @@
           />
         {/if}
       {/if}
-      <!-- TODO: Add tick marks for radial (angle)? -->
 
       {#if tickLabel}
         {@render tickLabel({ props: resolvedTickLabelProps, index })}
       {:else}
         <Text {...resolvedTickLabelProps} />
       {/if}
-    </g>
+    </Group>
   {/each}
-</g>
+</Group>
diff --git a/packages/layerchart/src/lib/components/Bars.svelte b/packages/layerchart/src/lib/components/Bars.svelte
index 1a2524494..329f9516e 100644
--- a/packages/layerchart/src/lib/components/Bars.svelte
+++ b/packages/layerchart/src/lib/components/Bars.svelte
@@ -27,10 +27,13 @@
 </script>
 
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+
   import Bar, { type BarProps, type BarPropsWithoutHTML } from './Bar.svelte';
+  import Group from './Group.svelte';
+
   import { chartDataArray } from '../utils/common.js';
   import { getChartContext } from './Chart.svelte';
-  import type { Snippet } from 'svelte';
   import { extractLayerProps, layerClass } from '$lib/utils/attributes.js';
 
   let {
@@ -49,7 +52,7 @@
   const data = $derived(chartDataArray(dataProp ?? ctx.data));
 </script>
 
-<g class={layerClass('bars')}>
+<Group class={layerClass('bars')}>
   {#if children}
     {@render children()}
   {:else}
@@ -65,4 +68,4 @@
       />
     {/each}
   {/if}
-</g>
+</Group>
diff --git a/packages/layerchart/src/lib/components/Blur.svelte b/packages/layerchart/src/lib/components/Blur.svelte
index c5ff138a8..ce8abf54a 100644
--- a/packages/layerchart/src/lib/components/Blur.svelte
+++ b/packages/layerchart/src/lib/components/Blur.svelte
@@ -21,22 +21,28 @@
 </script>
 
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { getRenderContext } from './Chart.svelte';
   import { createId } from '$lib/utils/createId.js';
   import { layerClass } from '$lib/utils/attributes.js';
-  import type { Snippet } from 'svelte';
+
   const uid = $props.id();
 
   let { id = createId('blur-', uid), stdDeviation = 5, children }: BlurProps = $props();
+
+  const renderContext = getRenderContext();
 </script>
 
-<defs>
-  <filter {id} class={layerClass('blur-filter')}>
-    <feGaussianBlur in="SourceGraphic" {stdDeviation} />
-  </filter>
-</defs>
+{#if renderContext === 'svg'}
+  <defs>
+    <filter {id} class={layerClass('blur-filter')}>
+      <feGaussianBlur in="SourceGraphic" {stdDeviation} />
+    </filter>
+  </defs>
 
-{#if children}
-  <g filter="url(#{id})" class={layerClass('blur-g')}>
-    {@render children({ id, url: `url(#${id})` })}
-  </g>
+  {#if children}
+    <g filter="url(#{id})" class={layerClass('blur-g')}>
+      {@render children({ id, url: `url(#${id})` })}
+    </g>
+  {/if}
 {/if}
diff --git a/packages/layerchart/src/lib/components/ClipPath.svelte b/packages/layerchart/src/lib/components/ClipPath.svelte
index 38d0db341..64dc9e026 100644
--- a/packages/layerchart/src/lib/components/ClipPath.svelte
+++ b/packages/layerchart/src/lib/components/ClipPath.svelte
@@ -4,6 +4,7 @@
   import { layerClass } from '$lib/utils/attributes.js';
   import type { Snippet } from 'svelte';
   import type { SVGAttributes } from 'svelte/elements';
+  import { getRenderContext } from './Chart.svelte';
 
   export type ClipPathPropsWithoutHTML = {
     /**
@@ -55,20 +56,24 @@
   }: ClipPathPropsWithoutHTML = $props();
 
   const url = $derived(`url(#${id})`);
+
+  const renderContext = getRenderContext();
 </script>
 
-<defs>
-  <clipPath {id} {...restProps}>
-    {@render clip?.({ id })}
+{#if renderContext === 'svg'}
+  <defs>
+    <clipPath {id} {...restProps}>
+      {@render clip?.({ id })}
 
-    {#if useId}
-      <use href="#{useId}" />
-    {/if}
-  </clipPath>
-</defs>
+      {#if useId}
+        <use href="#{useId}" />
+      {/if}
+    </clipPath>
+  </defs>
+{/if}
 
 {#if children}
-  {#if disabled}
+  {#if disabled || renderContext !== 'svg'}
     {@render children({ id, url, useId })}
   {:else}
     <g style:clip-path={url} class={layerClass('clip-path-g')}>
diff --git a/packages/layerchart/src/lib/components/GeoEdgeFade.svelte b/packages/layerchart/src/lib/components/GeoEdgeFade.svelte
index 17d7c0fb4..8a5e049ff 100644
--- a/packages/layerchart/src/lib/components/GeoEdgeFade.svelte
+++ b/packages/layerchart/src/lib/components/GeoEdgeFade.svelte
@@ -15,7 +15,7 @@
   };
 
   export type GeoEdgeFadeProps = GeoEdgeFadePropsWithoutHTML &
-    Without<SVGAttributes<SVGGElement>, GeoEdgeFadePropsWithoutHTML>;
+    Without<GroupProps, GeoEdgeFadePropsWithoutHTML>;
 </script>
 
 <script lang="ts">
@@ -23,6 +23,7 @@
   import { geoDistance } from 'd3-geo';
 
   import { getGeoContext } from './GeoContext.svelte';
+  import Group, { type GroupProps } from './Group.svelte';
   import { extractLayerProps } from '$lib/utils/attributes.js';
 
   let {
@@ -55,6 +56,6 @@
   const opacity = $derived(opacityProp ?? clamper(fade(distance)));
 </script>
 
-<g {opacity} bind:this={ref} {...extractLayerProps(restProps, 'geo-edge-fade')}>
+<Group {opacity} bind:ref {...extractLayerProps(restProps, 'geo-edge-fade')}>
   {@render children?.()}
-</g>
+</Group>
diff --git a/packages/layerchart/src/lib/components/Graticule.svelte b/packages/layerchart/src/lib/components/Graticule.svelte
index 144bed936..67f587925 100644
--- a/packages/layerchart/src/lib/components/Graticule.svelte
+++ b/packages/layerchart/src/lib/components/Graticule.svelte
@@ -16,6 +16,7 @@
 <script lang="ts">
   import { geoGraticule } from 'd3-geo';
   import { extractLayerProps, layerClass } from '$lib/utils/attributes.js';
+  import Group from './Group.svelte';
 
   let { lines, outline, step = [10, 10], ...restProps }: GraticuleProps = $props();
 
@@ -26,7 +27,7 @@
   });
 </script>
 
-<g class={layerClass('graticule-g')}>
+<Group class={layerClass('graticule-g')}>
   <!-- TODO: Any reason to still render the single `MultiLineString` path if using `lines` and/or `outline` -->
   {#if !lines && !outline}
     <GeoPath geojson={graticule()} {...extractLayerProps(restProps, 'graticule-geo-path')} />
@@ -44,4 +45,4 @@
       {...extractLayerProps(outline, 'graticule-geo-outline')}
     />
   {/if}
-</g>
+</Group>
diff --git a/packages/layerchart/src/lib/components/Grid.svelte b/packages/layerchart/src/lib/components/Grid.svelte
index 33101f728..64e004c91 100644
--- a/packages/layerchart/src/lib/components/Grid.svelte
+++ b/packages/layerchart/src/lib/components/Grid.svelte
@@ -77,7 +77,7 @@
   };
 
   export type GridProps<In extends Transition = Transition> = Omit<
-    GridPropsWithoutHTML<In> & Without<SVGAttributes<SVGGElement>, GridPropsWithoutHTML<In>>,
+    GridPropsWithoutHTML<In> & Without<GroupProps, GridPropsWithoutHTML<In>>,
     'children'
   >;
 </script>
@@ -93,6 +93,7 @@
   import { isScaleBand } from '$lib/utils/scales.svelte.js';
 
   import Circle from './Circle.svelte';
+  import Group, { type GroupProps } from './Group.svelte';
   import Line from './Line.svelte';
   import Rule from './Rule.svelte';
   import Spline from './Spline.svelte';
@@ -150,11 +151,11 @@
   );
 </script>
 
-<g bind:this={ref} class={cls(layerClass('grid'), classes.root, className)} {...restProps}>
+<Group bind:ref class={cls(layerClass('grid'), classes.root, className)} {...restProps}>
   {#if x}
     {@const splineProps = extractLayerProps(x, 'grid-x-line')}
 
-    <g in:transitionIn={transitionInParams} class={layerClass('grid-x')}>
+    <Group {transitionIn} {transitionInParams} class={layerClass('grid-x')}>
       {#each xTickVals as x (x)}
         {#if ctx.radial}
           {@const [x1, y1] = pointRadial(ctx.xScale(x), ctx.yRange[0])}
@@ -204,12 +205,12 @@
           )}
         />
       {/if}
-    </g>
+    </Group>
   {/if}
 
   {#if y}
     {@const splineProps = extractLayerProps(y, 'grid-y-line')}
-    <g in:transitionIn={transitionInParams} class={layerClass('grid-y')}>
+    <Group {transitionIn} {transitionInParams} class={layerClass('grid-y')}>
       {#each yTickVals as y (y)}
         {#if ctx.radial}
           {#if radialY === 'circle'}
@@ -285,6 +286,6 @@
           />
         {/if}
       {/if}
-    </g>
+    </Group>
   {/if}
-</g>
+</Group>
diff --git a/packages/layerchart/src/lib/components/Group.svelte b/packages/layerchart/src/lib/components/Group.svelte
index ad3c94bfc..38d50c197 100644
--- a/packages/layerchart/src/lib/components/Group.svelte
+++ b/packages/layerchart/src/lib/components/Group.svelte
@@ -1,10 +1,10 @@
 <script lang="ts" module>
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes, TouchEventHandler } from 'svelte/elements';
-  import type { Without } from '$lib/utils/types.js';
-  import { createMotion, type MotionProp } from '$lib/utils/motion.svelte.js';
+  import type { Transition, TransitionParams, Without } from '$lib/utils/types.js';
+  import { createMotion, extractTweenConfig, type MotionProp } from '$lib/utils/motion.svelte.js';
 
-  export type GroupPropsWithoutHTML = {
+  export type GroupPropsWithoutHTML<In extends Transition = Transition> = {
     /**
      * Translate x
      */
@@ -44,6 +44,11 @@
      */
     preventTouchMove?: boolean;
 
+    /**
+     * The opacity of the element. (0 to 1)
+     */
+    opacity?: number;
+
     children?: Snippet;
 
     /**
@@ -56,13 +61,28 @@
     ref?: Element;
 
     motion?: MotionProp;
+
+    /**
+     * Transition function for entering elements
+     * @default defaults to fade if the motion prop is set to tweened
+     */
+    transitionIn?: In;
+
+    /**
+     * Parameters for the transitionIn function
+     * @default { easing: cubicIn }
+     */
+    transitionInParams?: TransitionParams<In>;
   };
 
   export type GroupProps = GroupPropsWithoutHTML &
     Without<HTMLAttributes<Element>, GroupPropsWithoutHTML>;
 </script>
 
-<script lang="ts">
+<script lang="ts" generics="T extends Transition = Transition">
+  import { fade } from 'svelte/transition';
+  import { cubicIn } from 'svelte/easing';
+
   import { cls } from '@layerstack/tailwind';
 
   import { getRenderContext } from './Chart.svelte';
@@ -80,7 +100,10 @@
     initialY: initialYProp,
     center = false,
     preventTouchMove = false,
+    opacity = 1,
     motion,
+    transitionIn: transitionInProp,
+    transitionInParams: transitionInParamsProp,
     class: className,
     children,
     ref: refProp = $bindable(),
@@ -101,6 +124,13 @@
   const motionX = createMotion(initialX, () => trueX, motion);
   const motionY = createMotion(initialY, () => trueY, motion);
 
+  const transitionIn = $derived(
+    transitionInProp ? transitionInProp : extractTweenConfig(motion)?.options ? fade : () => {}
+  ) as T;
+  const transitionInParams = $derived(
+    transitionInParamsProp ? transitionInParamsProp : { easing: cubicIn }
+  );
+
   const transform = $derived.by(() => {
     if (center || x != null || y != null) {
       return `translate(${motionX.current}px, ${motionY.current}px)`;
@@ -113,7 +143,13 @@
     registerCanvasComponent({
       name: 'Group',
       render: (ctx) => {
+        const currentGlobalAlpha = ctx.globalAlpha;
+        ctx.globalAlpha = opacity;
+
         ctx.translate(motionX.current ?? 0, motionY.current ?? 0);
+
+        // Restore in case it was modified by `opacity`
+        ctx.globalAlpha = currentGlobalAlpha;
       },
       retainState: true,
       events: {
@@ -124,7 +160,7 @@
         pointerleave: restProps.onpointerleave,
         pointerdown: restProps.onpointerdown,
       },
-      deps: () => [motionX.current, motionY.current],
+      deps: () => [motionX.current, motionY.current, opacity],
     });
   }
 
@@ -143,6 +179,8 @@
   <g
     style:transform
     class={cls(layerClass('group-g'), className)}
+    in:transitionIn={transitionInParams}
+    {opacity}
     {...restProps}
     ontouchmove={handleTouchMove}
     bind:this={ref}
@@ -153,6 +191,8 @@
   <div
     bind:this={ref}
     style:transform
+    style:opacity
+    in:transitionIn={transitionInParams}
     {...restProps}
     class={cls(layerClass('group-div'), 'absolute', className)}
     ontouchmove={handleTouchMove}
diff --git a/packages/layerchart/src/lib/components/Hull.svelte b/packages/layerchart/src/lib/components/Hull.svelte
index 0da946f7c..7459d06da 100644
--- a/packages/layerchart/src/lib/components/Hull.svelte
+++ b/packages/layerchart/src/lib/components/Hull.svelte
@@ -49,8 +49,7 @@
     ref?: SVGGElement;
   };
 
-  export type HullProps = HullPropsWithoutHTML &
-    Without<SVGAttributes<SVGElement>, HullPropsWithoutHTML>;
+  export type HullProps = HullPropsWithoutHTML & Without<GroupProps, HullPropsWithoutHTML>;
 </script>
 
 <script lang="ts">
@@ -62,6 +61,7 @@
   import { cls } from '@layerstack/tailwind';
 
   import GeoPath from './GeoPath.svelte';
+  import Group, { type GroupProps } from './Group.svelte';
   import Spline from './Spline.svelte';
   import { getChartContext } from './Chart.svelte';
   import { getGeoContext } from './GeoContext.svelte';
@@ -104,7 +104,7 @@
   );
 </script>
 
-<g {...restProps} class={cls(layerClass('hull-g'), classes.root, className)} bind:this={ref}>
+<Group {...restProps} class={cls(layerClass('hull-g'), classes.root, className)} bind:ref>
   {#if geoCtx.projection}
     {@const polygon = geoVoronoi().hull(points)}
     <GeoPath
@@ -129,4 +129,4 @@
       {onpointerleave}
     />
   {/if}
-</g>
+</Group>
diff --git a/packages/layerchart/src/lib/components/Labels.svelte b/packages/layerchart/src/lib/components/Labels.svelte
index 4040314e2..92d8583d0 100644
--- a/packages/layerchart/src/lib/components/Labels.svelte
+++ b/packages/layerchart/src/lib/components/Labels.svelte
@@ -73,6 +73,7 @@
 
   import { isScaleBand } from '$lib/utils/scales.svelte.js';
   import { getChartContext } from './Chart.svelte';
+  import Group from './Group.svelte';
   import { extractLayerProps, layerClass } from '$lib/utils/attributes.js';
 
   const ctx = getChartContext();
@@ -172,7 +173,7 @@
   }
 </script>
 
-<g class={layerClass('labels-g')}>
+<Group class={layerClass('labels-g')}>
   <Points {data} {x} {y}>
     {#snippet children({ points })}
       {#each points as point, i (key(point.data, i))}
@@ -196,4 +197,4 @@
       {/each}
     {/snippet}
   </Points>
-</g>
+</Group>
diff --git a/packages/layerchart/src/lib/components/Rule.svelte b/packages/layerchart/src/lib/components/Rule.svelte
index b33199f55..44029247b 100644
--- a/packages/layerchart/src/lib/components/Rule.svelte
+++ b/packages/layerchart/src/lib/components/Rule.svelte
@@ -52,6 +52,7 @@
   import { cls } from '@layerstack/tailwind';
 
   import Circle from './Circle.svelte';
+  import Group from './Group.svelte';
   import Line, { type LinePropsWithoutHTML } from './Line.svelte';
   import { getChartContext } from './Chart.svelte';
   import { layerClass } from '$lib/utils/attributes.js';
@@ -87,7 +88,7 @@
   }
 </script>
 
-<g class={layerClass('rule-g')}>
+<Group class={layerClass('rule-g')}>
   {#if showRule(x, 'x')}
     {@const xCoord =
       x === true || x === 'left'
@@ -153,4 +154,4 @@
       />
     {/if}
   {/if}
-</g>
+</Group>
diff --git a/packages/layerchart/src/lib/components/Voronoi.svelte b/packages/layerchart/src/lib/components/Voronoi.svelte
index a06047f0f..433b336d8 100644
--- a/packages/layerchart/src/lib/components/Voronoi.svelte
+++ b/packages/layerchart/src/lib/components/Voronoi.svelte
@@ -50,7 +50,7 @@
   };
 
   export type VoronoiProps = VoronoiPropsWithoutHTML &
-    Without<Omit<SVGAttributes<SVGGElement>, 'children'>, VoronoiPropsWithoutHTML>;
+    Without<Omit<GroupProps, 'children'>, VoronoiPropsWithoutHTML>;
 </script>
 
 <script lang="ts">
@@ -63,6 +63,7 @@
   import { cls } from '@layerstack/tailwind';
 
   import GeoPath from './GeoPath.svelte';
+  import Group, { type GroupProps } from './Group.svelte';
   import Spline from './Spline.svelte';
   import { getChartContext } from './Chart.svelte';
   import { getGeoContext } from './GeoContext.svelte';
@@ -110,7 +111,7 @@
   const boundHeight = $derived(Math.max(ctx.height, 0));
 </script>
 
-<g {...restProps} class={cls(layerClass('voronoi-g'), classes.root, className)}>
+<Group {...restProps} class={cls(layerClass('voronoi-g'), classes.root, className)}>
   {#if geo.projection}
     {@const polygons = geoVoronoi().polygons(points)}
     {#each polygons.features as feature}
@@ -158,4 +159,4 @@
       {/if}
     {/each}
   {/if}
-</g>
+</Group>
diff --git a/packages/layerchart/src/routes/_NavMenu.svelte b/packages/layerchart/src/routes/_NavMenu.svelte
index db01243a2..a395e5bd7 100644
--- a/packages/layerchart/src/routes/_NavMenu.svelte
+++ b/packages/layerchart/src/routes/_NavMenu.svelte
@@ -128,6 +128,7 @@
     'series_arrays',
     'dimension_arrays',
     'dimension_arrays_processed',
+    'streaming',
   ];
 </script>
 
diff --git a/packages/layerchart/src/routes/docs/performance/dimension_arrays/+page.svelte b/packages/layerchart/src/routes/docs/performance/dimension_arrays/+page.svelte
index fd0dfceed..d66894cc8 100644
--- a/packages/layerchart/src/routes/docs/performance/dimension_arrays/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/dimension_arrays/+page.svelte
@@ -10,8 +10,10 @@
   const { data } = $props();
 
   let example = $state<'single'>('single');
+
   let renderContext = $state<'svg' | 'canvas'>('svg');
   let motion = $state(true);
+  let show = $state(true);
 
   let chartProps = $derived<ComponentProps<typeof LineChart>['props']>({
     xAxis: { format: (v) => format(new Date(v)) },
@@ -25,7 +27,7 @@
 </script>
 
 <div class="grid gap-4">
-  <div class="grid grid-cols-3 gap-3">
+  <div class="flex gap-3">
     <Field label="Render context">
       <ToggleGroup bind:value={renderContext} variant="outline">
         <ToggleOption value="svg">Svg</ToggleOption>
@@ -39,6 +41,13 @@
         <ToggleOption value={false}>No</ToggleOption>
       </ToggleGroup>
     </Field>
+
+    <Field label="Show">
+      <ToggleGroup bind:value={show} variant="outline">
+        <ToggleOption value={true}>Yes</ToggleOption>
+        <ToggleOption value={false}>No</ToggleOption>
+      </ToggleGroup>
+    </Field>
   </div>
 
   <ToggleGroup bind:value={example} variant="underline" classes={{ options: 'justify-start h-10' }}>
@@ -51,15 +60,17 @@
       {#if example === 'single'}
         <Preview data={[data.chartData.date[0], data.chartData.cpu[0]]}>
           <div class="h-[500px] p-4 border rounded-sm">
-            <LineChart
-              data={zip(data.chartData.date, data.chartData.cpu)}
-              x={(d) => d[0]}
-              y={(d) => d[1]}
-              props={chartProps}
-              brush
-              {renderContext}
-              profile
-            />
+            {#if show}
+              <LineChart
+                data={zip(data.chartData.date, data.chartData.cpu)}
+                x={(d) => d[0]}
+                y={(d) => d[1]}
+                props={chartProps}
+                brush
+                {renderContext}
+                profile
+              />
+            {/if}
           </div>
         </Preview>
       {:else if example === 'series'}
@@ -72,31 +83,33 @@
           }}
         >
           <div class="h-[500px] p-4 border rounded-sm">
-            <LineChart
-              x={(d) => d[0]}
-              y={(d) => d[1]}
-              series={[
-                {
-                  key: 'cpu',
-                  data: zip(data.chartData.date, data.chartData.cpu),
-                  color: 'var(--color-danger)',
-                },
-                {
-                  key: 'ram',
-                  data: zip(data.chartData.date, data.chartData.ram),
-                  color: 'var(--color-warning)',
-                },
-                {
-                  key: 'tcp',
-                  data: zip(data.chartData.date, data.chartData.tcp),
-                  color: 'var(--color-success)',
-                },
-              ]}
-              props={chartProps}
-              brush
-              {renderContext}
-              profile
-            />
+            {#if show}
+              <LineChart
+                x={(d) => d[0]}
+                y={(d) => d[1]}
+                series={[
+                  {
+                    key: 'cpu',
+                    data: zip(data.chartData.date, data.chartData.cpu),
+                    color: 'var(--color-danger)',
+                  },
+                  {
+                    key: 'ram',
+                    data: zip(data.chartData.date, data.chartData.ram),
+                    color: 'var(--color-warning)',
+                  },
+                  {
+                    key: 'tcp',
+                    data: zip(data.chartData.date, data.chartData.tcp),
+                    color: 'var(--color-success)',
+                  },
+                ]}
+                props={chartProps}
+                brush
+                {renderContext}
+                profile
+              />
+            {/if}
           </div>
         </Preview>
       {/if}
diff --git a/packages/layerchart/src/routes/docs/performance/dimension_arrays_processed/+page.svelte b/packages/layerchart/src/routes/docs/performance/dimension_arrays_processed/+page.svelte
index abaaf60f3..d1c627c57 100644
--- a/packages/layerchart/src/routes/docs/performance/dimension_arrays_processed/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/dimension_arrays_processed/+page.svelte
@@ -10,8 +10,10 @@
   const { data } = $props();
 
   let example = $state<'single'>('single');
+
   let renderContext = $state<'svg' | 'canvas'>('svg');
   let motion = $state(true);
+  let show = $state(true);
 
   let chartProps = $derived<ComponentProps<typeof LineChart>['props']>({
     xAxis: { format: (v) => format(new Date(v)) },
@@ -31,7 +33,7 @@
 </script>
 
 <div class="grid gap-4">
-  <div class="grid grid-cols-3 gap-3">
+  <div class="flex gap-3">
     <Field label="Render context">
       <ToggleGroup bind:value={renderContext} variant="outline">
         <ToggleOption value="svg">Svg</ToggleOption>
@@ -45,6 +47,13 @@
         <ToggleOption value={false}>No</ToggleOption>
       </ToggleGroup>
     </Field>
+
+    <Field label="Show">
+      <ToggleGroup bind:value={show} variant="outline">
+        <ToggleOption value={true}>Yes</ToggleOption>
+        <ToggleOption value={false}>No</ToggleOption>
+      </ToggleGroup>
+    </Field>
   </div>
 
   <ToggleGroup bind:value={example} variant="underline" classes={{ options: 'justify-start h-10' }}>
@@ -57,45 +66,49 @@
       {#if example === 'single'}
         <Preview data={chartData.cpu[0]}>
           <div class="h-[500px] p-4 border rounded-sm">
-            <LineChart
-              data={chartData.cpu}
-              x={(d) => d[0]}
-              y={(d) => d[1]}
-              props={chartProps}
-              brush
-              {renderContext}
-              profile
-            />
+            {#if show}
+              <LineChart
+                data={chartData.cpu}
+                x={(d) => d[0]}
+                y={(d) => d[1]}
+                props={chartProps}
+                brush
+                {renderContext}
+                profile
+              />
+            {/if}
           </div>
         </Preview>
       {:else if example === 'series'}
         <Preview data={{ cpu: chartData.cpu[0], ram: chartData.ram[0], tcp: chartData.tcp[0] }}>
           <div class="h-[500px] p-4 border rounded-sm">
-            <LineChart
-              x={(d) => d[0]}
-              y={(d) => d[1]}
-              series={[
-                {
-                  key: 'cpu',
-                  data: chartData.cpu,
-                  color: 'var(--color-danger)',
-                },
-                {
-                  key: 'ram',
-                  data: chartData.ram,
-                  color: 'var(--color-warning)',
-                },
-                {
-                  key: 'tcp',
-                  data: chartData.tcp,
-                  color: 'var(--color-success)',
-                },
-              ]}
-              props={chartProps}
-              brush
-              {renderContext}
-              profile
-            />
+            {#if show}
+              <LineChart
+                x={(d) => d[0]}
+                y={(d) => d[1]}
+                series={[
+                  {
+                    key: 'cpu',
+                    data: chartData.cpu,
+                    color: 'var(--color-danger)',
+                  },
+                  {
+                    key: 'ram',
+                    data: chartData.ram,
+                    color: 'var(--color-warning)',
+                  },
+                  {
+                    key: 'tcp',
+                    data: chartData.tcp,
+                    color: 'var(--color-success)',
+                  },
+                ]}
+                props={chartProps}
+                brush
+                {renderContext}
+                profile
+              />
+            {/if}
           </div>
         </Preview>
       {/if}
diff --git a/packages/layerchart/src/routes/docs/performance/series_arrays/+page.svelte b/packages/layerchart/src/routes/docs/performance/series_arrays/+page.svelte
index 53857c34b..7948ddbac 100644
--- a/packages/layerchart/src/routes/docs/performance/series_arrays/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/series_arrays/+page.svelte
@@ -9,8 +9,10 @@
   const { data } = $props();
 
   let example = $state<'single'>('single');
+
   let renderContext = $state<'svg' | 'canvas'>('svg');
   let motion = $state(true);
+  let show = $state(true);
 
   let chartProps = $derived<ComponentProps<typeof LineChart>['props']>({
     xAxis: { format: (v) => format(new Date(v)) },
@@ -24,7 +26,7 @@
 </script>
 
 <div class="grid gap-4">
-  <div class="grid grid-cols-3 gap-3">
+  <div class="flex gap-3">
     <Field label="Render context">
       <ToggleGroup bind:value={renderContext} variant="outline">
         <ToggleOption value="svg">Svg</ToggleOption>
@@ -38,6 +40,13 @@
         <ToggleOption value={false}>No</ToggleOption>
       </ToggleGroup>
     </Field>
+
+    <Field label="Show">
+      <ToggleGroup bind:value={show} variant="outline">
+        <ToggleOption value={true}>Yes</ToggleOption>
+        <ToggleOption value={false}>No</ToggleOption>
+      </ToggleGroup>
+    </Field>
   </div>
 
   <ToggleGroup bind:value={example} variant="underline" classes={{ options: 'justify-start h-10' }}>
@@ -50,33 +59,37 @@
       {#if example === 'single'}
         <Preview data={data.chartData.cpu[0]}>
           <div class="h-[500px] p-4 border rounded-sm">
-            <LineChart
-              data={data.chartData.cpu}
-              x="x"
-              y="y"
-              props={chartProps}
-              brush
-              {renderContext}
-              profile
-            />
+            {#if show}
+              <LineChart
+                data={data.chartData.cpu}
+                x="x"
+                y="y"
+                props={chartProps}
+                brush
+                {renderContext}
+                profile
+              />
+            {/if}
           </div>
         </Preview>
       {:else if example === 'series'}
         <Preview data={data.chartData.cpu[0]}>
           <div class="h-[500px] p-4 border rounded-sm">
-            <LineChart
-              x="x"
-              y="y"
-              series={[
-                { key: 'cpu', data: data.chartData.cpu, color: 'var(--color-danger)' },
-                { key: 'ram', data: data.chartData.ram, color: 'var(--color-warning)' },
-                { key: 'tcp', data: data.chartData.tcp, color: 'var(--color-success)' },
-              ]}
-              props={chartProps}
-              brush
-              {renderContext}
-              profile
-            />
+            {#if show}
+              <LineChart
+                x="x"
+                y="y"
+                series={[
+                  { key: 'cpu', data: data.chartData.cpu, color: 'var(--color-danger)' },
+                  { key: 'ram', data: data.chartData.ram, color: 'var(--color-warning)' },
+                  { key: 'tcp', data: data.chartData.tcp, color: 'var(--color-success)' },
+                ]}
+                props={chartProps}
+                brush
+                {renderContext}
+                profile
+              />
+            {/if}
           </div>
         </Preview>
       {/if}
diff --git a/packages/layerchart/src/routes/docs/performance/streaming/+page.svelte b/packages/layerchart/src/routes/docs/performance/streaming/+page.svelte
new file mode 100644
index 000000000..2afac6748
--- /dev/null
+++ b/packages/layerchart/src/routes/docs/performance/streaming/+page.svelte
@@ -0,0 +1,179 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { LineChart } from 'layerchart';
+  import { Button, ButtonGroup, Field, TextField, ToggleGroup, ToggleOption } from 'svelte-ux';
+  import { format } from '@layerstack/utils';
+
+  let renderContext = $state<'svg' | 'canvas'>('canvas');
+  let motion = $state(true);
+  let show = $state(true);
+
+  let xPoints = $state(100);
+  let maxLength = $state(4000);
+  let chartData = $state<{ date: Date; value: number }[]>([]);
+  // let chartData = $state.raw<{ date: Date; value: number }[]>([]);
+  let isStreaming = $state(false);
+  let intervalId: any = null;
+
+  function generateDataPoint(
+    referenceDate: Date,
+    valueRange: [number, number]
+  ): { date: Date; value: number } {
+    const value = Math.floor(Math.random() * (valueRange[1] - valueRange[0] + 1)) + valueRange[0];
+    return {
+      date: new Date(referenceDate),
+      value: isFinite(value) ? value : valueRange[0],
+    };
+  }
+
+  function generateDataPoints(
+    count: number,
+    startDate: Date,
+    dayIncrement: number,
+    valueRange: [number, number]
+  ): { date: Date; value: number }[] {
+    const points: { date: Date; value: number }[] = [];
+    for (let i = 0; i < count; i++) {
+      const date = new Date(startDate.getTime() + i * dayIncrement * 24 * 60 * 60 * 1000);
+      if (isNaN(date.getTime())) continue;
+      points.push(generateDataPoint(date, valueRange));
+    }
+    return points;
+  }
+
+  function startStreaming() {
+    if (isStreaming) return;
+    isStreaming = true;
+
+    // Get the latest date from the current data or use the last sample date
+    const latestDate =
+      chartData.length > 0
+        ? chartData[chartData.length - 1].date
+        : new Date('2025-04-07T22:00:00.000Z');
+    let nextDate = new Date(latestDate.getTime() + 24 * 60 * 60 * 1000); // Start from the next day
+
+    intervalId = setInterval(() => {
+      const newPoints = generateDataPoints(xPoints, nextDate, 1, [0, 100]);
+
+      // mutate in place
+      chartData.splice(0, Math.max(0, chartData.length + newPoints.length - maxLength));
+      chartData.push(...newPoints);
+
+      // chartData = [
+      //   ...chartData.slice(Math.max(0, chartData.length + newPoints.length - maxLength)),
+      //   ...newPoints,
+      // ];
+
+      nextDate = new Date(nextDate.getTime() + xPoints * 24 * 60 * 60 * 1000);
+    }, 1000);
+  }
+
+  function stopStreaming() {
+    if (intervalId !== null) {
+      clearInterval(intervalId);
+      intervalId = null;
+    }
+    isStreaming = false;
+  }
+
+  function loadRandomData() {
+    const latestDate =
+      chartData.length > 0
+        ? chartData[chartData.length - 1].date
+        : new Date('2025-04-07T22:00:00.000Z');
+    let nextDate = new Date(latestDate.getTime() + 24 * 60 * 60 * 1000); // Start from the next day
+    const newPoints = generateDataPoints(xPoints, nextDate, 1, [0, 100]);
+
+    // mutate in place
+    chartData.splice(0, Math.max(0, chartData.length + newPoints.length - maxLength));
+    chartData.push(...newPoints);
+    chartData = chartData;
+  }
+
+  // Clear all data
+  function clearData() {
+    stopStreaming();
+    chartData = [];
+  }
+
+  // Start streaming on mount (optional, or triggered by button)
+  onMount(() => {
+    // Uncomment to start streaming automatically
+    // startStreaming();
+    return () => stopStreaming(); // Cleanup on component destroy
+  });
+
+  // Ensure cleanup on destroy
+  onDestroy(() => stopStreaming());
+</script>
+
+<div class="grid gap-4">
+  <div class="flex gap-3">
+    <Field label="Render context">
+      <ToggleGroup bind:value={renderContext} variant="outline">
+        <ToggleOption value="svg">Svg</ToggleOption>
+        <ToggleOption value="canvas">Canvas</ToggleOption>
+      </ToggleGroup>
+    </Field>
+
+    <Field label="Motion">
+      <ToggleGroup bind:value={motion} variant="outline">
+        <ToggleOption value={true}>Yes</ToggleOption>
+        <ToggleOption value={false}>No</ToggleOption>
+      </ToggleGroup>
+    </Field>
+
+    <Field label="Show">
+      <ToggleGroup bind:value={show} variant="outline">
+        <ToggleOption value={true}>Yes</ToggleOption>
+        <ToggleOption value={false}>No</ToggleOption>
+      </ToggleGroup>
+    </Field>
+  </div>
+
+  <div class="m-2 flex items-end gap-2">
+    <ButtonGroup _size="sm" variant="fill-light">
+      <Button onclick={() => startStreaming()} disabled={isStreaming}>Start</Button>
+      <Button onclick={() => stopStreaming()} disabled={!isStreaming}>Stop</Button>
+    </ButtonGroup>
+    <Button onclick={() => clearData()} variant="fill-light">Clear</Button>
+    <Button onclick={() => loadRandomData()} variant="fill-light">Load more</Button>
+
+    <TextField
+      label="Frequency (Hz)"
+      bind:value={xPoints}
+      type="integer"
+      min={1}
+      step={100}
+      dense
+    />
+    <TextField
+      label="Buffer size"
+      bind:value={maxLength}
+      type="integer"
+      min={1}
+      step={4000}
+      dense
+    />
+  </div>
+
+  <div class="h-[500px] p-4 border rounded-sm">
+    {#if show}
+      <LineChart
+        x="date"
+        data={chartData}
+        series={[
+          {
+            key: 'value',
+            // color: '#0f0f0f',
+            color: 'var(--color-primary)',
+          },
+        ]}
+        {renderContext}
+        brush
+      />
+    {/if}
+  </div>
+
+  data: {format(chartData.length)} points
+</div>
diff --git a/packages/layerchart/src/routes/docs/performance/wide_data/+page.svelte b/packages/layerchart/src/routes/docs/performance/wide_data/+page.svelte
index a3971fd13..458cb5e27 100644
--- a/packages/layerchart/src/routes/docs/performance/wide_data/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/wide_data/+page.svelte
@@ -12,6 +12,8 @@
 
   let renderContext = $state<'svg' | 'canvas'>('svg');
   let motion = $state(true);
+  let show = $state(true);
+
   let chartProps = $derived<ComponentProps<typeof LineChart>['props']>({
     xAxis: { format: (v) => format(new Date(v * 60 * 1000)) },
     yAxis: { format: 'metric' },
@@ -24,7 +26,7 @@
 </script>
 
 <div class="grid gap-4">
-  <div class="grid grid-cols-3 gap-3">
+  <div class="flex gap-3">
     <Field label="Render context">
       <ToggleGroup bind:value={renderContext} variant="outline">
         <ToggleOption value="svg">Svg</ToggleOption>
@@ -38,6 +40,13 @@
         <ToggleOption value={false}>No</ToggleOption>
       </ToggleGroup>
     </Field>
+
+    <Field label="Show">
+      <ToggleGroup bind:value={show} variant="outline">
+        <ToggleOption value={true}>Yes</ToggleOption>
+        <ToggleOption value={false}>No</ToggleOption>
+      </ToggleGroup>
+    </Field>
   </div>
 
   <ToggleGroup bind:value={example} variant="underline" classes={{ options: 'justify-start h-10' }}>
@@ -50,37 +59,41 @@
       {#if example === 'single'}
         <Preview data={data.chartData[0]}>
           <div class="h-[500px] p-4 border rounded-sm">
-            <LineChart
-              data={data.chartData}
-              x="epoch"
-              y={(d) => 100 - d.idl}
-              props={chartProps}
-              brush
-              {renderContext}
-              profile
-            />
+            {#if show}
+              <LineChart
+                data={data.chartData}
+                x="epoch"
+                y={(d) => 100 - d.idl}
+                props={chartProps}
+                brush
+                {renderContext}
+                profile
+              />
+            {/if}
           </div>
         </Preview>
       {:else if example === 'series'}
         <Preview data={data.chartData[0]}>
           <div class="h-[500px] p-4 border rounded-sm">
-            <LineChart
-              data={data.chartData}
-              x="epoch"
-              series={[
-                { key: 'cpu', value: (d) => 100 - d.idl, color: 'var(--color-danger)' },
-                {
-                  key: 'ram',
-                  value: (d) => (100 * d.writ) / (d.writ + d.used),
-                  color: 'var(--color-warning)',
-                },
-                { key: 'tcp', value: (d) => d.send, color: 'var(--color-success)' },
-              ]}
-              props={chartProps}
-              brush
-              {renderContext}
-              profile
-            />
+            {#if show}
+              <LineChart
+                data={data.chartData}
+                x="epoch"
+                series={[
+                  { key: 'cpu', value: (d) => 100 - d.idl, color: 'var(--color-danger)' },
+                  {
+                    key: 'ram',
+                    value: (d) => (100 * d.writ) / (d.writ + d.used),
+                    color: 'var(--color-warning)',
+                  },
+                  { key: 'tcp', value: (d) => d.send, color: 'var(--color-success)' },
+                ]}
+                props={chartProps}
+                brush
+                {renderContext}
+                profile
+              />
+            {/if}
           </div>
         </Preview>
       {/if}
diff --git a/packages/layerchart/src/routes/docs/performance/wide_data_processed/+page.svelte b/packages/layerchart/src/routes/docs/performance/wide_data_processed/+page.svelte
index 4e03b51e2..ff0aa5817 100644
--- a/packages/layerchart/src/routes/docs/performance/wide_data_processed/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/wide_data_processed/+page.svelte
@@ -12,6 +12,8 @@
 
   let renderContext = $state<'svg' | 'canvas'>('svg');
   let motion = $state(true);
+  let show = $state(true);
+
   let chartProps = $derived<ComponentProps<typeof LineChart>['props']>({
     xAxis: { format: PeriodType.Day },
     yAxis: { format: 'metric' },
@@ -32,7 +34,7 @@
 </script>
 
 <div class="grid gap-4">
-  <div class="grid grid-cols-3 gap-3">
+  <div class="flex gap-3">
     <Field label="Render context">
       <ToggleGroup bind:value={renderContext} variant="outline">
         <ToggleOption value="svg">Svg</ToggleOption>
@@ -46,6 +48,13 @@
         <ToggleOption value={false}>No</ToggleOption>
       </ToggleGroup>
     </Field>
+
+    <Field label="Show">
+      <ToggleGroup bind:value={show} variant="outline">
+        <ToggleOption value={true}>Yes</ToggleOption>
+        <ToggleOption value={false}>No</ToggleOption>
+      </ToggleGroup>
+    </Field>
   </div>
 
   <ToggleGroup bind:value={example} variant="underline" classes={{ options: 'justify-start h-10' }}>
@@ -58,36 +67,40 @@
       {#if example === 'single'}
         <Preview data={chartData[0]}>
           <div class="h-[500px] p-4 border rounded-sm">
-            <LineChart
-              data={chartData}
-              x="date"
-              y="cpu"
-              props={chartProps}
-              brush
-              {renderContext}
-              profile
-            />
+            {#if show}
+              <LineChart
+                data={chartData}
+                x="date"
+                y="cpu"
+                props={chartProps}
+                brush
+                {renderContext}
+                profile
+              />
+            {/if}
           </div>
         </Preview>
       {:else if example === 'series'}
         <Preview data={chartData[0]}>
           <div class="h-[500px] p-4 border rounded-sm">
-            <LineChart
-              data={chartData}
-              x="date"
-              series={[
-                { key: 'cpu', color: 'var(--color-danger)' },
-                {
-                  key: 'ram',
-                  color: 'var(--color-warning)',
-                },
-                { key: 'tcp', color: 'var(--color-success)' },
-              ]}
-              props={chartProps}
-              brush
-              {renderContext}
-              profile
-            />
+            {#if show}
+              <LineChart
+                data={chartData}
+                x="date"
+                series={[
+                  { key: 'cpu', color: 'var(--color-danger)' },
+                  {
+                    key: 'ram',
+                    color: 'var(--color-warning)',
+                  },
+                  { key: 'tcp', color: 'var(--color-success)' },
+                ]}
+                props={chartProps}
+                brush
+                {renderContext}
+                profile
+              />
+            {/if}
           </div>
         </Preview>
       {/if}