diff --git a/Cargo.lock b/Cargo.lock
index 51a6241d7..0af7e53ec 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -13,9 +13,9 @@ dependencies = [
 
 [[package]]
 name = "adler2"
-version = "2.0.0"
+version = "2.0.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "512761e0bb2578dd7380c6baaa0f4ce03e84f95e960231d1dec8bf4d7d6e2627"
+checksum = "320119579fcad9c21884f5c4861d16174d0e06250625266f50fe6898340abefa"
 
 [[package]]
 name = "aes"
@@ -146,9 +146,9 @@ checksum = "7c02d123df017efcdfbd739ef81735b36c5ba83ec3c59c80a9d7ecc718f92e50"
 
 [[package]]
 name = "async-compression"
-version = "0.4.23"
+version = "0.4.24"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b37fc50485c4f3f736a4fb14199f6d5f5ba008d7f28fe710306c92780f004c07"
+checksum = "d615619615a650c571269c00dca41db04b9210037fa76ed8239f70404ab56985"
 dependencies = [
  "brotli",
  "flate2",
@@ -722,9 +722,9 @@ dependencies = [
 
 [[package]]
 name = "cfg-if"
-version = "1.0.0"
+version = "1.0.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
+checksum = "9555578bc9e57714c812a1f84e4fc5b4d21fcb063490c624de019f7464c91268"
 
 [[package]]
 name = "cfg_aliases"
@@ -757,18 +757,18 @@ dependencies = [
 
 [[package]]
 name = "clap"
-version = "4.5.39"
+version = "4.5.40"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fd60e63e9be68e5fb56422e397cf9baddded06dae1d2e523401542383bc72a9f"
+checksum = "40b6887a1d8685cebccf115538db5c0efe625ccac9696ad45c409d96566e910f"
 dependencies = [
  "clap_builder",
 ]
 
 [[package]]
 name = "clap_builder"
-version = "4.5.39"
+version = "4.5.40"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "89cc6392a1f72bbeb820d71f32108f61fdaf18bc526e1d23954168a67759ef51"
+checksum = "e0c66c08ce9f0c698cbce5c0279d0bb6ac936d8674174fe48f736533b964f59e"
 dependencies = [
  "anstream",
  "anstyle",
@@ -778,21 +778,21 @@ dependencies = [
 
 [[package]]
 name = "clap_derive"
-version = "4.5.32"
+version = "4.5.40"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "09176aae279615badda0765c0c0b3f6ed53f4709118af73cf4655d85d1530cd7"
+checksum = "d2c7947ae4cc3d851207c1adb5b5e260ff0cca11446b1d6d1423788e442257ce"
 dependencies = [
  "heck",
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.102",
 ]
 
 [[package]]
 name = "clap_lex"
-version = "0.7.4"
+version = "0.7.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f46ad14479a25103f283c0f10005961cf086d8dc42205bb44c46ac563475dca6"
+checksum = "b94f61472cee1439c0b966b47e3aca9ae07e45d070759512cd390ea2bebc6675"
 
 [[package]]
 name = "color-eyre"
@@ -990,7 +990,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "strsim",
- "syn 2.0.101",
+ "syn 2.0.102",
 ]
 
 [[package]]
@@ -1001,7 +1001,7 @@ checksum = "fc34b93ccb385b40dc71c6fceac4b2ad23662c7eeb248cf10d529b7e055b6ead"
 dependencies = [
  "darling_core",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.102",
 ]
 
 [[package]]
@@ -1042,7 +1042,7 @@ checksum = "30542c1ad912e0e3d22a1935c290e12e8a29d704a420177a31faad4a601a0800"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.102",
 ]
 
 [[package]]
@@ -1088,7 +1088,7 @@ dependencies = [
  "once_cell",
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.102",
 ]
 
 [[package]]
@@ -1258,7 +1258,7 @@ checksum = "335ff9f135e4384c8150d6f27c6daed433577f86b4750418338c01a1a2528592"
 dependencies = [
  "cfg-if",
  "libc",
- "wasi 0.11.0+wasi-snapshot-preview1",
+ "wasi 0.11.1+wasi-snapshot-preview1",
 ]
 
 [[package]]
@@ -1547,7 +1547,7 @@ checksum = "6c6e1db7ed32c6c71b759497fae34bf7933636f75a251b9e736555da426f6442"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.102",
 ]
 
 [[package]]
@@ -1719,9 +1719,9 @@ checksum = "6877bb514081ee2a7ff5ef9de3281f14a4dd4bceac4c09388074a6b5df8a139a"
 
 [[package]]
 name = "miniz_oxide"
-version = "0.8.8"
+version = "0.8.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3be647b768db090acb35d5ec5db2b0e1f1de11133ca123b9eacf5137868f892a"
+checksum = "1fa76a2c86f704bdb222d66965fb3d63269ce38518b83cb0575fca855ebb6316"
 dependencies = [
  "adler2",
 ]
@@ -1747,7 +1747,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "78bed444cc8a2160f01cbcf811ef18cac863ad68ae8ca62092e8db51d51c761c"
 dependencies = [
  "libc",
- "wasi 0.11.0+wasi-snapshot-preview1",
+ "wasi 0.11.1+wasi-snapshot-preview1",
  "windows-sys 0.59.0",
 ]
 
@@ -1876,7 +1876,7 @@ checksum = "3bd3da01a295024fa79e3b4aba14b590d91256a274ff29cc5ee8f55183b2df24"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.102",
 ]
 
 [[package]]
@@ -1918,7 +1918,7 @@ dependencies = [
  "phf",
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.102",
 ]
 
 [[package]]
@@ -2280,7 +2280,7 @@ dependencies = [
  "phf_shared",
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.102",
 ]
 
 [[package]]
@@ -2359,7 +2359,7 @@ dependencies = [
  "proc-macro-error-attr2",
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.102",
 ]
 
 [[package]]
@@ -2515,9 +2515,9 @@ dependencies = [
 
 [[package]]
 name = "rustc-demangle"
-version = "0.1.24"
+version = "0.1.25"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "719b953e2095829ee67db738b3bfa9fa368c94900df327b3f07fe6e794d2fe1f"
+checksum = "989e6739f80c4ad5b13e0fd7fe89531180375b18520cc8c82080e4dc4035b84f"
 
 [[package]]
 name = "rustc-hash"
@@ -2653,7 +2653,7 @@ checksum = "5b0276cf7f2c73365f7157c8123c21cd9a50fbbd844757af28ca1f5925fc2a00"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.102",
 ]
 
 [[package]]
@@ -2726,7 +2726,7 @@ dependencies = [
  "darling",
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.102",
 ]
 
 [[package]]
@@ -2826,9 +2826,9 @@ dependencies = [
 
 [[package]]
 name = "syn"
-version = "2.0.101"
+version = "2.0.102"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8ce2b7fc941b3a24138a0a7cf8e858bfc6a992e7978a068a5c760deb0ed43caf"
+checksum = "f6397daf94fa90f058bd0fd88429dd9e5738999cca8d701813c80723add80462"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -2862,7 +2862,7 @@ dependencies = [
  "proc-macro-error2",
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.102",
 ]
 
 [[package]]
@@ -2915,7 +2915,7 @@ checksum = "7f7cf42b4507d8ea322120659672cf1b9dbb93f8f2d4ecfd6e51350ff5b17a1d"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.102",
 ]
 
 [[package]]
@@ -2982,7 +2982,7 @@ checksum = "6e06d43f1345a3bcd39f6a56dbb7dcab2ba47e68e8ac134855e7e2bdbaf8cab8"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.102",
 ]
 
 [[package]]
@@ -3107,7 +3107,7 @@ checksum = "1b1ffbcf9c6f6b99d386e7444eb608ba646ae452a36b39737deb9663b610f662"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.102",
 ]
 
 [[package]]
@@ -3167,9 +3167,9 @@ checksum = "3b09c83c3c29d37506a3e260c08c03743a6bb66a9cd432c6934ab501a190571f"
 
 [[package]]
 name = "unicode-width"
-version = "0.2.0"
+version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1fc81956842c57dac11422a97c3b8195a1ff727f06e85c84ed2e8aa277c9a0fd"
+checksum = "4a1a07cc7db3810833284e8d372ccdc6da29741639ecc70c9ec107df0fa6154c"
 
 [[package]]
 name = "untrusted"
@@ -3238,9 +3238,9 @@ checksum = "5c3082ca00d5a5ef149bb8b555a72ae84c9c59f7250f013ac822ac2e49b19c64"
 
 [[package]]
 name = "wasi"
