acttrader-charts 1.4.0-beta.11 → 1.4.0-beta.13

package/README.md

@@ -223,6 +223,21 @@ chart.on('compareRemoved', ({ symbol })        => console.log('-', symbol));
 chart.on('compareError',   ({ symbol, message }) => console.warn(symbol, message));
 ```
 
+#### Saving and syncing compares
+
+`getState().compares` is the ordered list of compare symbols, and `[]` once the
+last one is removed (it is `undefined` only when no `compareDataLoader` is set).
+Save the list as it is, including `[]`, so a removal reaches the trader's
+other devices. `setState({ compares })` applies a saved list: `[]` clears every
+compare, the current list is left as it is (no refetch), and a list applied
+before the primary's first load waits as `loading` and is fetched with that
+load instead of failing.
+
+The % on each legend chip uses the same baseline as the lines: the compare's
+close at the leftmost visible bar, measured at the last bar (or the hovered
+bar). It updates as you scroll and zoom, so two screens showing different
+ranges show different %.
+
 When any compare is active the Y-axis switches to percent (`+12.34%` /
 `-5.67%`); removing every compare returns it to absolute-price labels.
 The Compare button in the advanced toolbar opens an in-chart picker filtered
@@ -1595,6 +1610,22 @@ const chart = new ChartEngine({
 chart.setDrawingTool('icon');   // uses the last glyph picked
 ```
 
+#### Hosts with their own picker (native apps)
+
+The panel above is part of the web drawing toolbar. A host that draws its own
+toolbar (the Android and iOS apps in native-UI mode) builds the picker from the
+catalog instead: the `icon` tool carries `glyphTabs`, each with a `kind`, a
+`label` and its `groups` (`id`, `name`, `tabIcon`, `glyphs`), the same list the
+web panel shows. On a tap, choose the glyph and then arm the tool:
+
+```ts
+chart.setIconGlyph('😍', 'sticker');   // kind: 'emoji' (default) | 'sticker' | 'icon'
+chart.setDrawingTool('icon');
+```
+
+Before `glyphTabs` and `setIconGlyph`, a host without the web toolbar had no
+list to show and every icon it placed was the default ⭐.
+
 #### The picker
 
 Opening the **Icons & Emojis** group gives a panel, not a list of rows: a row per

package/dist/{MACD-B8LTAGUU.d.cts → MACD-ico-au5d.d.cts}

@@ -323,10 +323,6 @@ interface ChartSettingsTemplate {
 }
 /** Mints a stable, collision-free id for a settings-template name. */
 declare function makeSettingsTemplateId(name: string, existingIds?: readonly string[]): string;
