@wick-charts/vue 0.6.4 → 0.7.0

package/dist/ui/YLabel.vue.js

@@ -1,95 +1,99 @@
-import { defineComponent as $, useSlots as j, computed as a, ref as I, onMounted as G, onUnmounted as O, openBlock as w, createElementBlock as A, Fragment as B, renderSlot as W, createElementVNode as _, normalizeStyle as Y, unref as g, createVNode as H, createCommentVNode as J } from "vue";
-import { prefersReducedMotion as K } from "../core/dist/animation/reduced-motion.js";
-import { resolveAnimate as Q, resolveYLabelSeriesId as X, firstVisibleValue as Z, BadgeAnimator as ee } from "../core/dist/chart/badge-animator.js";
-import { useChartInstance as te } from "../context.js";
-import ae from "./NumberFlow.vue.js";
-const ie = /* @__PURE__ */ $({
+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(z) {
-    const c = z, e = te(), M = j(), E = a(() => typeof M.default == "function"), i = I(0), o = I(null);
-    let p = null, y = null, u = null;
-    const N = a(() => Q(c.animate));
-    function L() {
-      u = null;
-      const t = s.value, n = t !== null ? e.getStackedLastValue(t) : null;
-      if (t === null || !n) {
-        p = null, y = null;
+  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() {
+      s = null;
+      const a = o.value, u = a !== null ? e.getStackedLastValue(a) : null;
+      if (a === null || !u) {
+        m = null, g = null;
         return;
       }
-      const m = n.value;
-      (p === null || y !== t) && (p = new ee(m), y = t);
-      const { glide: P, countUp: U, settleMs: q } = N.value, S = e.getIntroFront(t), v = p.frame({
-        target: m,
+      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: S < 1 ? Z(e, t, m) : m,
-        introFront: S,
+        firstVisible: I < 1 ? ae(e, a, f) : f,
+        introFront: I,
         now: performance.now(),
-        glide: P,
-        countUp: U,
-        settleMs: q,
-        reducedMotion: K()
-      }), d = o.value;
-      (d === null || d.positionValue !== v.positionValue || d.textValue !== v.textValue || d.opacity !== v.opacity) && (o.value = { positionValue: v.positionValue, textValue: v.textValue, opacity: v.opacity }), v.animating && u === null && (u = requestAnimationFrame(L));
+        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 R() {
-      u === null && (u = requestAnimationFrame(L));
+    function D() {
+      s === null && (s = requestAnimationFrame(S));
     }
-    const f = () => {
-      i.value++, R();
+    const p = () => {
+      l.value++, D();
     };
-    G(() => {
-      e.setYLabel(!0), e.on("overlayChange", f), e.on("viewportChange", f), e.getSeriesIds().length > 0 && f();
-    }), O(() => {
-      e.setYLabel(!1), e.off("overlayChange", f), e.off("viewportChange", f), u !== null && cancelAnimationFrame(u), u = null;
+    H(() => {
+      e.setYLabel(!0), e.on("overlayChange", p), e.on("viewportChange", p), e.getSeriesIds().length > 0 && p();
+    }), J(() => {
+      e.setYLabel(!1), e.off("overlayChange", p), e.off("viewportChange", p), s !== null && cancelAnimationFrame(s), s = null;
     });
-    const s = a(() => (i.value, X(e, c.seriesId))), l = a(() => (i.value, s.value !== null ? e.getStackedLastValue(s.value) : null)), x = a(() => (i.value, s.value !== null ? e.getPreviousClose(s.value) : null)), r = a(() => (i.value, e.getTheme())), T = a(() => o.value !== null ? o.value.positionValue : l.value?.value ?? 0), D = a(() => o.value !== null ? o.value.textValue : l.value?.value ?? 0), b = a(() => o.value !== null ? o.value.opacity : s.value === null ? 1 : e.getIntroFront(s.value) < 1 ? 0 : 1), h = a(() => (i.value, l.value === null ? 0 : e.yScale.valueToY(T.value))), k = a(() => l.value === null || x.value === null ? "neutral" : l.value.value > x.value ? "up" : l.value.value < x.value ? "down" : "neutral"), V = a(() => {
-      if (l.value === null) return r.value.yLabel.neutralBackground;
-      if (!l.value.isLive) return r.value.axis.textColor;
-      if (c.color) return c.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 = a(() => {
-      i.value;
-      const t = e.yScale.getRange(), n = t.max - t.min;
-      return n < 0.1 ? 6 : n < 10 ? 4 : n < 1e3 ? 2 : 0;
-    }), F = a(() => {
-      if (c.format) return c.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 (n) => t.format(n);
+      return (f) => u.format(f);
     });
-    return (t, n) => l.value !== null ? (w(), A(B, { key: 0 }, [
-      E.value ? W(t.$slots, "default", {
+    return (a, u) => n.value !== null ? (A(), B(Y, { key: 0 }, [
+      R.value ? K(a.$slots, "default", {
         key: 0,
-        value: l.value.value,
+        value: n.value.value,
         y: h.value,
         bgColor: V.value,
-        isLive: l.value.isLive,
-        direction: k.value,
-        format: F.value,
+        isLive: n.value.isLive,
+        direction: F.value,
+        format: k.value,
         opacity: b.value
-      }) : (w(), A(B, { key: 1 }, [
+      }) : (A(), B(Y, { key: 1 }, [
         _("div", {
-          style: Y({
+          style: z({
             position: "absolute",
-            left: g(e).plotLeft + "px",
-            right: (g(e).yAxisPosition === "left" ? 0 : g(e).yAxisWidth) + "px",
+            left: M(e).plotLeft + "px",
+            right: M(e).getAxisColumnWidth("right") + "px",
             top: h.value + "px",
             height: "0",
             borderTop: "1px dashed " + V.value,
@@ -99,34 +103,34 @@ const ie = /* @__PURE__ */ $({
           })
         }, null, 4),
         _("div", {
-          style: Y({
+          style: z({
             position: "absolute",
-            [g(e).yAxisPosition]: "4px",
+            [U.value]: "4px",
             top: h.value + "px",
             transform: "translateY(-50%)",
             opacity: b.value,
             pointerEvents: "auto",
             zIndex: 3,
             background: V.value,
-            color: r.value.yLabel.textColor,
-            fontSize: r.value.yLabel.fontSize + "px",
-            fontFamily: r.value.typography.fontFamily,
+            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"
           })
         }, [
-          H(ae, {
-            value: D.value,
-            format: F.value,
+          Q(oe, {
+            value: P.value,
+            format: k.value,
             "spin-duration": 350
           }, null, 8, ["value", "format"])
         ], 4)
       ], 64))
-    ], 64)) : J("", !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.4",
+  "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.4"
+    "@wick-charts/core": "^0.7.0"
   },
   "scripts": {
     "build": "vite build"

package/src/BandSeries.vue

@@ -11,7 +11,8 @@ const props = withDefaults(
      * 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`.
+     * 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. */
@@ -20,6 +21,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
@@ -42,6 +45,7 @@ onMounted(() => {
   const layerCount = toLayers(props.data).length;
   const id = chart.addSeries(BandSeriesDef, {
     ...props.options,
+    scale: props.scale,
     layers: layerCount,
     id: props.id,
   });
@@ -66,12 +70,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/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

@@ -17,6 +17,7 @@ export type {
   BandEntryAnimation,
   BandPoint,
   BandPointInput,
+  BandSampleInput,
   BandSeriesOptions,
   BarElementTransform,
   BarEntryAnimation,
@@ -64,6 +65,7 @@ export type {
   LineIntroValueArgs,
   LinePaintArgs,
   LinePainter,
+  LinePointInput,
   LineSeriesOptions,
   LoadingIndicatorArgs,
   LoadingIndicatorFn,
@@ -135,6 +137,11 @@ export type {
   WaveIntroFrame,
   WaveIntroTransform,
   XAxisConfig,
+  XAxisFormatter,
+  XAxisPadding,
+  XAxisType,
+  XBandPointInput,
+  XPointInput,
   YAxisConfig,
   YAxisPosition,
   YRange,
@@ -247,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';

package/src/ui/Crosshair.vue

@@ -35,6 +35,32 @@ const tickInterval = computed(() => {
   return chart.timeScale.niceTickValues(dataInterval.value).tickInterval || dataInterval.value;
 });
 
+// One value label per named scale's axis column, each read through its own scale.
+// `bump` re-labels a still crosshair after a formatter or scale change.
+const defaultLabel = computed(() => {
+  void bump.value;
+  const pos = position.value;
+
+  return pos === null ? '' : chart.yScale.formatY(pos.y);
+});
+
+const scaleLabels = computed(() => {
+  void bump.value;
+  const pos = position.value;
+  if (pos === null) return [];
+
+  return chart.getYScaleIds().flatMap((scale) => {
+    const column = chart.getYScaleColumn(scale);
+    if (column === null) return [];
+
+    const yScale = chart.getYScale(scale);
+
+    return [{ scale, position: column.position, text: yScale.formatY(yScale.yToValue(pos.mediaY)) }];
+  });
+});
+// A named scale can own the default axis's side when the default axis is hidden.
+const defaultSideTaken = computed(() => scaleLabels.value.some((label) => label.position === chart.yAxisPosition));
+
 const labelStyle = computed(() => ({
   // Blend the theme's labelBackground at 80% opacity so the axis grid
   // shows through — keeps the badge from looking like an opaque block
@@ -58,6 +84,7 @@ const labelStyle = computed(() => ({
   <template v-if="position">
     <!-- Y label on the value axis -->
     <div
+      v-if="!defaultSideTaken"
       :style="{
         position: 'absolute',
         [chart.yAxisPosition]: '0',
@@ -66,7 +93,20 @@ const labelStyle = computed(() => ({
         ...labelStyle,
       }"
     >
-      {{ chart.yScale.formatY(position.y) }}
+      {{ defaultLabel }}
+    </div>
+    <div
+      v-for="label in scaleLabels"
+      :key="label.scale"
+      :style="{
+        position: 'absolute',
+        [label.position]: '0',
+        top: position.mediaY + 'px',
+        transform: 'translateY(-50%)',
+        ...labelStyle,
+      }"
+    >
+      {{ label.text }}
     </div>
     <!-- Time label on bottom axis -->
     <div

package/src/ui/InfoBar.vue

@@ -9,6 +9,7 @@ import {
   buildHoverSnapshots,
   buildLastSnapshots,
   formatCompact,
+  formatHeaderX,
   formatPriceAdaptive,
   resolveCandlestickBodyColor,
 } from '@wick-charts/core';
@@ -144,7 +145,7 @@ function isBand(data: SeriesSnapshot['data']): data is BandPoint {
       <slot v-if="hasCustomSlot" :snapshots="snapshots" :time="displayTime" :is-hover="isHover" />
       <template v-else>
         <span :style="{ color: theme.axis.textColor, marginRight: '2px' }">
-          {{ chart.timeScale.formatX(displayTime, dataInterval) }}
+          {{ formatHeaderX(chart, { time: displayTime, snapshots, interval: dataInterval }) }}
         </span>
         <template v-for="s in snapshots" :key="s.id">
           <span v-if="isOHLC(s.data)" :style="{ display: 'inline-flex', alignItems: 'center', gap: '4px' }">