-version = "0.11.0+wasi-snapshot-preview1"
+version = "0.11.1+wasi-snapshot-preview1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9c8d87e72b64a3b4db28d11ce29237c246188f4f51057d65a7eab63b7987e423"
+checksum = "ccf3ec651a847eb01de73ccad15eb7d99f80485de043efb2f370cd654f4ea44b"
 
 [[package]]
 name = "wasi"
@@ -3273,7 +3273,7 @@ dependencies = [
  "log",
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.102",
  "wasm-bindgen-shared",
 ]
 
@@ -3295,7 +3295,7 @@ checksum = "8ae87ea40c9f689fc23f209965b6fb8a99ad69aeeb0231408be24920604395de"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.102",
  "wasm-bindgen-backend",
  "wasm-bindgen-shared",
 ]
@@ -3336,7 +3336,7 @@ checksum = "a47fddd13af08290e67f4acabf4b459f647552718f683a7b415d290ac744a836"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.102",
 ]
 
 [[package]]
@@ -3347,7 +3347,7 @@ checksum = "bd9211b69f8dcdfa817bfd14bf1c97c9188afa36f4750130fcdf3f400eca9fa8"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.102",
 ]
 
 [[package]]
@@ -3458,9 +3458,9 @@ checksum = "589f6da84c646204747d1270a2a5661ea66ed1cced2631d546fdfb155959f9ec"
 
 [[package]]
 name = "winnow"
-version = "0.7.10"
+version = "0.7.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c06928c8748d81b05c9be96aad92e1b6ff01833332f281e8cfca3be4b35fc9ec"
+checksum = "74c7b26e3480b707944fc872477815d29a8e429d2f93a1ce000f5fa84a15cbcd"
 dependencies = [
  "memchr",
 ]
@@ -3497,7 +3497,7 @@ checksum = "28a6e20d751156648aa063f3800b706ee209a32c0b4d9f24be3d980b01be55ef"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.102",
 ]
 
 [[package]]
@@ -3517,7 +3517,7 @@ checksum = "ce36e65b0d2999d2aafac989fb249189a141aee1f53c612c1f37d72631959f69"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.102",
 ]
 
 [[package]]
diff --git a/Cargo.toml b/Cargo.toml
index 1550e37e1..aa27c6331 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -36,8 +36,8 @@ brk_state = { version = "0", path = "crates/brk_state" }
 brk_store = { version = "0", path = "crates/brk_store" }
 brk_vec = { version = "0", path = "crates/brk_vec" }
 byteview = "=0.6.1"
-clap = { version = "4.5.39", features = ["string"] }
-clap_derive = "4.5.32"
+clap = { version = "4.5.40", features = ["string"] }
+clap_derive = "4.5.40"
 color-eyre = "0.6.5"
 derive_deref = "1.1.1"
 fjall = "2.11.0"
diff --git a/crates/brk_server/README.md b/crates/brk_server/README.md
index 52bd656e6..ca61addc7 100644
--- a/crates/brk_server/README.md
+++ b/crates/brk_server/README.md
@@ -73,7 +73,7 @@ A list of all possible vec ids and their supported vec indexes
 
 A list of all possible vec indexes and their supported vec ids
 
-#### `GET /api/{INDEX}-to-{VALUE}`
+#### `GET /api/{INDEX}-to-{ID}`
 
 This endpoint retrieves data based on the specified vector index and id.
 
diff --git a/websites/default/packages/lightweight-charts/wrapper.js b/websites/default/packages/lightweight-charts/wrapper.js
index ee98329a4..17d8a62b2 100644
--- a/websites/default/packages/lightweight-charts/wrapper.js
+++ b/websites/default/packages/lightweight-charts/wrapper.js
@@ -1,6 +1,6 @@
 // @ts-check
 
-/** @import {IChartApi, ISeriesApi, SeriesDefinition, SingleValueData as _SingleValueData, CandlestickData as _CandlestickData, BaselineData, SeriesType, IPaneApi, BaselineStyleOptions} from './v5.0.7-treeshaked/types' */
+/** @import {IChartApi, ISeriesApi, SeriesDefinition, SingleValueData as _SingleValueData, CandlestickData as _CandlestickData, BaselineData, SeriesType, IPaneApi, BaselineStyleOptions, CandlestickStyleOptions, WhitespaceData} from './v5.0.7-treeshaked/types' */
 
 /**
  * @typedef {[number, number, number, number]} OHLCTuple
@@ -12,6 +12,14 @@
  * @property {number} index
  */
 
+/**
+ * @typedef {Object} Series
+ * @property {ISeriesApi<SeriesType>} inner
+ * @property {string} id
+ * @property {Signal<boolean>} active
+ * @property {VoidFunction} remove
+ */
+
 /**
  * @template T
  * @typedef {T & Valued & Indexed} ChartData<T>
@@ -27,48 +35,100 @@ export default import("./v5.0.7-treeshaked/script.js").then((lc) => {
 
   /**
    * @param {Object} args
-   * @param {HTMLElement} args.element
+   * @param {string} args.id
+   * @param {HTMLElement} args.parent
    * @param {Signals} args.signals
    * @param {Colors} args.colors
-   * @param {Index} args.index
    * @param {Utilities} args.utils
    * @param {Elements} args.elements
-   * @param {DeepPartial<ChartOptions>} [args.options]
+   * @param {VecsResources} args.vecsResources
+   * @param {Accessor<Index>} args.index
+   * @param {((unknownTimeScaleCallback: VoidFunction) => void)} [args.timeScaleSetCallback]
+   * @param {Owner | null} args.owner
+   * @param {true} [args.fitContentOnResize]
+   * @param {{unit: Unit; blueprints: AnySeriesBlueprint[]}[]} [args.config]
    */
