@wick-charts/vue 0.6.3 → 0.7.0

package/dist/ui/YLabel.vue.js

@@ -1,139 +1,136 @@
-import { defineComponent as q, useSlots as j, computed as n, ref as w, onMounted as G, onUnmounted as W, openBlock as A, createElementBlock as B, Fragment as _, renderSlot as H, createElementVNode as T, normalizeStyle as z, unref as g, createVNode as J, createCommentVNode as K } from "vue";
-import { prefersReducedMotion as Q } from "../core/dist/animation/reduced-motion.js";
-import { resolveAnimate as X, firstVisibleValue as Z, BadgeAnimator as ee } from "../core/dist/chart/badge-animator.js";
-import { useChartInstance as te } from "../context.js";
-import ne from "./NumberFlow.vue.js";
-const ie = /* @__PURE__ */ q({
+import { defineComponent as O, useSlots as W, computed as t, ref as w, onMounted as H, onUnmounted as J, openBlock as A, createElementBlock as B, Fragment as Y, renderSlot as K, createElementVNode as _, normalizeStyle as z, unref as M, createVNode as Q, createCommentVNode as X } from "vue";
+import { prefersReducedMotion as Z } from "../core/dist/animation/reduced-motion.js";
+import { resolveAnimate as ee, resolveYLabelSeriesId as te, firstVisibleValue as ae, BadgeAnimator as le } from "../core/dist/chart/badge-animator.js";
+import { useChartInstance as ne } from "../context.js";
+import oe from "./NumberFlow.vue.js";
+const ce = /* @__PURE__ */ O({
   __name: "YLabel",
   props: {
     seriesId: {},
     color: {},
     format: { type: Function },
-    animate: { type: [Boolean, Object] }
+    animate: { type: [Boolean, Object] },
+    scale: {}
   },
-  setup(Y) {
-    const f = Y, e = te(), E = j(), M = n(() => typeof E.default == "function"), i = w(0), o = w(null);
-    let m = null, x = null, u = null;
-    const N = n(() => X(f.animate));
+  setup(E) {
+    const r = E, e = ne(), N = W(), R = t(() => typeof N.default == "function"), l = w(0), i = w(null);
+    let m = null, g = null, s = null;
+    const T = t(() => ee(r.animate));
     function S() {
-      u = null;
-      const t = s.value, l = t !== null ? e.getStackedLastValue(t) : null;
-      if (t === null || !l) {
-        m = null, x = null;
+      s = null;
+      const a = o.value, u = a !== null ? e.getStackedLastValue(a) : null;
+      if (a === null || !u) {
+        m = null, g = null;
         return;
       }
-      const v = l.value;
-      (m === null || x !== t) && (m = new ee(v), x = t);
-      const { glide: d, countUp: U, settleMs: $ } = N.value, I = e.getIntroFront(t), c = m.frame({
-        target: v,
+      const f = u.value;
+      (m === null || g !== a) && (m = new le(f), g = a);
+      const { glide: $, countUp: j, settleMs: G } = T.value, I = e.getIntroFront(a), c = m.frame({
+        target: f,
         // Only needed for the intro count-up; skip the visible-range binary search
         // entirely once the reveal has settled (the hot streaming path).
-        firstVisible: I < 1 ? Z(e, t, v) : v,
+        firstVisible: I < 1 ? ae(e, a, f) : f,
         introFront: I,
         now: performance.now(),
-        glide: d,
-        countUp: U,
-        settleMs: $,
-        reducedMotion: Q()
-      }), y = o.value;
-      (y === null || y.positionValue !== c.positionValue || y.textValue !== c.textValue || y.opacity !== c.opacity) && (o.value = { positionValue: c.positionValue, textValue: c.textValue, opacity: c.opacity }), c.animating && u === null && (u = requestAnimationFrame(S));
+        glide: $,
+        countUp: j,
+        settleMs: G,
+        reducedMotion: Z()
+      }), d = i.value;
+      (d === null || d.positionValue !== c.positionValue || d.textValue !== c.textValue || d.opacity !== c.opacity) && (i.value = { positionValue: c.positionValue, textValue: c.textValue, opacity: c.opacity }), c.animating && s === null && (s = requestAnimationFrame(S));
     }
-    function O() {
-      u === null && (u = requestAnimationFrame(S));
+    function D() {
+      s === null && (s = requestAnimationFrame(S));
     }
     const p = () => {
-      i.value++, O();
+      l.value++, D();
     };
-    G(() => {
+    H(() => {
       e.setYLabel(!0), e.on("overlayChange", p), e.on("viewportChange", p), e.getSeriesIds().length > 0 && p();
-    }), W(() => {
-      e.setYLabel(!1), e.off("overlayChange", p), e.off("viewportChange", p), u !== null && cancelAnimationFrame(u), u = null;
+    }), J(() => {
+      e.setYLabel(!1), e.off("overlayChange", p), e.off("viewportChange", p), s !== null && cancelAnimationFrame(s), s = null;
     });
-    function R(t, l) {
-      if (l !== void 0) return l;
-      const v = t.getSeriesIdsByType("time", { visibleOnly: !0, singleLayerOnly: !0 });
-      if (v.length > 0) return v[0];
-      const d = t.getSeriesIdsByType("time", { visibleOnly: !0 });
-      return d.length > 0 ? d[0] : null;
-    }
-    const s = n(() => (i.value, R(e, f.seriesId))), a = n(() => (i.value, s.value !== null ? e.getStackedLastValue(s.value) : null)), b = n(() => (i.value, s.value !== null ? e.getPreviousClose(s.value) : null)), r = n(() => (i.value, e.getTheme())), D = n(() => o.value !== null ? o.value.positionValue : a.value?.value ?? 0), P = n(() => o.value !== null ? o.value.textValue : a.value?.value ?? 0), h = n(() => o.value !== null ? o.value.opacity : s.value === null ? 1 : e.getIntroFront(s.value) < 1 ? 0 : 1), V = n(() => (i.value, a.value === null ? 0 : e.yScale.valueToY(D.value))), k = n(() => a.value === null || b.value === null ? "neutral" : a.value.value > b.value ? "up" : a.value.value < b.value ? "down" : "neutral"), L = n(() => {
-      if (a.value === null) return r.value.yLabel.neutralBackground;
-      if (!a.value.isLive) return r.value.axis.textColor;
-      if (f.color) return f.color;
-      switch (k.value) {
+    const o = t(() => (l.value, te(e, r.seriesId))), n = t(() => (l.value, o.value !== null ? e.getStackedLastValue(o.value) : null)), y = t(() => (l.value, o.value !== null ? e.getPreviousClose(o.value) : null)), v = t(() => (l.value, e.getTheme())), C = t(() => (l.value, r.scale !== void 0 ? r.scale : o.value !== null ? e.getSeriesScale(o.value) : void 0)), x = t(() => (l.value, e.getYScale(C.value))), U = t(() => (l.value, e.getYScaleColumn(C.value)?.position ?? e.yAxisPosition)), q = t(() => i.value !== null ? i.value.positionValue : n.value?.value ?? 0), P = t(() => i.value !== null ? i.value.textValue : n.value?.value ?? 0), b = t(() => i.value !== null ? i.value.opacity : o.value === null ? 1 : e.getIntroFront(o.value) < 1 ? 0 : 1), h = t(() => (l.value, n.value === null ? 0 : x.value.valueToY(q.value))), F = t(() => n.value === null || y.value === null ? "neutral" : n.value.value > y.value ? "up" : n.value.value < y.value ? "down" : "neutral"), V = t(() => {
+      if (n.value === null) return v.value.yLabel.neutralBackground;
+      if (!n.value.isLive) return v.value.axis.textColor;
+      if (r.color) return r.color;
+      switch (F.value) {
         case "up":
-          return r.value.yLabel.upBackground;
+          return v.value.yLabel.upBackground;
         case "down":
-          return r.value.yLabel.downBackground;
+          return v.value.yLabel.downBackground;
         default:
-          return r.value.yLabel.neutralBackground;
+          return v.value.yLabel.neutralBackground;
       }
-    }), C = n(() => {
-      i.value;
-      const t = e.yScale.getRange(), l = t.max - t.min;
-      return l < 0.1 ? 6 : l < 10 ? 4 : l < 1e3 ? 2 : 0;
-    }), F = n(() => {
-      if (f.format) return f.format;
-      const t = new Intl.NumberFormat("en-US", {
-        minimumFractionDigits: C.value,
-        maximumFractionDigits: C.value,
+    }), L = t(() => {
+      l.value;
+      const a = x.value.getRange(), u = a.max - a.min;
+      return u < 0.1 ? 6 : u < 10 ? 4 : u < 1e3 ? 2 : 0;
+    }), k = t(() => {
+      if (r.format) return r.format;
+      l.value;
+      const a = x.value.getFormat();
+      if (a) return a;
+      const u = new Intl.NumberFormat("en-US", {
+        minimumFractionDigits: L.value,
+        maximumFractionDigits: L.value,
         useGrouping: !1
       });
-      return (l) => t.format(l);
+      return (f) => u.format(f);
     });
-    return (t, l) => a.value !== null ? (A(), B(_, { key: 0 }, [
-      M.value ? H(t.$slots, "default", {
+    return (a, u) => n.value !== null ? (A(), B(Y, { key: 0 }, [
+      R.value ? K(a.$slots, "default", {
         key: 0,
-        value: a.value.value,
-        y: V.value,
-        bgColor: L.value,
-        isLive: a.value.isLive,
-        direction: k.value,
-        format: F.value,
-        opacity: h.value
-      }) : (A(), B(_, { key: 1 }, [
-        T("div", {
+        value: n.value.value,
+        y: h.value,
+        bgColor: V.value,
+        isLive: n.value.isLive,
+        direction: F.value,
+        format: k.value,
+        opacity: b.value
+      }) : (A(), B(Y, { key: 1 }, [
+        _("div", {
           style: z({
             position: "absolute",
-            left: g(e).plotLeft + "px",
-            right: (g(e).yAxisPosition === "left" ? 0 : g(e).yAxisWidth) + "px",
-            top: V.value + "px",
+            left: M(e).plotLeft + "px",
+            right: M(e).getAxisColumnWidth("right") + "px",
+            top: h.value + "px",
             height: "0",
-            borderTop: "1px dashed " + L.value,
-            opacity: h.value * 0.5,
+            borderTop: "1px dashed " + V.value,
+            opacity: b.value * 0.5,
             pointerEvents: "none",
             zIndex: 2
           })
         }, null, 4),
-        T("div", {
+        _("div", {
           style: z({
             position: "absolute",
-            [g(e).yAxisPosition]: "4px",
-            top: V.value + "px",
+            [U.value]: "4px",
+            top: h.value + "px",
             transform: "translateY(-50%)",
-            opacity: h.value,
+            opacity: b.value,
             pointerEvents: "auto",
             zIndex: 3,
-            background: L.value,
-            color: r.value.yLabel.textColor,
-            fontSize: r.value.yLabel.fontSize + "px",
-            fontFamily: r.value.typography.fontFamily,
+            background: V.value,
+            color: v.value.yLabel.textColor,
+            fontSize: v.value.yLabel.fontSize + "px",
+            fontFamily: v.value.typography.fontFamily,
             padding: "3px 8px",
             borderRadius: "3px",
             whiteSpace: "nowrap",
             transition: "background-color 0.3s ease"
           })
         }, [
-          J(ne, {
+          Q(oe, {
             value: P.value,
-            format: F.value,
+            format: k.value,
             "spin-duration": 350
           }, null, 8, ["value", "format"])
         ], 4)
       ], 64))
-    ], 64)) : K("", !0);
+    ], 64)) : X("", !0);
   }
 });
 export {
-  ie as default
+  ce as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wick-charts/vue",
-  "version": "0.6.3",
+  "version": "0.7.0",
   "description": "High-performance canvas timeseries charts for Vue — candlestick, line, bar, pie. Tree-shakeable, zero runtime deps.",
   "license": "MIT",
   "repository": {
@@ -45,7 +45,7 @@
     "vue": ">=3.3.0"
   },
   "devDependencies": {
-    "@wick-charts/core": "^0.6.3"
+    "@wick-charts/core": "^0.7.0"
   },
   "scripts": {
     "build": "vite build"

package/src/BandSeries.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import type { BandData, BandSeriesOptions, SeriesSyncState } from '@wick-charts/core';
+import { BandSeriesDef, EMPTY_SYNC_STATE, syncLayers, toLayers } from '@wick-charts/core';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+
+import { useChartInstance } from './context';
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Band data — one band per layer. A single band passes a flat
+     * `{ time, low, high }[]`; several bands pass `BandPoint[][]`. To name/color
+     * a band, pass `{ label, color?, data }` (or an array of them). Time accepts
+     * ms or `Date`. On a numeric or category X axis (`axis.x.type`) samples
+     * carry `x` in place of `time`: `{ x: 'EU', low, high }`.
+     */
+    data: BandData;
+    /** Visual options override — fill, edge stroke, curve, entrance / intro / smoothing. */
+    options?: Partial<BandSeriesOptions>;
+    /** Stable series ID — same value across remounts. */
+    id?: string;
+    /** Show/hide the series without unmounting it — excludes it from the Y-range fit and tooltip/legend. Default `true`. Live. */
+    visible?: boolean;
+    /** Named Y scale from the container's `scales` — autoscales on its own, sharing the time axis. Default: the default scale. Live. */
+    scale?: string;
+  }>(),
+  // Vue's type-based `defineProps` casts an absent Boolean-typed prop to
+  // `false` (not `undefined`) without an explicit default — see the
+  // `interactive` fix in ChartContainer.vue for the full explanation.
+  { visible: true },
+);
+
+const chart = useChartInstance();
+const seriesId = ref<string | null>(null);
+// Per-layer sync state — drives the shared append/keepLast/update/replace
+// reconciliation (plus per-layer labels/colors) so streaming eases instead of
+// snapping Y every tick.
+let prevSync: SeriesSyncState[] = [];
+
+function applyData(id: string, data: BandData): void {
+  prevSync = syncLayers({ chart, id, data, prev: prevSync });
+}
+
+onMounted(() => {
+  const layerCount = toLayers(props.data).length;
+  const id = chart.addSeries(BandSeriesDef, {
+    ...props.options,
+    scale: props.scale,
+    layers: layerCount,
+    id: props.id,
+  });
+  seriesId.value = id;
+  prevSync = new Array(layerCount).fill(EMPTY_SYNC_STATE);
+  // Lazy watcher — apply initial data here so static-data mounts render without a no-op first frame.
+  applyData(id, props.data);
+  chart.setSeriesVisible(id, props.visible);
+});
+
+onUnmounted(() => {
+  if (seriesId.value) chart.removeSeries(seriesId.value);
+});
+
+watch(
+  () => props.data,
+  (data) => {
+    const id = seriesId.value;
+    if (!id) return;
+
+    applyData(id, data);
+  },
+);
+
+// `scale` rides the same update, so a stacking change is checked against the new scale.
+watch(
+  () => [props.options, props.scale] as const,
+  ([options, scale]) => {
+    if (!seriesId.value) return;
+
+    chart.updateSeriesOptions(seriesId.value, options ? { ...options, scale } : { scale });
+  },
+  { deep: true },
+);
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (seriesId.value) chart.setSeriesVisible(seriesId.value, visible);
+  },
+);
+</script>
+
+<template><span v-if="false" /></template>

package/src/BarSeries.vue

@@ -7,13 +7,18 @@ import { useChartInstance } from './context';
 
 const props = withDefaults(
   defineProps<{
-    /** Flat `TimePoint[]`, `TimePoint[][]`, or named `{ label, color?, data }` layers. Time accepts ms or `Date`. */
+    /**
+     * Flat `TimePoint[]`, `TimePoint[][]`, or named `{ label, color?, data }` layers. Time accepts ms or `Date`.
+     * On a numeric or category X axis (`axis.x.type`) points carry `x` in place of `time`.
+     */
     data: MultiLayerData;
     options?: Partial<BarSeriesOptions>;
     /** Stable series ID — same value across remounts. */
     id?: string;
     /** Show/hide the series without unmounting it — excludes it from the Y-range fit and tooltip/legend. Default `true`. Live. */
     visible?: boolean;
+    /** Named Y scale from the container's `scales` — autoscales on its own, sharing the time axis. Default: the default scale. Live. */
+    scale?: string;
   }>(),
   // Vue's type-based `defineProps` casts an absent Boolean-typed prop to
   // `false` (not `undefined`) without an explicit default — see the
@@ -36,6 +41,7 @@ onMounted(() => {
   const layerCount = toLayers(props.data).length;
   const id = chart.addSeries(BarSeriesDef, {
     ...props.options,
+    scale: props.scale,
     layers: layerCount,
     id: props.id,
   });
@@ -60,12 +66,13 @@ watch(
   },
 );
 
+// `scale` rides the same update, so a stacking change is checked against the new scale.
 watch(
-  () => props.options,
-  (options) => {
-    if (seriesId.value && options) {
-      chart.updateSeriesOptions(seriesId.value, options);
-    }
+  () => [props.options, props.scale] as const,
+  ([options, scale]) => {
+    if (!seriesId.value) return;
+
+    chart.updateSeriesOptions(seriesId.value, options ? { ...options, scale } : { scale });
   },
   { deep: true },
 );

package/src/CandlestickSeries.vue

@@ -14,6 +14,8 @@ const props = withDefaults(
     id?: string;
     /** Show/hide the series without unmounting it — excludes it from the Y-range fit and tooltip/legend. Default `true`. Live. */
     visible?: boolean;
+    /** Named Y scale from the container's `scales` — autoscales on its own, sharing the time axis. Default: the default scale. Live. */
+    scale?: string;
   }>(),
   // Vue's type-based `defineProps` casts an absent Boolean-typed prop to
   // `false` (not `undefined`) without an explicit default — see the
@@ -37,6 +39,7 @@ function applyData(id: string, data: CandlestickData): void {
 onMounted(() => {
   const id = chart.addSeries(CandlestickSeriesDef, {
     ...props.options,
+    scale: props.scale,
     id: props.id,
     label: toLayers<OHLCInput>(props.data)[0].label,
   });
@@ -62,12 +65,13 @@ watch(
   },
 );
 
+// `scale` rides the same update, so a stacking change is checked against the new scale.
 watch(
-  () => props.options,
-  (options) => {
-    if (seriesId.value && options) {
-      chart.updateSeriesOptions(seriesId.value, options);
-    }
+  () => [props.options, props.scale] as const,
+  ([options, scale]) => {
+    if (!seriesId.value) return;
+
+    chart.updateSeriesOptions(seriesId.value, options ? { ...options, scale } : { scale });
   },
   { deep: true },
 );

package/src/ChartContainer.vue

@@ -12,6 +12,7 @@ import {
   type SeriesHoverInfo,
   type VisibleRange,
   type VisibleRangeSpec,
+  type YAxisConfig,
   catppuccin,
   deepEqual,
 } from '@wick-charts/core';
@@ -35,6 +36,14 @@ const props = withDefaults(
     theme?: ChartTheme;
     /** Grouped axis configuration (Y/X visibility, bounds, sizing). Live. */
     axis?: AxisConfig;
+    /**
+     * Named secondary Y scales, keyed by id — a series opts in with its `scale`
+     * prop and autoscales on its own, sharing the time axis. Same fields as
+     * `axis.y`; `position` defaults to the side opposite the default axis. One
+     * axis column fits on each side — render it with `<YAxis scale="id" />`.
+     * Live.
+     */
+    scales?: Record<string, YAxisConfig>;
     /**
      * Viewport padding. `top`/`bottom` are in pixels. `left`/`right` accept either pixels (`50`)
      * or data intervals (`{ intervals: 3 }`). Set to 0 for edge-to-edge sparklines. Updates are
@@ -379,6 +388,7 @@ onMounted(async () => {
 
   const options: ChartOptions = {};
   if (props.axis) options.axis = props.axis;
+  if (props.scales) options.scales = props.scales;
   if (props.theme) options.theme = props.theme;
   if (props.padding) options.padding = props.padding;
   if (props.viewport) options.viewport = props.viewport;
@@ -432,6 +442,15 @@ watch(
   { deep: true },
 );
 
+// The core skips a deep-equal replay, so a fresh inline literal doesn't refit.
+watch(
+  () => props.scales,
+  (newScales) => {
+    chart.value?.setScales(newScales);
+  },
+  { deep: true },
+);
+
 watch(
   () => props.grid?.visible,
   () => {
@@ -464,6 +483,7 @@ watch(
     await nextTick();
     const opts: ChartOptions = {};
     if (props.axis) opts.axis = props.axis;
+    if (props.scales) opts.scales = props.scales;
     if (props.theme) opts.theme = props.theme;
     if (props.padding) opts.padding = props.padding;
     if (props.viewport) opts.viewport = props.viewport;

package/src/LineSeries.vue

@@ -7,13 +7,18 @@ import { useChartInstance } from './context';
 
 const props = withDefaults(
   defineProps<{
-    /** Flat `TimePoint[]`, `TimePoint[][]`, or named `{ label, color?, data }` layers. Time accepts ms or `Date`. */
+    /**
+     * Flat `TimePoint[]`, `TimePoint[][]`, or named `{ label, color?, data }` layers. Time accepts ms or `Date`.
+     * On a numeric or category X axis (`axis.x.type`) points carry `x` in place of `time`.
+     */
     data: MultiLayerData;
     options?: Partial<LineSeriesOptions>;
     /** Stable series ID — same value across remounts. */
     id?: string;
     /** Show/hide the series without unmounting it — excludes it from the Y-range fit and tooltip/legend. Default `true`. Live. */
     visible?: boolean;
+    /** Named Y scale from the container's `scales` — autoscales on its own, sharing the time axis. Default: the default scale. Live. */
+    scale?: string;
   }>(),
   // Vue's type-based `defineProps` casts an absent Boolean-typed prop to
   // `false` (not `undefined`) without an explicit default — see the
@@ -36,6 +41,7 @@ onMounted(() => {
   const layerCount = toLayers(props.data).length;
   const id = chart.addSeries(LineSeriesDef, {
     ...props.options,
+    scale: props.scale,
     layers: layerCount,
     id: props.id,
   });
@@ -60,12 +66,13 @@ watch(
   },
 );
 
+// `scale` rides the same update, so a stacking change is checked against the new scale.
 watch(
-  () => props.options,
-  (options) => {
-    if (seriesId.value && options) {
-      chart.updateSeriesOptions(seriesId.value, options);
-    }
+  () => [props.options, props.scale] as const,
+  ([options, scale]) => {
+    if (!seriesId.value) return;
+
+    chart.updateSeriesOptions(seriesId.value, options ? { ...options, scale } : { scale });
   },
   { deep: true },
 );

package/src/composables.ts

@@ -25,10 +25,24 @@ export interface AxisLayout {
   yAxisPosition: YAxisPosition;
   yAxisWidth: number;
   xAxisHeight: number;
+  /** Width of the Y-axis column on each side — the default axis's or a named scale's, `0` for none. */
+  leftAxisWidth: number;
+  rightAxisWidth: number;
+  /** Named scale owning each side's column, `null` for the default axis or none — a swap moves the columns. */
+  leftAxisScale: string | null;
+  rightAxisScale: string | null;
 }
 
 function readAxisLayout(chart: ChartInstance): AxisLayout {
-  return { yAxisPosition: chart.yAxisPosition, yAxisWidth: chart.yAxisWidth, xAxisHeight: chart.xAxisHeight };
+  return {
+    yAxisPosition: chart.yAxisPosition,
+    yAxisWidth: chart.yAxisWidth,
+    xAxisHeight: chart.xAxisHeight,
+    leftAxisWidth: chart.getAxisColumnWidth('left'),
+    rightAxisWidth: chart.getAxisColumnWidth('right'),
+    leftAxisScale: chart.getAxisColumnScale('left'),
+    rightAxisScale: chart.getAxisColumnScale('right'),
+  };
 }
 
 /** The axis gutters overlays anchor to — refreshed on a Y-axis side or gutter size change. */
@@ -40,7 +54,11 @@ export function useAxisLayout(chart: ChartInstance): Ref<AxisLayout> {
     const unchanged =
       prev.yAxisPosition === next.yAxisPosition &&
       prev.yAxisWidth === next.yAxisWidth &&
-      prev.xAxisHeight === next.xAxisHeight;
+      prev.xAxisHeight === next.xAxisHeight &&
+      prev.leftAxisWidth === next.leftAxisWidth &&
+      prev.rightAxisWidth === next.rightAxisWidth &&
+      prev.leftAxisScale === next.leftAxisScale &&
+      prev.rightAxisScale === next.rightAxisScale;
     if (unchanged) return;
 
     layout.value = next;
@@ -57,15 +75,16 @@ export function useAxisLayout(chart: ChartInstance): Ref<AxisLayout> {
 
 export function useLastYValue(chart: ChartInstance, seriesId: string): Ref<{ value: number; isLive: boolean } | null> {
   let snapshot = chart.getLastValue(seriesId);
+  const yScale = () => chart.getYScale(chart.getSeriesScale(seriesId));
   // Track the pixel Y the snapshot maps to so a pan/zoom/resize that leaves the
   // value unchanged but shifts the badge still re-emits — a consumer-positioned
   // badge reads `yScale.valueToY` off this ref. Comparing prev/next against the
   // live yScale alone would always be equal.
-  let lastY = snapshot ? chart.yScale.valueToY(snapshot.value) : null;
+  let lastY = snapshot ? yScale().valueToY(snapshot.value) : null;
   const val = ref<{ value: number; isLive: boolean } | null>(snapshot);
   const handler = () => {
     const next = chart.getLastValue(seriesId);
-    const nextY = next ? chart.yScale.valueToY(next.value) : null;
+    const nextY = next ? yScale().valueToY(next.value) : null;
     if (snapshot?.value === next?.value && snapshot?.isLive === next?.isLive && lastY === nextY) return;
 
     snapshot = next;

package/src/index.ts

@@ -13,6 +13,12 @@ export type {
   AnimationsConfig,
   AxisBound,
   AxisConfig,
+  BandData,
+  BandEntryAnimation,
+  BandPoint,
+  BandPointInput,
+  BandSampleInput,
+  BandSeriesOptions,
   BarElementTransform,
   BarEntryAnimation,
   BarIntroDirectives,
@@ -51,6 +57,7 @@ export type {
   HeatmapSeriesOptions,
   HeatmapSeriesRenderer,
   HoverInfo,
+  LayerSnapshot,
   LegendItem,
   LineIntroDirectives,
   LineIntroFn,
@@ -58,6 +65,7 @@ export type {
   LineIntroValueArgs,
   LinePaintArgs,
   LinePainter,
+  LinePointInput,
   LineSeriesOptions,
   LoadingIndicatorArgs,
   LoadingIndicatorFn,
@@ -129,6 +137,11 @@ export type {
   WaveIntroFrame,
   WaveIntroTransform,
   XAxisConfig,
+  XAxisFormatter,
+  XAxisPadding,
+  XAxisType,
+  XBandPointInput,
+  XPointInput,
   YAxisConfig,
   YAxisPosition,
   YRange,
@@ -136,6 +149,7 @@ export type {
 } from '@wick-charts/core';
 // Painters — custom per-element drawing for bar / candle / line series.
 export {
+  BandSeriesDef,
   BarSeriesDef,
   CandlestickSeriesDef,
   ChartInstance,
@@ -219,6 +233,7 @@ export {
   wipeIntro,
 } from '@wick-charts/core';
 
+export { default as BandSeries } from './BandSeries.vue';
 export { default as BarSeries } from './BarSeries.vue';
 export { default as CandlestickSeries } from './CandlestickSeries.vue';
 // Vue components
@@ -239,10 +254,10 @@ export { default as NumberFlow } from './ui/NumberFlow.vue';
 export { default as PieLegend } from './ui/PieLegend.vue';
 export { default as PieTooltip } from './ui/PieTooltip.vue';
 export { default as ReferenceLine } from './ui/ReferenceLine.vue';
-export { default as TimeAxis, default as XAxis } from './ui/TimeAxis.vue';
 export { default as TimeRegion } from './ui/TimeRegion.vue';
 export { default as Title } from './ui/Title.vue';
 // UI overlays
 export { default as Tooltip } from './ui/Tooltip.vue';
+export { default as TimeAxis, default as XAxis } from './ui/XAxis.vue';
 export { default as YAxis } from './ui/YAxis.vue';
 export { default as YLabel } from './ui/YLabel.vue';