-/**
- * Deep-copies a settings snapshot one level past `canvasColors`, so a saved
- * template can never be mutated by later edits to the live chart (or vice versa).
- */
 declare function cloneSettings(s: ChartSettingsSnapshot): ChartSettingsSnapshot;
 /** Builds a template from a settings snapshot. */
 declare function captureSettingsTemplate(name: string, settings: ChartSettingsSnapshot, opts?: {

package/dist/{MACD-B8LTAGUU.d.ts → MACD-ico-au5d.d.ts}

@@ -323,10 +323,6 @@ interface ChartSettingsTemplate {
 }
 /** Mints a stable, collision-free id for a settings-template name. */
 declare function makeSettingsTemplateId(name: string, existingIds?: readonly string[]): string;
-/**
- * Deep-copies a settings snapshot one level past `canvasColors`, so a saved
- * template can never be mutated by later edits to the live chart (or vice versa).
- */
 declare function cloneSettings(s: ChartSettingsSnapshot): ChartSettingsSnapshot;
 /** Builds a template from a settings snapshot. */
 declare function captureSettingsTemplate(name: string, settings: ChartSettingsSnapshot, opts?: {

package/dist/index.cjs

@@ -27089,6 +27089,123 @@ var IndicatorSettingsDialog = class {
   }
 };
 
+// src/core/templateStore.ts
+function slugify(name) {
+  return name.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}
+function mintId(name, existingIds = [], fallback = "template") {
+  const base = slugify(name) || fallback;
+  if (!existingIds.includes(base)) return base;
+  let n = 2;
+  while (existingIds.includes(`${base}-${n}`)) n++;
+  return `${base}-${n}`;
+}
+function upsertById(list, entry) {
+  const idx = list.findIndex((e) => e.id === entry.id);
+  if (idx === -1) return [...list, entry];
+  const next = [...list];
+  next[idx] = entry;
+  return next;
+}
+function removeById(list, id) {
+  return list.filter((e) => e.id !== id);
+}
+function findByIdOrName(list, idOrName) {
+  const byId = list.find((e) => e.id === idOrName);
+  if (byId) return byId;
+  const slug = slugify(idOrName);
+  return list.find((e) => slugify(e.name) === slug);
+}
+
+// src/core/settingsTemplates.ts
+function makeSettingsTemplateId(name, existingIds = []) {
+  return mintId(name, existingIds, "settings");
+}
+function cloneCanvasColors(c) {
+  if (!c) return c;
+  return {
+    ...c,
+    ...c.dark ? { dark: { ...c.dark } } : {},
+    ...c.light ? { light: { ...c.light } } : {}
+  };
+}
+function cloneSettings(s) {
+  return {
+    tradeDisplayFilter: s.tradeDisplayFilter,
+    positionRenderStyle: s.positionRenderStyle,
+    theme: s.theme,
+    showTradeLevelsAlways: s.showTradeLevelsAlways,
+    showPriceAxisCountdown: s.showPriceAxisCountdown,
+    ...s.canvasColors ? {
+      canvasColors: {
+        ...s.canvasColors.dark ? { dark: { ...s.canvasColors.dark } } : {},
+        ...s.canvasColors.light ? { light: { ...s.canvasColors.light } } : {}
+      }
+    } : {},
+    // Each group is one level deep, so a spread copy is a full copy.
+    ...s.statusLine ? { statusLine: { ...s.statusLine } } : {},
+    ...s.scales ? { scales: { ...s.scales } } : {},
+    ...s.canvas ? { canvas: { ...s.canvas } } : {},
+    ...s.barColorSource ? { barColorSource: s.barColorSource } : {}
+  };
+}
+function captureSettingsTemplate(name, settings, opts = {}) {
+  return {
+    id: opts.id ?? makeSettingsTemplateId(name, opts.existingIds ?? []),
+    name: name.trim(),
+    settings: cloneSettings(settings),
+    ...opts.savedAt !== void 0 ? { savedAt: opts.savedAt } : {}
+  };
+}
+function upsertSettingsTemplate(list, template) {
+  return upsertById(list, template);
+}
+function removeSettingsTemplate(list, id) {
+  return removeById(list, id);
+}
+function findSettingsTemplate(list, idOrName) {
+  return findByIdOrName(list, idOrName);
+}
+function isGroup(v) {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+function sanitizeSettingsTemplates(input) {
+  if (!Array.isArray(input)) return [];
+  const out = [];
+  for (const raw of input) {
+    if (typeof raw !== "object" || raw === null) continue;
+    const t = raw;
+    if (typeof t.name !== "string" || t.name.trim() === "") continue;
+    if (typeof t.settings !== "object" || t.settings === null) continue;
+    const s = t.settings;
+    out.push({
+      id: typeof t.id === "string" && t.id !== "" ? t.id : makeSettingsTemplateId(
+        t.name,
+        out.map((x) => x.id)
+      ),
+      name: t.name.trim(),
+      settings: {
+        tradeDisplayFilter: s.tradeDisplayFilter ?? "all",
+        positionRenderStyle: s.positionRenderStyle ?? "line",
+        theme: s.theme === "light" ? "light" : "dark",
+        showTradeLevelsAlways: s.showTradeLevelsAlways === true,
+        showPriceAxisCountdown: s.showPriceAxisCountdown === true,
+        ...typeof s.canvasColors === "object" && s.canvasColors !== null ? { canvasColors: s.canvasColors } : {},
+        // Groups are carried through when present and dropped when not.
+        // Absent is meaningful: it means "leave the chart as it is",
+        // which is what an old template saved before these existed has
+        // to mean if applying it is not to rearrange the chart.
+        ...isGroup(s.statusLine) ? { statusLine: s.statusLine } : {},
+        ...isGroup(s.scales) ? { scales: s.scales } : {},
+        ...isGroup(s.canvas) ? { canvas: s.canvas } : {},
+        ...s.barColorSource === "previousClose" || s.barColorSource === "open" ? { barColorSource: s.barColorSource } : {}
+      },
+      ...typeof t.savedAt === "number" ? { savedAt: t.savedAt } : {}
+    });
+  }
+  return out;
+}
+
 // src/ui/ChartSettingsDialog.ts
 var TAB_LABELS = {
   appearance: "Appearance",
@@ -27156,7 +27273,12 @@ var ChartSettingsDialog = class {
       display: "flex",
       flexDirection: "column",
       width: "540px",
-      minHeight: "340px",
+      // One height for every tab. Sized to its content, the panel grew
+      // and shrank as you switched tabs (Appearance tall, Status Line
+      // short) and the footer jumped about; a long tab now scrolls
+      // inside the content area instead.
+      height: "min(620px, calc(100vh - 48px))",
+      minHeight: "min(340px, calc(100vh - 48px))",
       maxWidth: "calc(100vw - 32px)",
       maxHeight: "calc(100vh - 48px)",
       background: theme.tooltip.background,
@@ -27193,7 +27315,7 @@ var ChartSettingsDialog = class {
   }
   show(current, onChange, onReset) {
     const wasVisible = this.isVisible;
-    this.current = { ...current };
+    this.current = { ...current, canvasColors: cloneCanvasColors(current.canvasColors) };
     this.onChange = onChange;
     this.onReset = onReset ?? null;
     this.renderContent();
@@ -27253,7 +27375,7 @@ var ChartSettingsDialog = class {
   }
   // ── Private – emit ────────────────────────────────────────────────────────
   emit() {
-    this.onChange?.({ ...this.current });
+    this.onChange?.({ ...this.current, canvasColors: cloneCanvasColors(this.current.canvasColors) });
   }
   // ── Private – panel theme ─────────────────────────────────────────────────
   applyPanelTheme() {
@@ -28033,9 +28155,11 @@ var ChartSettingsDialog = class {
       }
     ];
     const makeSwatch = (def) => this.makeColorSwatch(current[def.field] ?? def.fallback, (hex) => {
-      if (!this.current.canvasColors) this.current.canvasColors = {};
-      if (!this.current.canvasColors[themeKey]) this.current.canvasColors[themeKey] = {};
-      this.current.canvasColors[themeKey][def.field] = hex;
+      const cc = this.current.canvasColors ?? {};
+      this.current.canvasColors = {
+        ...cc,
+        [themeKey]: { ...cc[themeKey] ?? {}, [def.field]: hex }
+      };
       this.emit();
     });
     for (const { label, s1, s2 } of rows) {
@@ -30734,6 +30858,25 @@ var CompareManager = class {
       });
       return;
     }
+    const entry = this.createEntry(symbol);
+    await this.fetchOne(entry, this.lastParams, this.generation);
+  }
+  /** True once the primary has a loaded range that `add()` can fetch against. */
+  hasRange() {
+    return this.lastParams !== null;
+  }
+  /**
+   * Add a compare symbol as `loading` without fetching. Used when restoring a
+   * saved list before the primary's first load: the next `refetchAll()` (run
+   * when the primary range arrives) loads it. No-op for a duplicate, an empty
+   * symbol, or past `maxCompares`.
+   */
+  addPending(symbol) {
+    if (!symbol || this.entries.has(symbol)) return;
+    if (this.entries.size >= this.maxCompares) return;
+    this.createEntry(symbol);
+  }
+  createEntry(symbol) {
     const color = this.assignColor();
     const entry = {
       symbol,
@@ -30744,7 +30887,7 @@ var CompareManager = class {
     this.entries.set(symbol, entry);
     this.order.push(symbol);
     this.emitter.emit("compareAdded", { symbol, color });
-    await this.fetchOne(entry, this.lastParams, this.generation);
+    return entry;
   }
   remove(symbol) {
     if (!this.entries.has(symbol)) return;
@@ -32015,34 +32158,6 @@ function formatMeasureDate(time, timeframe, timezone) {
   return `${date} ${pick(cp, "hour")}:${pick(cp, "minute")}`;
 }
 
-// src/core/templateStore.ts
-function slugify(name) {
-  return name.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
-}
-function mintId(name, existingIds = [], fallback = "template") {
-  const base = slugify(name) || fallback;
-  if (!existingIds.includes(base)) return base;
-  let n = 2;
-  while (existingIds.includes(`${base}-${n}`)) n++;
-  return `${base}-${n}`;
-}
-function upsertById(list, entry) {
-  const idx = list.findIndex((e) => e.id === entry.id);
-  if (idx === -1) return [...list, entry];
-  const next = [...list];
-  next[idx] = entry;
-  return next;
-}
-function removeById(list, id) {
-  return list.filter((e) => e.id !== id);
-}
-function findByIdOrName(list, idOrName) {
-  const byId = list.find((e) => e.id === idOrName);
-  if (byId) return byId;
-  const slug = slugify(idOrName);
-  return list.find((e) => slugify(e.name) === slug);
-}
-
 // src/core/savedLayouts.ts
 function makeLayoutId(name, existingIds = []) {
   return mintId(name, existingIds, "layout");
@@ -32097,87 +32212,6 @@ function sanitizeLayouts(input) {
   return out;
 }
 
-// src/core/settingsTemplates.ts
-function makeSettingsTemplateId(name, existingIds = []) {
-  return mintId(name, existingIds, "settings");
-}
-function cloneSettings(s) {
-  return {
-    tradeDisplayFilter: s.tradeDisplayFilter,
-    positionRenderStyle: s.positionRenderStyle,
-    theme: s.theme,
-    showTradeLevelsAlways: s.showTradeLevelsAlways,
-    showPriceAxisCountdown: s.showPriceAxisCountdown,
-    ...s.canvasColors ? {
-      canvasColors: {
-        ...s.canvasColors.dark ? { dark: { ...s.canvasColors.dark } } : {},
-        ...s.canvasColors.light ? { light: { ...s.canvasColors.light } } : {}
-      }
-    } : {},
-    // Each group is one level deep, so a spread copy is a full copy.
-    ...s.statusLine ? { statusLine: { ...s.statusLine } } : {},
-    ...s.scales ? { scales: { ...s.scales } } : {},
-    ...s.canvas ? { canvas: { ...s.canvas } } : {},
-    ...s.barColorSource ? { barColorSource: s.barColorSource } : {}
-  };
-}
-function captureSettingsTemplate(name, settings, opts = {}) {
-  return {
-    id: opts.id ?? makeSettingsTemplateId(name, opts.existingIds ?? []),
-    name: name.trim(),
-    settings: cloneSettings(settings),
-    ...opts.savedAt !== void 0 ? { savedAt: opts.savedAt } : {}
-  };
-}
-function upsertSettingsTemplate(list, template) {
-  return upsertById(list, template);
-}
-function removeSettingsTemplate(list, id) {
-  return removeById(list, id);
-}
-function findSettingsTemplate(list, idOrName) {
-  return findByIdOrName(list, idOrName);
-}
-function isGroup(v) {
-  return typeof v === "object" && v !== null && !Array.isArray(v);
-}
-function sanitizeSettingsTemplates(input) {
-  if (!Array.isArray(input)) return [];
-  const out = [];
-  for (const raw of input) {
-    if (typeof raw !== "object" || raw === null) continue;
-    const t = raw;
-    if (typeof t.name !== "string" || t.name.trim() === "") continue;
-    if (typeof t.settings !== "object" || t.settings === null) continue;
-    const s = t.settings;
-    out.push({
-      id: typeof t.id === "string" && t.id !== "" ? t.id : makeSettingsTemplateId(
-        t.name,
-        out.map((x) => x.id)
-      ),
-      name: t.name.trim(),
-      settings: {
-        tradeDisplayFilter: s.tradeDisplayFilter ?? "all",
-        positionRenderStyle: s.positionRenderStyle ?? "line",
-        theme: s.theme === "light" ? "light" : "dark",
-        showTradeLevelsAlways: s.showTradeLevelsAlways === true,
-        showPriceAxisCountdown: s.showPriceAxisCountdown === true,
-        ...typeof s.canvasColors === "object" && s.canvasColors !== null ? { canvasColors: s.canvasColors } : {},
-        // Groups are carried through when present and dropped when not.
-        // Absent is meaningful: it means "leave the chart as it is",
-        // which is what an old template saved before these existed has
-        // to mean if applying it is not to rearrange the chart.
-        ...isGroup(s.statusLine) ? { statusLine: s.statusLine } : {},
-        ...isGroup(s.scales) ? { scales: s.scales } : {},
-        ...isGroup(s.canvas) ? { canvas: s.canvas } : {},
-        ...s.barColorSource === "previousClose" || s.barColorSource === "open" ? { barColorSource: s.barColorSource } : {}
-      },
-      ...typeof t.savedAt === "number" ? { savedAt: t.savedAt } : {}
-    });
-  }
-  return out;
-}
-
 // src/core/indicatorTemplates.ts
 function makeTemplateId(name, existingIds = []) {
   return mintId(name, existingIds);
@@ -37547,6 +37581,8 @@ var _ChartEngine = class _ChartEngine {
     this.valueTooltipEnabled = false;
     this.valueTooltip = null;
     this.compareLegend = null;
+    /** Inputs the compare chips were last computed from (see syncCompareLegend). */
+    this._compareLegendKey = "";
     this.comparePickerModal = null;
     this.compareDataLoader = null;
     /** Crosshair-hovered bar index used to drive live compare percent values. */
@@ -39326,7 +39362,7 @@ var _ChartEngine = class _ChartEngine {
       this.tradeDisplayFilter = config.tradeDisplayFilter;
     }
     if (config.canvasColors) {
-      this.settingsCanvasColors = config.canvasColors;
+      this.settingsCanvasColors = cloneCanvasColors(config.canvasColors);
     }
     this.recomputeRenderStyle();
     this.showBidAskLines = config.showBidAskLines ?? false;
@@ -41851,7 +41887,7 @@ var _ChartEngine = class _ChartEngine {
    * like the dialog's own picks, and `stateChange` fires.
    */
   setCanvasColors(colors) {
-    this.settingsCanvasColors = colors ?? {};
+    this.settingsCanvasColors = cloneCanvasColors(colors ?? {});
     this.setTheme(this.themeName);
     return this;
   }
@@ -42266,11 +42302,15 @@ var _ChartEngine = class _ChartEngine {
       })),
       positionRenderStyle: this.baseRenderStyle(),
       tradeDisplayFilter: this.tradeDisplayFilter,
-      canvasColors: Object.keys(this.settingsCanvasColors).length > 0 ? { ...this.settingsCanvasColors } : void 0,
+      canvasColors: Object.keys(this.settingsCanvasColors).length > 0 ? cloneCanvasColors(this.settingsCanvasColors) : void 0,
       tfcEnabled: this.tfcActive,
       viewport: this.getViewportTimestamps(),
       priceScale: this.priceScaleFactor !== 1 || this.pricePanOffset !== 0 ? { factor: this.priceScaleFactor, panOffset: this.pricePanOffset } : void 0,
-      compares: this.compareManager && this.compareManager.isActive() ? this.compareManager.list().map((e) => e.symbol) : void 0
+      // Always a list when compare is available — `[]` once the last one
+      // is removed. Hosts merge the saved block over the stored one, so
+      // leaving the key out kept the old list on the server and the
+      // compares came back on the trader's other devices.
+      compares: this.compareManager ? this.compareManager.list().map((e) => e.symbol) : void 0
     };
   }
   /**
@@ -42365,7 +42405,7 @@ var _ChartEngine = class _ChartEngine {
         this.tradeDisplayFilter = state.tradeDisplayFilter;
       }
       if (state.canvasColors) {
-        this.settingsCanvasColors = state.canvasColors;
+        this.settingsCanvasColors = cloneCanvasColors(state.canvasColors);
       }
       if (state.tfcEnabled !== void 0 && this.tfcEnabled) {
         this.tfcActive = state.tfcEnabled;
@@ -42390,12 +42430,26 @@ var _ChartEngine = class _ChartEngine {
           };
         }
       }
-      if (state.compares && state.compares.length > 0 && this.compareManager) {
-        this.compareManager.clear();
-        for (const sym of state.compares) {
-          void this.compareManager.add(sym);
+      if (Array.isArray(state.compares) && this.compareManager) {
+        const cm = this.compareManager;
+        const current = cm.list().map((e) => e.symbol);
+        const same = current.length === state.compares.length && current.every((s, i) => s === state.compares[i]);
+        if (!same) {
+          cm.clear();
+          for (const sym of state.compares) {
+            if (cm.hasRange()) {
+              void cm.add(sym).then(() => {
+                this.recomputeIndicators();
+                this.refreshCompareLegend();
+                this.scheduleRender();
+              });
+            } else {
+              cm.addPending(sym);
+            }
+          }
+          this.recomputeIndicators();
+          this.refreshCompareLegend();
         }
-        this.refreshCompareLegend();
       }
     } finally {
       this.isRestoringState = false;
@@ -42957,6 +43011,20 @@ var _ChartEngine = class _ChartEngine {
     console.warn("[acttrader-charts] setDraftOrderLabels() is deprecated and is a no-op. DraftOrderQtyInput has been removed.");
     return this;
   }
+  /**
+   * Choose the glyph the next `icon` drawing places — what a tap in the
+   * Emojis / Stickers / Icons picker does. For hosts that draw their own
+   * picker from the catalog's `glyphTabs` (the native apps): call this, then
+   * `setDrawingTool('icon')`. `kind` sets the size and whether the drawing
+   * colour applies (stickers are larger; icons take the colour). An empty
+   * glyph is ignored.
+   */
+  setIconGlyph(glyph, kind = "emoji") {
+    if (typeof glyph !== "string" || glyph.length === 0) return this;
+    this.pendingIconGlyph = glyph;
+    this.pendingIconKind = kind === "sticker" || kind === "icon" ? kind : "emoji";
+    return this;
+  }
   setDrawingTool(tool) {
     this.drawingManager.setActiveTool(tool);
     this.leftBar?.setActiveTool(tool);
@@ -44501,7 +44569,7 @@ var _ChartEngine = class _ChartEngine {
       theme: this.themeName,
       showTradeLevelsAlways: this.showTradeLevelsAlways,
       showPriceAxisCountdown: this.showPriceAxisCountdown,
-      canvasColors: { ...this.settingsCanvasColors },
+      canvasColors: cloneCanvasColors(this.settingsCanvasColors),
       // The resolved sets, not the sparse ones. A template is a thing
       // the user means to reproduce exactly; saving the gaps would make
       // it reproduce whatever the *next* chart's defaults happen to be.
@@ -44525,7 +44593,7 @@ var _ChartEngine = class _ChartEngine {
     }
     this.positionRenderStyle = settings.positionRenderStyle;
     if (settings.canvasColors) {
-      this.settingsCanvasColors = settings.canvasColors;
+      this.settingsCanvasColors = cloneCanvasColors(settings.canvasColors);
     }
     if (this.showTradeLevelsAlways !== settings.showTradeLevelsAlways) {
       this.showTradeLevelsAlways = settings.showTradeLevelsAlways;
@@ -45570,6 +45638,31 @@ var _ChartEngine = class _ChartEngine {
     });
     this.compareLegend.update(states);
   }
+  /**
+   * Called from render while comparing. The lines re-base to the leftmost
+   * visible bar every frame; the chips used to be computed only on
+   * add/remove/crosshair, so after a scroll, zoom, new bar or refetch they
+   * showed a % from an older view. Recompute them whenever anything the
+   * chip % depends on has changed.
+   */
+  syncCompareLegend(baselineIdx, entries) {
+    const all = this.dataStore.all;
+    const last = all[all.length - 1];
+    const key = [
+      baselineIdx,
+      all.length,
+      last?.time,
+      last?.close,
+      this.compareHoveredIndex,
+      ...entries.map((e) => {
+        const b = e.bars[e.bars.length - 1];
+        return `${e.symbol}:${e.status}:${e.bars.length}:${b?.time}:${b?.close}`;
+      })
+    ].join("|");
+    if (key === this._compareLegendKey) return;
+    this._compareLegendKey = key;
+    this.refreshCompareLegend();
+  }
   /** Returns the index of the leftmost visible bar in the primary store,
    *  used as the baseline anchor for percent-change normalization. */
   compareBaselineIndex(primaryBars) {
@@ -45683,6 +45776,7 @@ var _ChartEngine = class _ChartEngine {
           (e) => e.status === "ready" && e.bars.length > 0 ? buildComparePctSeries(e.bars, primaryTimes, baselineIdx ?? 0) : []
         );
         compareColors = entries.map((e) => e.color);
+        this.syncCompareLegend(baselineIdx, entries);
         bars = transformBarsToPct(absBars, baseline);
         pctTargetRange = combinedPercentRange(
           absBars,