-  function createLightweightChart({
-    element,
+  function createChartElement({
+    parent,
     signals,
     colors,
-    index,
     utils,
     elements,
-    options: _options = {},
+    id,
+    index,
+    vecsResources,
+    timeScaleSetCallback,
+    owner: _owner,
+    fitContentOnResize,
+    config,
   }) {
-    /** @satisfies {DeepPartial<ChartOptions>} */
-    const options = {
-      autoSize: true,
-      layout: {
-        fontFamily: elements.style.fontFamily,
-        background: { color: "transparent" },
-        attributionLogo: false,
-        colorSpace: "display-p3",
-        colorParsers: [oklchToRGBA],
-      },
-      grid: {
-        vertLines: { visible: false },
-        horzLines: { visible: false },
-      },
-      localization: {
-        priceFormatter: numberToShortUSFormat,
-        locale: "en-us",
-      },
-      ..._options,
-    };
+    const owner = _owner || signals.getOwner();
+
+    const div = window.document.createElement("div");
+    div.classList.add("chart");
+    parent.append(div);
+
+    const legendTop = createLegend({
+      utils,
+      signals,
+      paneIndex: 0,
+    });
+    div.append(legendTop.element);
+
+    const chartDiv = window.document.createElement("div");
+    chartDiv.classList.add("lightweight-chart");
+    div.append(chartDiv);
+
+    const legendBottom = createLegend({
+      utils,
+      signals,
+      paneIndex: 1,
+    });
+    div.append(legendBottom.element);
 
     /** @type {IChartApi} */
-    const chart = lc.createChart(element, options);
+    const ichart = lc.createChart(
+      chartDiv,
+      /** @satisfies {DeepPartial<ChartOptions>} */ ({
+        autoSize: true,
+        layout: {
+          fontFamily: elements.style.fontFamily,
+          background: { color: "transparent" },
+          attributionLogo: false,
+          colorSpace: "display-p3",
+          colorParsers: [oklchToRGBA],
+        },
+        grid: {
+          vertLines: { visible: false },
+          horzLines: { visible: false },
+        },
+        rightPriceScale: {
+          borderVisible: false,
+        },
+        timeScale: {
+          borderVisible: false,
+        },
+        localization: {
+          priceFormatter: numberToShortUSFormat,
+          locale: "en-us",
+        },
+        crosshair: {
+          mode: 3,
+        },
+        ...(fitContentOnResize
+          ? {
+              handleScroll: false,
+              handleScale: false,
+              timeScale: {
+                minBarSpacing: 0.001,
+              },
+            }
+          : {}),
+        // ..._options,
+      }),
+    );
 
-    chart.priceScale("right").applyOptions({
+    ichart.priceScale("right").applyOptions({
       minimumWidth: 80,
     });
 
@@ -79,22 +139,39 @@ export default import("./v5.0.7-treeshaked/script.js").then((lc) => {
         borderColor: colors.border(),
       }),
       ({ defaultColor, offColor, borderColor }) => {
-        chart.applyOptions({
+        ichart.applyOptions({
           layout: {
             textColor: offColor,
             panes: {
               separatorColor: borderColor,
             },
           },
-          rightPriceScale: {
-            borderVisible: false,
+          crosshair: {
+            horzLine: {
+              color: offColor,
+              labelBackgroundColor: defaultColor,
+            },
+            vertLine: {
+              color: offColor,
+              labelBackgroundColor: defaultColor,
+            },
           },
+        });
+      },
+    );
+
+    signals.createEffect(index, (index) => {
+      ichart.applyOptions({
+        timeScale: {
+          timeVisible:
+            index === /** @satisfies {Height} */ (5) ||
+            index === /** @satisfies {DifficultyEpoch} */ (2) ||
+            index === /** @satisfies {HalvingEpoch} */ (4),
+        },
+      });
+      if (!fitContentOnResize) {
+        ichart.applyOptions({
           timeScale: {
-            borderVisible: false,
-            timeVisible:
-              index === /** @satisfies {Height} */ (5) ||
-              index === /** @satisfies {DifficultyEpoch} */ (2) ||
-              index === /** @satisfies {HalvingEpoch} */ (4),
             minBarSpacing:
               index === /** @satisfies {MonthIndex} */ (7)
                 ? 1
@@ -106,174 +183,12 @@ export default import("./v5.0.7-treeshaked/script.js").then((lc) => {
                       ? 120
                       : undefined,
           },
-          crosshair: {
-            horzLine: {
-              color: offColor,
-              labelBackgroundColor: defaultColor,
-            },
-            vertLine: {
-              color: offColor,
-              labelBackgroundColor: defaultColor,
-            },
-            mode: 3,
-          },
         });
-      },
-    );
-
-    return chart;
-  }
-
-  /**
-   * @param {Object} args
-   * @param {string} args.id
-   * @param {HTMLElement} args.parent
-   * @param {Signals} args.signals
-   * @param {Colors} args.colors
-   * @param {Utilities} args.utils
-   * @param {Elements} args.elements
-   * @param {VecsResources} args.vecsResources
-   * @param {Owner | null} [args.owner]
-   * @param {true} [args.fitContentOnResize]
-   * @param {{unit: Unit; blueprints: AnySeriesBlueprint[]}[]} [args.config]
-   */
-  function createChartElement({
-    parent,
-    signals,
-    colors,
-    utils,
-    elements,
-    id,
-    vecsResources,
-    owner: _owner,
-    fitContentOnResize,
-    config,
-  }) {
-    let owner = _owner || signals.getOwner();
-
-    const div = window.document.createElement("div");
-    div.classList.add("chart");
-    parent.append(div);
-
-    const legendTop = createLegend({
-      parent: div,
-      utils,
-      signals,
-      paneIndex: 0,
+      }
     });
 
-    const chartDiv = window.document.createElement("div");
-    chartDiv.classList.add("lightweight-chart");
-    div.append(chartDiv);
-
-    const legendBottom = createLegend({
-      parent: div,
-      utils,
-      signals,
-      paneIndex: 1,
-    });
-
-    let ichart = /** @type {IChartApi | null} */ (null);
-    let timeScaleSet = false;
-
-    if (fitContentOnResize) {
-      new ResizeObserver(() => ichart?.timeScale().fitContent()).observe(
-        chartDiv,
-      );
-    }
-
-    /** @type {Index} */
-    let vecIndex = 0; // Default value, overwritten
-
-    let timeResource = /** @type {VecResource| null} */ (null);
-
-    let timeScaleSetCallback =
-      /** @type {((unknownTimeScaleCallback: VoidFunction) => void) | null} */ (
-        null
-      );
-
-    /**
-     * @param {ISeriesApi<SeriesType>} series
-     * @param {VecResource} valuesResource
-     */
-    function createSetFetchedDataEffect(series, valuesResource) {
-      const fetchedKey = vecsResources.defaultFetchedKey;
-
-      signals.runWithOwner(owner, () =>
-        signals.createEffect(
-          () => [
-            timeResource?.fetched[fetchedKey].vec(),
-            valuesResource.fetched[fetchedKey].vec(),
-          ],
-          ([indexes, _ohlcs]) => {
-            if (!ichart) throw Error("IChart should be initialized");
-
-            if (!indexes || !_ohlcs) return;
-            const ohlcs = /** @type {OHLCTuple[]} */ (_ohlcs);
-            let length = Math.min(indexes.length, ohlcs.length);
-            const data = new Array(length);
-            let prevTime = null;
-            let offset = 0;
-
-            for (let i = 0; i < length; i++) {
-              const time = indexes[i];
-              const sameTime = prevTime === time;
-              if (sameTime) {
-                offset += 1;
-              }
-              const v = ohlcs[i];
-              const offsetedI = i - offset;
-              if (v === null) {
-                data[offsetedI] = {
-                  time,
-                  value: NaN,
-                };
-              } else if (typeof v === "number") {
-                data[offsetedI] = {
-                  time,
-                  value: v,
-                };
-              } else {
-                if (sameTime) {
-                  console.log(data[offsetedI]);
-                }
-                // const prev = sameTime ? data[offsetedI] : undefined;
-                let [open, high, low, close] = v;
-                data[offsetedI] = {
-                  time,
-                  open: sameTime ? data[offsetedI].open : open,
-                  high: sameTime ? Math.max(data[offsetedI].high, high) : high,
-                  low: sameTime ? Math.min(data[offsetedI].low, low) : low,
-                  close,
-                };
-              }
-              prevTime = time;
-            }
-
-            data.length -= offset;
-            series.setData(data);
-
-            timeScaleSetCallback?.(() => {
-              if (
-                !timeScaleSet &&
-                (vecIndex === /** @satisfies {QuarterIndex} */ (19) ||
-                  vecIndex === /** @satisfies {YearIndex} */ (23) ||
-                  vecIndex === /** @satisfies {DecadeIndex} */ (1))
-              ) {
-                ichart
-                  ?.timeScale()
-                  .setVisibleLogicalRange({ from: -1, to: data.length });
-              }
-            });
-            timeScaleSet = true;
-          },
-        ),
-      );
-    }
-
-    const activeResources = /** @type {VecResource[]} */ ([]);
-
-    ichart?.subscribeCrosshairMove(
+    const activeResources = /** @type {Set<VecResource>} */ (new Set());
+    ichart.subscribeCrosshairMove(
       utils.debounce(() => {
         activeResources.forEach((v) => {
           v.fetch();
@@ -281,46 +196,298 @@ export default import("./v5.0.7-treeshaked/script.js").then((lc) => {
       }),
     );
 
-    const chart = {
-      inner: () => ichart,
-      /**
-       * @param {Object} args
-       * @param {Index} args.index
-       * @param {((unknownTimeScaleCallback: VoidFunction) => void)} [args.timeScaleSetCallback]
-       */
-      create({ index: _index, timeScaleSetCallback: _timeScaleSetCallback }) {
-        vecIndex = _index;
-        timeScaleSetCallback = _timeScaleSetCallback || null;
+    const timeResource = signals.createMemo(() => {
+      const i = index();
+      const timeResource = vecsResources.getOrCreate(
+        i,
+        i === /** @satisfies {Height} */ (5) ? "timestamp-fixed" : "timestamp",
+      );
+      timeResource.fetch();
+      return timeResource;
+    });
 
-        if (ichart) throw Error("IChart shouldn't be initialized");
+    let timeScaleSet = false;
 
-        timeResource = vecsResources.getOrCreate(
-          vecIndex,
-          vecIndex === /** @satisfies {Height} */ (5)
-            ? "timestamp-fixed"
-            : "timestamp",
-        );
-        timeResource.fetch();
+    if (fitContentOnResize) {
+      new ResizeObserver(() => ichart.timeScale().fitContent()).observe(
+        chartDiv,
+      );
+    }
 
-        ichart = createLightweightChart({
-          index: vecIndex,
-          element: chartDiv,
-          signals,
-          colors,
-          utils,
-          elements,
+    /**
+     * @param {Object} args
+     * @param {string} args.id
+     * @param {number} args.paneIndex
+     * @param {"nw" | "ne" | "se" | "sw"} args.position
+     * @param {number} [args.timeout]
+     * @param {(args: {owner: Owner | null, pane: IPaneApi<Time>}) => HTMLElement} args.createChild
+     */
+    function addFieldsetIfNeeded({ paneIndex, id, position, createChild }) {
+      const owner = signals.getOwner();
+      setTimeout(
+        () => {
+          const parent = ichart
+            ?.panes()
+            .at(paneIndex)
+            ?.getHTMLElement()
+            .children?.item(1)?.firstChild;
+
+          if (!parent) throw Error("Parent should exist");
+
+          if (
+            Array.from(parent.childNodes).filter(
+              (element) =>
+                /** @type {HTMLElement} */ (element).dataset.position ===
+                position,
+            ).length
+          ) {
+            return;
+          }
+
+          const fieldset = window.document.createElement("fieldset");
+          fieldset.dataset.size = "xs";
+          fieldset.dataset.position = position;
+          fieldset.id = `${id}-${paneIndex}`;
+          const pane = ichart.panes().at(paneIndex);
+          if (!pane) throw Error("Expect pane");
+          pane
+            .getHTMLElement()
+            .children?.item(1)
+            ?.firstChild?.appendChild(fieldset);
+
+          fieldset.append(createChild({ owner, pane }));
+        },
+        paneIndex ? 50 : 0,
+      );
+    }
+
+    /**
+     * @param {Object} args
+     * @param {Unit} args.unit
+     * @param {string} args.id
+     * @param {SeriesType} args.seriesType
+     * @param {number} args.paneIndex
+     */
+    function addPriceScaleSelectorIfNeeded({
+      unit,
+      paneIndex,
+      id,
+      seriesType,
+    }) {
+      id = `${id}-scale`;
+
+      addFieldsetIfNeeded({
+        id,
+        paneIndex,
+        position: "sw",
+        createChild({ owner, pane }) {
+          const { field, selected } = utils.dom.createHorizontalChoiceField({
+            choices: /** @type {const} */ (["lin", "log"]),
+            id: utils.stringToId(`${id} ${unit}`),
+            defaultValue:
+              unit === "USD" && seriesType !== "Baseline" ? "log" : "lin",
+            key: `${id}-price-scale-${paneIndex}`,
+            signals,
+          });
+
+          signals.runWithOwner(owner, () => {
+            signals.createEffect(selected, (selected) => {
+              try {
+                pane.priceScale("right").applyOptions({
+                  mode: selected === "lin" ? 0 : 1,
+                });
+              } catch {}
+            });
+          });
+
+          return field;
+        },
+      });
+    }
+
+    /**
+     * @param {Object} args
+     * @param {ISeriesApi<SeriesType>} args.iseries
+     * @param {string} args.name
+     * @param {Unit} args.unit
+     * @param {number} args.order
+     * @param {Color[]} args.colors
+     * @param {SeriesType} args.seriesType
+     * @param {VecId} [args.vecId]
+     * @param {Accessor<WhitespaceData[]>} [args.data]
+     * @param {number} args.paneIndex
+     * @param {boolean} [args.defaultActive]
+     */
+    function addSeries({
+      iseries,
+      vecId,
+      name,
+      unit,
+      order,
+      seriesType,
+      paneIndex,
+      defaultActive,
+      colors,
+      data,
+    }) {
+      return signals.createRoot((dispose) => {
+        const id = `${utils.stringToId(name)}-${paneIndex}`;
+
+        const active = signals.createSignal(defaultActive ?? true, {
+          save: {
+            keyPrefix: "",
+            key: id,
+            ...utils.serde.boolean,
+          },
         });
 
-        if (fitContentOnResize) {
-          ichart.applyOptions({
-            handleScroll: false,
-            handleScale: false,
-            timeScale: {
-              minBarSpacing: 0.001,
-            },
+        let url = /** @type {string | undefined} */ (undefined);
+
+        signals.createEffect(active, (active) =>
+          // Or remove ?
+          iseries.applyOptions({
+            visible: active,
+          }),
+        );
+
+        iseries.setSeriesOrder(order);
+
+        /** @type {Series} */
+        const series = {
+          inner: iseries,
+          active,
+          id,
+          remove() {
+            dispose();
+            chart.inner.removeSeries(iseries);
+          },
+        };
+
+        if (vecId) {
+          signals.createEffect(index, (index) => {
+            const valuesResource = vecsResources.getOrCreate(index, vecId);
+            url = valuesResource.url;
+            signals.createEffect(active, (active) => {
+              if (active) {
+                valuesResource.fetch();
+                activeResources.add(valuesResource);
+
+                const fetchedKey = vecsResources.defaultFetchedKey;
+                signals.createEffect(
+                  () => [
+                    timeResource().fetched[fetchedKey].vec(),
+                    valuesResource.fetched[fetchedKey].vec(),
+                  ],
+                  ([indexes, _ohlcs]) => {
+                    if (!indexes || !_ohlcs) return;
+                    const ohlcs = /** @type {OHLCTuple[]} */ (_ohlcs);
+                    let length = Math.min(indexes.length, ohlcs.length);
+                    const data = new Array(length);
+                    let prevTime = null;
+                    let offset = 0;
+
+                    for (let i = 0; i < length; i++) {
+                      const time = indexes[i];
+                      const sameTime = prevTime === time;
+                      if (sameTime) {
+                        offset += 1;
+                      }
+                      const v = ohlcs[i];
+                      const offsetedI = i - offset;
+                      if (v === null) {
+                        data[offsetedI] = {
+                          time,
+                          value: NaN,
+                        };
+                      } else if (typeof v === "number") {
+                        data[offsetedI] = {
+                          time,
+                          value: v,
+                        };
+                      } else {
+                        if (sameTime) {
+                          console.log(data[offsetedI]);
+                        }
+                        // const prev = sameTime ? data[offsetedI] : undefined;
+                        let [open, high, low, close] = v;
+                        data[offsetedI] = {
+                          time,
+                          open: sameTime ? data[offsetedI].open : open,
+                          high: sameTime
+                            ? Math.max(data[offsetedI].high, high)
+                            : high,
+                          low: sameTime
+                            ? Math.min(data[offsetedI].low, low)
+                            : low,
+                          close,
+                        };
+                      }
+                      prevTime = time;
+                    }
+
+                    data.length -= offset;
+                    series.inner.setData(data);
+
+                    timeScaleSetCallback?.(() => {
+                      if (
+                        !timeScaleSet &&
+                        (index === /** @satisfies {QuarterIndex} */ (19) ||
+                          index === /** @satisfies {YearIndex} */ (23) ||
+                          index === /** @satisfies {DecadeIndex} */ (1))
+                      ) {
+                        ichart.timeScale().setVisibleLogicalRange({
+                          from: -1,
+                          to: data.length,
+                        });
+                      }
+                    });
+                    timeScaleSet = true;
+                  },
+                );
+              } else {
+                activeResources.delete(valuesResource);
+              }
+            });
+          });
+        } else if (data) {
+          signals.createEffect(data, (data) => {
+            iseries.setData(data);
           });
         }
-      },
+
+        (paneIndex ? legendBottom : legendTop).addOrReplace({
+          series,
+          name,
+          colors,
+          url,
+          order,
+        });
+
+        createPaneHeightObserver({
+          ichart,
+          paneIndex,
+          signals,
+          utils,
+        });
+
+        addPriceScaleSelectorIfNeeded({
+          paneIndex,
+          seriesType,
+          id,
+          unit,
+        });
+
+        return series;
+      });
+    }
+
+    const chart = {
+      inner: ichart,
+      legendTop,
+      legendBottom,
+
+      addFieldsetIfNeeded,
+
       /**
        * @param {Object} args
        * @param {string} args.name
@@ -331,6 +498,7 @@ export default import("./v5.0.7-treeshaked/script.js").then((lc) => {
        * @param {number} [args.paneIndex]
        * @param {boolean} [args.defaultActive]
        * @param {boolean} [args.inverse]
+       * @param {DeepPartial<CandlestickStyleOptions & SeriesOptionsCommon & CreatePriceLineOptions>} [args.options]
        */
       addCandlestickSeries({
         vecId,
@@ -344,65 +512,35 @@ export default import("./v5.0.7-treeshaked/script.js").then((lc) => {
       }) {
         const paneIndex = _paneIndex ?? 0;
 
-        if (!ichart || !timeResource) throw Error("Chart not fully set");
+        if (!timeResource) throw Error("Chart not fully set");
 
-        const green = inverse ? colors.red() : colors.green();
-        const red = inverse ? colors.green() : colors.red();
-        const series = ichart.addSeries(
+        const green = inverse ? colors.red : colors.green;
+        const red = inverse ? colors.green : colors.red;
+        const iseries = ichart.addSeries(
           /** @type {SeriesDefinition<'Candlestick'>} */ (lc.CandlestickSeries),
           {
-            upColor: green,
-            downColor: red,
-            wickUpColor: green,
-            wickDownColor: red,
+            upColor: green(),
+            downColor: red(),
+            wickUpColor: green(),
+            wickDownColor: red(),
             borderVisible: false,
             visible: defaultActive !== false,
           },
           paneIndex,
         );
 
-        let url = /** @type {string | undefined} */ (undefined);
-
-        if (vecId) {
-          const valuesResource = vecsResources.getOrCreate(vecIndex, vecId);
-          valuesResource.fetch();
-          activeResources.push(valuesResource);
-          createSetFetchedDataEffect(series, valuesResource);
-
-          url = valuesResource.url;
-        } else if (data) {
-          signals.runWithOwner(owner, () =>
-            signals.createEffect(data, (data) => {
-              series.setData(data);
-            }),
-          );
-        }
-
-        (paneIndex ? legendBottom : legendTop).add({
-          series,
+        return addSeries({
+          colors: [green, red],
+          iseries,
           name,
-          defaultActive,
-          colors: [colors.green, colors.red],
-          url,
-        });
-
-        createPaneHeightObserver({
-          ichart,
-          paneIndex,
-          signals,
-          utils,
-        });
-
-        this.addPriceScaleSelectorIfNeeded({
+          order,
           paneIndex,
           seriesType: "Candlestick",
-          id: `${id}-${paneIndex}`,
           unit,
+          data,
+          defaultActive,
+          vecId,
         });
-
-        series.setSeriesOrder(order);
-
-        return series;
       },
       /**
        * @param {Object} args
@@ -433,7 +571,7 @@ export default import("./v5.0.7-treeshaked/script.js").then((lc) => {
 
         color ||= unit === "USD" ? colors.green : colors.orange;
 
-        const series = ichart.addSeries(
+        const iseries = ichart.addSeries(
           /** @type {SeriesDefinition<'Line'>} */ (lc.LineSeries),
           {
             lineWidth: /** @type {any} */ (1.5),
@@ -447,53 +585,21 @@ export default import("./v5.0.7-treeshaked/script.js").then((lc) => {
 
         const priceLineOptions = options?.createPriceLine;
         if (priceLineOptions) {
-          createPriceLine(series, priceLineOptions, colors);
+          createPriceLine(iseries, priceLineOptions, colors);
         }
 
-        let url = /** @type {string | undefined} */ (undefined);
-
-        if (vecId) {
-          const valuesResource = vecsResources.getOrCreate(vecIndex, vecId);
-          valuesResource.fetch();
-          activeResources.push(valuesResource);
-          createSetFetchedDataEffect(series, valuesResource);
-          url = valuesResource.url;
-        } else if (data) {
-          signals.runWithOwner(owner, () =>
-            signals.createEffect(data, (data) => {
-              series.setData(data);
-              ichart
-                ?.timeScale()
-                .setVisibleLogicalRange({ from: -1, to: data.length });
-            }),
-          );
-        }
-
-        (paneIndex ? legendBottom : legendTop).add({
-          series,
+        return addSeries({
           colors: [color],
+          iseries,
           name,
-          defaultActive,
-          url,
-        });
-
-        createPaneHeightObserver({
-          ichart,
-          paneIndex,
-          signals,
-          utils,
-        });
-
-        this.addPriceScaleSelectorIfNeeded({
+          order,
           paneIndex,
           seriesType: "Line",
-          id: `${id}-${paneIndex}`,
           unit,
+          data,
+          defaultActive,
+          vecId,
         });
-
-        series.setSeriesOrder(order);
-
-        return series;
       },
       /**
        * @param {Object} args
@@ -520,7 +626,7 @@ export default import("./v5.0.7-treeshaked/script.js").then((lc) => {
 
         const paneIndex = _paneIndex ?? 0;
 
-        const series = ichart.addSeries(
+        const iseries = ichart.addSeries(
           /** @type {SeriesDefinition<'Baseline'>} */ (lc.BaselineSeries),
           {
             lineWidth: /** @type {any} */ (1.5),
@@ -543,161 +649,40 @@ export default import("./v5.0.7-treeshaked/script.js").then((lc) => {
 
         const priceLineOptions = options?.createPriceLine;
         if (priceLineOptions) {
-          createPriceLine(series, priceLineOptions, colors);
+          createPriceLine(iseries, priceLineOptions, colors);
         }
 
-        let url = /** @type {string | undefined} */ (undefined);
-
-        if (vecId) {
-          const valuesResource = vecsResources.getOrCreate(vecIndex, vecId);
-          valuesResource.fetch();
-          activeResources.push(valuesResource);
-          createSetFetchedDataEffect(series, valuesResource);
-
-          url = valuesResource.url;
-        } else if (data) {
-          signals.runWithOwner(owner, () =>
-            signals.createEffect(data, (data) => {
-              series.setData(data);
-              ichart
-                ?.timeScale()
-                .setVisibleLogicalRange({ from: -1, to: data.length });
-            }),
-          );
-        }
-
-        (paneIndex ? legendBottom : legendTop).add({
-          series,
+        return addSeries({
           colors: [
             () => options?.topLineColor ?? colors.green(),
             () => options?.bottomLineColor ?? colors.red(),
           ],
+          iseries,
           name,
-          defaultActive,
-          url,
-        });
-
-        createPaneHeightObserver({
-          ichart,
-          paneIndex,
-          signals,
-          utils,
-        });
-
-        this.addPriceScaleSelectorIfNeeded({
+          order,
           paneIndex,
           seriesType: "Baseline",
-          id: `${id}-${paneIndex}`,
           unit,
-        });
-
-        series.setSeriesOrder(order);
-
-        return series;
-      },
-      /**
-       * @param {Object} args
-       * @param {Unit} args.unit
-       * @param {string} args.id
-       * @param {SeriesType} args.seriesType
-       * @param {number} args.paneIndex
-       */
-      addPriceScaleSelectorIfNeeded({ unit, paneIndex, id, seriesType }) {
-        id = `${id}-scale`;
-
-        this.addFieldsetIfNeeded({
-          id,
-          paneIndex,
-          position: "sw",
-          createChild({ owner, pane }) {
-            const { field, selected } = utils.dom.createHorizontalChoiceField({
-              choices: /** @type {const} */ (["lin", "log"]),
-              id: utils.stringToId(`${id} ${unit}`),
-              defaultValue:
-                unit === "USD" && seriesType !== "Baseline" ? "log" : "lin",
-              key: `${id}-price-scale-${paneIndex}`,
-              signals,
-            });
-
-            signals.runWithOwner(owner, () => {
-              signals.createEffect(selected, (selected) => {
-                try {
-                  pane.priceScale("right").applyOptions({
-                    mode: selected === "lin" ? 0 : 1,
-                  });
-                } catch {}
-              });
-            });
-
-            return field;
-          },
+          data,
+          defaultActive,
+          vecId,
         });
       },
-      /**
-       * @param {Object} args
-       * @param {string} args.id
-       * @param {number} args.paneIndex
-       * @param {"nw" | "ne" | "se" | "sw"} args.position
-       * @param {number} [args.timeout]
-       * @param {(args: {owner: Owner | null, pane: IPaneApi<Time>}) => HTMLElement} args.createChild
-       */
-      addFieldsetIfNeeded({ paneIndex, id, position, createChild }) {
-        const owner = signals.getOwner();
-        setTimeout(
-          () => {
-            const parent = ichart
-              ?.panes()
-              .at(paneIndex)
-              ?.getHTMLElement()
-              .children?.item(1)?.firstChild;
-
-            if (!parent) throw Error("Parent should exist");
-
-            if (
-              Array.from(parent.childNodes).filter(
-                (element) =>
-                  /** @type {HTMLElement} */ (element).dataset.position ===
-                  position,
-              ).length
-            ) {
-              return;
-            }
-
-            const fieldset = window.document.createElement("fieldset");
-            fieldset.dataset.size = "xs";
-            fieldset.dataset.position = position;
-            fieldset.id = `${id}-${paneIndex}`;
-            const pane = ichart?.panes().at(paneIndex);
-            if (!pane) throw Error("Expect pane");
-            pane
-              .getHTMLElement()
-              .children?.item(1)
-              ?.firstChild?.appendChild(fieldset);
-
-            fieldset.append(createChild({ owner, pane }));
-          },
-          paneIndex ? 50 : 0,
-        );
-      },
-      /**
-       *
-       * @param {Object} args
-       * @param {Owner | null} args.owner
-       */
-      reset({ owner: _owner }) {
-        owner = _owner;
-        ichart?.remove();
-        ichart = null;
-        timeScaleSet = false;
-        activeResources.length = 0;
-        legendTop.reset();
-        legendBottom.reset();
-      },
+      // /**
+      //  *
+      //  * @param {Object} args
+      //  * @param {Owner | null} args.owner
+      //  */
+      // reset({ owner: _owner }) {
+      //   owner = _owner;
+      //   timeScaleSet = false;
+      //   activeResources.length = 0;
+      //   legendTop.reset();
+      //   legendBottom.reset();
+      // },
     };
 
     config?.forEach(({ unit, blueprints }, paneIndex) => {
-      chart.create({ index: /** @satisfies {DateIndex} */ (0) });
-
       blueprints.forEach((blueprint, order) => {
         if (blueprint.type === "Candlestick") {
           chart.addCandlestickSeries({
@@ -742,57 +727,73 @@ export default import("./v5.0.7-treeshaked/script.js").then((lc) => {
 
 /**
  * @param {Object} args
- * @param {Element} args.parent
  * @param {Signals} args.signals
  * @param {number} args.paneIndex
  * @param {Utilities} args.utils
  */
-function createLegend({ parent, signals, utils, paneIndex }) {
-  const legendElement = window.document.createElement("legend");
-  parent.append(legendElement);
+function createLegend({ signals, utils, paneIndex }) {
+  const element = window.document.createElement("legend");
 
-  const hovered = signals.createSignal(
-    /** @type {ISeriesApi<SeriesType> | null} */ (null),
-  );
+  const hovered = signals.createSignal(/** @type {Series | null} */ (null));
+
+  /** @type {HTMLElement[]} */
+  const legends = [];
+
+  // /** @type {VoidFunction[]} */
+  // const disposes = [];
+
+  // /**
+  //  * @param {number} start
+  //  */
+  // function disposeFrom(start) {
+  //   disposes.splice(start).forEach((dispose) => dispose());
+  // }
+
+  // signals.onCleanup(() => disposeFrom(0));
 
   return {
+    element,
     /**
      * @param {Object} args
-     * @param {ISeriesApi<SeriesType>} args.series
+     * @param {Series} args.series
      * @param {string} args.name
+     * @param {number} args.order
      * @param {Color[]} args.colors
-     * @param {boolean} [args.defaultActive]
      * @param {string} [args.url]
      */
-    add({ series, name, colors, defaultActive, url }) {
+    addOrReplace({ series, name, colors, url, order }) {
+      // signals.createRoot((dispose) => {
+      //   disposes.at(order)?.();
+
+      //   if (disposes.length < order) {
+      //     throw Error("Unreachable");
+      //   }
+
+      //   disposes[order] = dispose;
+
       const div = window.document.createElement("div");
 
-      legendElement.append(div);
-
-      const nameId = `${utils.stringToId(name)}-${paneIndex}`;
-
-      const active = signals.createSignal(defaultActive ?? true, {
-        save: {
-          keyPrefix: "",
-          key: nameId,
-          ...utils.serde.boolean,
-        },
-      });
-
-      signals.createEffect(active, (active) => {
-        series.applyOptions({
-          visible: active,
-        });
-      });
+      const prev = legends[order];
+      if (prev) {
+        prev.replaceWith(div);
+      } else {
+        const elementAtOrder = Array.from(element.children).at(order);
+        if (elementAtOrder) {
+          elementAtOrder.before(div);
+        } else {
+          element.append(div);
+        }
+      }
+      legends[order] = div;
 
       const { input, label } = utils.dom.createLabeledInput({
-        inputId: utils.stringToId(`legend-${nameId}`),
-        inputName: utils.stringToId(`selected-${nameId}`),
+        inputId: utils.stringToId(`legend-${series.id}`),
+        inputName: utils.stringToId(`selected-${series.id}`),
         inputValue: "value",
         labelTitle: "Click to toggle",
-        inputChecked: active(),
+        inputChecked: series.active(),
         onClick: () => {
-          active.set(input.checked);
+          series.active.set(input.checked);
         },
         type: "checkbox",
       });
@@ -852,7 +853,7 @@ function createLegend({ parent, signals, utils, paneIndex }) {
       const initialColors = /** @type {Record<string, any>} */ ({});
       const darkenedColors = /** @type {Record<string, any>} */ ({});
 
-      const seriesOptions = series.options();
+      const seriesOptions = series.inner.options();
       if (!seriesOptions) return;
 
       Object.entries(seriesOptions).forEach(([k, v]) => {
@@ -868,9 +869,9 @@ function createLegend({ parent, signals, utils, paneIndex }) {
 
       signals.createEffect(shouldHighlight, (shouldHighlight) => {
         if (shouldHighlight) {
-          series.applyOptions(initialColors);
+          series.inner.applyOptions(initialColors);
         } else {
-          series.applyOptions(darkenedColors);
+          series.inner.applyOptions(darkenedColors);
         }
       });
 
@@ -882,13 +883,133 @@ function createLegend({ parent, signals, utils, paneIndex }) {
         anchor.title = "Click to view data";
         div.append(anchor);
       }
+      // });
     },
-    reset() {
-      legendElement.innerHTML = "";
+    /**
+     * @param {number} start
+     */
+    removeFrom(start) {
+      // disposeFrom(start);
+      legends.splice(start).forEach((child) => child.remove());
     },
   };
 }
 
+/**
+ * @param {Object} args
+ * @param {IChartApi} args.ichart
+ * @param {number} args.paneIndex
+ * @param {Signals} args.signals
+ * @param {Utilities} args.utils
+ */
+function createPaneHeightObserver({ ichart, paneIndex, signals, utils }) {
+  if (!paneIndex) return;
+
+  const owner = signals.getOwner();
+
+  const one = "1";
+
+  const callback = () =>
+    setTimeout(() => {
+      try {
+        const _element = ichart.panes().at(paneIndex)?.getHTMLElement();
+        if (!_element) return callback();
+        const element = _element;
+
+        if (element.dataset.observed === one) return;
+        element.dataset.observed = one;
+
+        signals.runWithOwner(owner, () => {
+          const height = signals.createSignal(null, {
+            save: {
+              keyPrefix: "charts",
+              key: `height-${paneIndex}`,
+              ...utils.serde.optNumber,
+            },
+          });
+
+          const savedHeight = height();
+          if (savedHeight !== null) {
+            ichart.panes().at(paneIndex)?.setHeight(savedHeight);
+          }
+
+          let firstRun = true;
+          new ResizeObserver(() => {
+            if (firstRun && savedHeight !== null) {
+              firstRun = false;
+            } else {
+              const h = ichart.panes().at(paneIndex)?.getHeight();
+              if (h === undefined) return;
+              height.set(h);
+            }
+          }).observe(element);
+        });
+      } catch {
+        callback();
+      }
+    }, 5);
+
+  callback();
+}
+
+/**
+ * @param {ISeriesApi<SeriesType>} series
+ * @param {DeepPartial<CreatePriceLine>} options
+ * @param {Colors} colors
+ */
+function createPriceLine(series, options, colors) {
+  series.createPriceLine({
+    price: options.value || 0,
+    color: colors.gray(),
+    axisLabelVisible: false,
+    lineWidth: 1,
+    lineStyle: 4,
+  });
+}
+
+/** @param {number} value  */
+function numberToShortUSFormat(value) {
+  const absoluteValue = Math.abs(value);
+
+  if (isNaN(value)) {
+    return "";
+  } else if (absoluteValue < 10) {
+    return numberToUSFormat(value, 3);
+  } else if (absoluteValue < 1_000) {
+    return numberToUSFormat(value, 2);
+  } else if (absoluteValue < 10_000) {
+    return numberToUSFormat(value, 1);
+  } else if (absoluteValue < 1_000_000) {
+    return numberToUSFormat(value, 0);
+  } else if (absoluteValue >= 900_000_000_000_000_000) {
+    return "Inf.";
+  }
+
+  const log = Math.floor(Math.log10(absoluteValue) - 6);
+
+  const suffices = ["M", "B", "T", "P", "E"];
+  const letterIndex = Math.floor(log / 3);
+  const letter = suffices[letterIndex];
+
+  return `${numberToUSFormat(
+    value / (1_000_000 * 1_000 ** letterIndex),
+    3,
+  )}${letter}`;
+}
+
+/**
+ * @param {number} value
+ * @param {number} [digits]
+ * @param {Intl.NumberFormatOptions} [options]
+ */
+function numberToUSFormat(value, digits, options) {
+  return value.toLocaleString("en-us", {
+    ...options,
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits,
+  });
+}
+
 function createOklchToRGBA() {
   {
     /**
@@ -989,118 +1110,3 @@ function createOklchToRGBA() {
     };
   }
 }
-
-/**
- * @param {Object} args
- * @param {IChartApi} args.ichart
- * @param {number} args.paneIndex
- * @param {Signals} args.signals
- * @param {Utilities} args.utils
- */
-function createPaneHeightObserver({ ichart, paneIndex, signals, utils }) {
-  if (!paneIndex) return;
-
-  const owner = signals.getOwner();
-
-  const one = "1";
-
-  const callback = () =>
-    setTimeout(() => {
-      try {
-        const _element = ichart?.panes().at(paneIndex)?.getHTMLElement();
-        if (!_element) return callback();
-        const element = _element;
-
-        if (element.dataset.observed === one) return;
-        element.dataset.observed = one;
-
-        signals.runWithOwner(owner, () => {
-          const height = signals.createSignal(null, {
-            save: {
-              keyPrefix: "charts",
-              key: `height-${paneIndex}`,
-              ...utils.serde.optNumber,
-            },
-          });
-
-          const savedHeight = height();
-          if (savedHeight !== null) {
-            ichart.panes().at(paneIndex)?.setHeight(savedHeight);
-          }
-
-          let firstRun = true;
-          new ResizeObserver(() => {
-            if (firstRun && savedHeight !== null) {
-              firstRun = false;
-            } else {
-              const h = ichart.panes().at(paneIndex)?.getHeight();
-              if (h === undefined) return;
-              height.set(h);
-            }
-          }).observe(element);
-        });
-      } catch {
-        callback();
-      }
-    }, 5);
-
-  callback();
-}
-
-/**
- * @param {ISeriesApi<SeriesType>} series
- * @param {DeepPartial<CreatePriceLine>} options
- * @param {Colors} colors
- */
-function createPriceLine(series, options, colors) {
-  series.createPriceLine({
-    price: options.value || 0,
-    color: colors.gray(),
-    axisLabelVisible: false,
-    lineWidth: 1,
-    lineStyle: 4,
-  });
-}
-
-/**
- * @param {number} value
- * @param {number} [digits]
- * @param {Intl.NumberFormatOptions} [options]
- */
-function numberToUSFormat(value, digits, options) {
-  return value.toLocaleString("en-us", {
-    ...options,
-    minimumFractionDigits: digits,
-    maximumFractionDigits: digits,
-  });
-}
-
-/** @param {number} value  */
-function numberToShortUSFormat(value) {
-  const absoluteValue = Math.abs(value);
-
-  if (isNaN(value)) {
-    return "";
-  } else if (absoluteValue < 10) {
-    return numberToUSFormat(value, 3);
-  } else if (absoluteValue < 1_000) {
-    return numberToUSFormat(value, 2);
-  } else if (absoluteValue < 10_000) {
-    return numberToUSFormat(value, 1);
-  } else if (absoluteValue < 1_000_000) {
-    return numberToUSFormat(value, 0);
-  } else if (absoluteValue >= 900_000_000_000_000_000) {
-    return "Inf.";
-  }
-
-  const log = Math.floor(Math.log10(absoluteValue) - 6);
-
-  const suffices = ["M", "B", "T", "P", "E"];
-  const letterIndex = Math.floor(log / 3);
-  const letter = suffices[letterIndex];
-
-  return `${numberToUSFormat(
-    value / (1_000_000 * 1_000 ** letterIndex),
-    3,
-  )}${letter}`;
-}
diff --git a/websites/default/packages/solid-signals/wrapper.js b/websites/default/packages/solid-signals/wrapper.js
index 80753e40c..a68d92071 100644
--- a/websites/default/packages/solid-signals/wrapper.js
+++ b/websites/default/packages/solid-signals/wrapper.js
@@ -7,6 +7,8 @@
  * @import { Signal } from "./types";
  */
 
+let effectCount = 0;
+
 const importSignals = import("./v0.3.2-treeshaked/script.js").then(
   (_signals) => {
     const signals = {
@@ -20,16 +22,26 @@ const importSignals = import("./v0.3.2-treeshaked/script.js").then(
         // @ts-ignore
         (compute, effect) => {
           let dispose = /** @type {VoidFunction | null} */ (null);
+
+          function cleanup() {
+            if (dispose) {
+              dispose();
+              dispose = null;
+              console.log("effectCount = ", --effectCount);
+            }
+          }
+
           // @ts-ignore
           _signals.createEffect(compute, (v, oldV) => {
-            dispose?.();
+            console.log("effectCount = ", ++effectCount);
+            cleanup();
             signals.createRoot((_dispose) => {
               dispose = _dispose;
               return effect(v, oldV);
             });
-            signals.onCleanup(() => dispose?.());
+            signals.onCleanup(cleanup);
           });
-          signals.onCleanup(() => dispose?.());
+          signals.onCleanup(cleanup);
         }
       ),
       createMemo: /** @type {typeof CreateMemo} */ (_signals.createMemo),
diff --git a/websites/default/scripts/chart.js b/websites/default/scripts/chart.js
index 6dd997080..69b1d1574 100644
--- a/websites/default/scripts/chart.js
+++ b/websites/default/scripts/chart.js
@@ -28,10 +28,36 @@ export function init({
   elements.charts.append(utils.dom.createShadow("left"));
   elements.charts.append(utils.dom.createShadow("right"));
 
-  const { headerElement, headingElement } = utils.dom.createHeader({});
+  const { headerElement, headingElement } = utils.dom.createHeader();
   elements.charts.append(headerElement);
 
+  const { index, fieldset } = createIndexSelector({ signals, utils });
+
+  const TIMERANGE_LS_KEY = signals.createMemo(
+    () => `chart-timerange-${index()}`,
+  );
+
+  let firstRun = true;
+
+  const from = signals.createSignal(/** @type {number | null} */ (null), {
+    save: {
+      ...utils.serde.optNumber,
+      keyPrefix: TIMERANGE_LS_KEY,
+      key: "from",
+      serializeParam: firstRun,
+    },
+  });
+  const to = signals.createSignal(/** @type {number | null} */ (null), {
+    save: {
+      ...utils.serde.optNumber,
+      keyPrefix: TIMERANGE_LS_KEY,
+      key: "to",
+      serializeParam: firstRun,
+    },
+  });
+
   const chart = lightweightCharts.createChartElement({
+    owner: signals.getOwner(),
     parent: elements.charts,
     signals,
     colors,
@@ -39,18 +65,42 @@ export function init({
     utils,
     vecsResources,
     elements,
+    index,
+    timeScaleSetCallback: (unknownTimeScaleCallback) => {
+      const from_ = from();
+      const to_ = to();
+      if (from_ !== null && to_ !== null) {
+        chart.inner.timeScale().setVisibleLogicalRange({
+          from: from_,
+          to: to_,
+        });
+      } else {
+        unknownTimeScaleCallback();
+      }
+    },
   });
 
-  const index = createIndexSelector({ elements, signals, utils });
+  chart.inner.timeScale().subscribeVisibleLogicalRangeChange(
+    utils.debounce((t) => {
+      if (t) {
+        from.set(t.from);
+        to.set(t.to);
+      }
+    }),
+  );
 
-  let firstRun = true;
+  elements.charts.append(fieldset);
 
   const { field: seriesTypeField, selected: topSeriesType } =
     utils.dom.createHorizontalChoiceField({
       defaultValue: "Line",
       keyPrefix,
       key: "seriestype-0",
-      choices: /** @type {const} */ (["Auto", "Candles", "Line"]),
+      choices: /** @type {const} */ ([
+        // "Auto",
+        "Candles",
+        "Line",
+      ]),
       signals,
     });
 
@@ -67,6 +117,18 @@ export function init({
       sorted: true,
     });
 
+  chart.addFieldsetIfNeeded({
+    id: "charts-unit-0",
+    paneIndex: 0,
+    position: "nw",
+    createChild() {
+      return topUnitField;
+    },
+  });
+
+  const seriesListTop = /** @type {Series[]} */ ([]);
+  const seriesListBottom = /** @type {Series[]} */ ([]);
+
   signals.createEffect(selected, (option) => {
     headingElement.innerHTML = option.title;
 
@@ -83,18 +145,6 @@ export function init({
         sorted: true,
       });
 
-    // signals.createEffect(bottomUnit, (bottomUnit) => {
-    chart.reset({ owner: signals.getOwner() });
-
-    chart.addFieldsetIfNeeded({
-      id: "charts-unit-0",
-      paneIndex: 0,
-      position: "nw",
-      createChild() {
-        return topUnitField;
-      },
-    });
-
     if (bottomUnits.length) {
       chart.addFieldsetIfNeeded({
         id: "charts-unit-1",
@@ -116,64 +166,25 @@ export function init({
     });
 
     signals.createEffect(index, (index) => {
-      const TIMERANGE_LS_KEY = `chart-timerange-${index}`;
-
-      const from = signals.createSignal(/** @type {number | null} */ (null), {
-        save: {
-          ...utils.serde.optNumber,
-          keyPrefix: TIMERANGE_LS_KEY,
-          key: "from",
-          serializeParam: firstRun,
-        },
-      });
-      const to = signals.createSignal(/** @type {number | null} */ (null), {
-        save: {
-          ...utils.serde.optNumber,
-          keyPrefix: TIMERANGE_LS_KEY,
-          key: "to",
-          serializeParam: firstRun,
-        },
-      });
-
-      chart.create({
-        index,
-        timeScaleSetCallback: (unknownTimeScaleCallback) => {
-          const from_ = from();
-          const to_ = to();
-          if (from_ !== null && to_ !== null) {
-            chart.inner()?.timeScale().setVisibleLogicalRange({
-              from: from_,
-              to: to_,
-            });
-          } else {
-            unknownTimeScaleCallback();
-          }
-        },
-      });
-
-      /** @type {ISeriesApi<any> | null} */
-      let prevPriceSeries = null;
       signals.createEffect(
         () => [topUnit(), topSeriesType()],
         ([topUnit, topSeriesType]) => {
-          if (prevPriceSeries) {
-            chart.inner()?.removeSeries(prevPriceSeries);
-          }
-
           switch (topUnit) {
             case "USD": {
               switch (topSeriesType) {
                 case "Candles": {
-                  prevPriceSeries = chart.addCandlestickSeries({
+                  const series = chart.addCandlestickSeries({
                     vecId: "ohlc",
                     name: "Price",
                     unit: topUnit,
                     order: 0,
                   });
+                  seriesListTop[0]?.remove();
+                  seriesListTop[0] = series;
                   break;
                 }
                 case "Line": {
-                  prevPriceSeries = chart.addLineSeries({
+                  const series = chart.addLineSeries({
                     vecId: "close",
                     name: "Price",
                     unit: topUnit,
@@ -183,6 +194,8 @@ export function init({
                     },
                     order: 0,
                   });
+                  seriesListTop[0]?.remove();
+                  seriesListTop[0] = series;
                 }
               }
               // signals.createEffect(webSockets.kraken1dCandle.latest, (latest) => {
@@ -198,17 +211,19 @@ export function init({
             case "Sats": {
               switch (topSeriesType) {
                 case "Candles": {
-                  prevPriceSeries = chart.addCandlestickSeries({
+                  const series = chart.addCandlestickSeries({
                     vecId: "ohlc-in-sats",
                     name: "Price",
                     unit: topUnit,
                     inverse: true,
                     order: 0,
                   });
+                  seriesListTop[0]?.remove();
+                  seriesListTop[0] = series;
                   break;
                 }
                 case "Line": {
-                  prevPriceSeries = chart.addLineSeries({
+                  const series = chart.addLineSeries({
                     vecId: "close-in-sats",
                     name: "Price",
                     unit: topUnit,
@@ -218,6 +233,8 @@ export function init({
                     },
                     order: 0,
                   });
+                  seriesListTop[0]?.remove();
+                  seriesListTop[0] = series;
                 }
               }
               break;
@@ -231,97 +248,97 @@ export function init({
           blueprints: option.top,
           paneIndex: 0,
           unit: topUnit,
-          prevSeriesList: /** @type {ISeriesApi<any>[]} */ ([]),
+          seriesList: seriesListTop,
+          orderStart: 1,
+          legend: chart.legendTop,
         },
         {
           blueprints: option.bottom,
           paneIndex: 1,
           unit: bottomUnit,
-          prevSeriesList: /** @type {ISeriesApi<any>[]} */ ([]),
+          seriesList: seriesListBottom,
+          orderStart: 0,
+          legend: chart.legendBottom,
         },
-      ].forEach(({ blueprints, paneIndex, unit, prevSeriesList }) => {
-        signals.createEffect(unit, (unit) => {
-          prevSeriesList.splice(0).forEach((series) => {
-            chart.inner()?.removeSeries(series);
-          });
+      ].forEach(
+        ({
+          blueprints,
+          paneIndex,
+          unit,
+          seriesList: seriesList,
+          orderStart,
+          legend,
+        }) => {
+          signals.createEffect(unit, (unit) => {
+            legend.removeFrom(orderStart);
 
-          blueprints[unit]?.forEach((blueprint, order) => {
-            order++;
+            seriesList.splice(orderStart).forEach((series) => {
+              series.remove();
+            });
 
-            const indexes = /** @type {readonly number[]} */ (
-              vecIdToIndexes[blueprint.key]
-            );
+            blueprints[unit]?.forEach((blueprint, order) => {
+              order += orderStart;
 
-            if (indexes.includes(index)) {
-              switch (blueprint.type) {
-                case "Baseline": {
-                  prevSeriesList.push(
-                    chart.addBaselineSeries({
-                      vecId: blueprint.key,
-                      // color: blueprint.color,
-                      name: blueprint.title,
-                      unit,
-                      defaultActive: blueprint.defaultActive,
-                      paneIndex,
-                      options: {
-                        ...blueprint.options,
-                        topLineColor:
-                          blueprint.color?.() ?? blueprint.colors?.[0](),
-                        bottomLineColor:
-                          blueprint.color?.() ?? blueprint.colors?.[1](),
-                      },
-                      order,
-                    }),
-                  );
-                  break;
+              const indexes = /** @type {readonly number[]} */ (
+                vecIdToIndexes[blueprint.key]
+              );
+
+              if (indexes.includes(index)) {
+                switch (blueprint.type) {
+                  case "Baseline": {
+                    seriesList.push(
+                      chart.addBaselineSeries({
+                        vecId: blueprint.key,
+                        name: blueprint.title,
+                        unit,
+                        defaultActive: blueprint.defaultActive,
+                        paneIndex,
+                        options: {
+                          ...blueprint.options,
+                          topLineColor:
+                            blueprint.color?.() ?? blueprint.colors?.[0](),
+                          bottomLineColor:
+                            blueprint.color?.() ?? blueprint.colors?.[1](),
+                        },
+                        order,
+                      }),
+                    );
+                    break;
+                  }
+                  case "Candlestick": {
+                    throw Error("TODO");
+                  }
+                  default:
+                    seriesList.push(
+                      chart.addLineSeries({
+                        vecId: blueprint.key,
+                        color: blueprint.color,
+                        name: blueprint.title,
+                        unit,
+                        defaultActive: blueprint.defaultActive,
+                        paneIndex,
+                        options: blueprint.options,
+                        order,
+                      }),
+                    );
                 }
-                case "Candlestick": {
-                  throw Error("TODO");
-                  break;
-                }
-                default:
-                  prevSeriesList.push(
-                    chart.addLineSeries({
-                      vecId: blueprint.key,
-                      color: blueprint.color,
-                      name: blueprint.title,
-                      unit,
-                      defaultActive: blueprint.defaultActive,
-                      paneIndex,
-                      options: blueprint.options,
-                      order,
-                    }),
-                  );
               }
-            }
+            });
           });
-        });
+        },
+      );
 
-        chart
-          .inner()
-          ?.timeScale()
-          .subscribeVisibleLogicalRangeChange(
-            utils.debounce((t) => {
-              if (t) {
-                from.set(t.from);
-                to.set(t.to);
-              }
-            }),
-          );
-
-        firstRun = false;
-      });
+      firstRun = false;
     });
   });
 }
 
 /**
  * @param {Object} args
- * @param {Elements} args.elements
  * @param {Signals} args.signals
  * @param {Utilities} args.utils
  */
-function createIndexSelector({ elements, signals, utils }) {
+function createIndexSelector({ signals, utils }) {
   const { field, selected } = utils.dom.createHorizontalChoiceField({
     defaultValue: "date",
     keyPrefix,
@@ -344,7 +361,6 @@ function createIndexSelector({ elements, signals, utils }) {
   const fieldset = window.document.createElement("fieldset");
   fieldset.append(field);
   fieldset.dataset.size = "sm";
-  elements.charts.append(fieldset);
 
   const index = signals.createMemo(
     /** @returns {ChartableIndex} */ () => {
@@ -367,5 +383,5 @@ function createIndexSelector({ elements, signals, utils }) {
     },
   );
 
-  return index;
+  return { fieldset, index };
 }