@wick-charts/vue 0.6.3 → 0.7.0

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {
+  type BandPoint,
   type OHLCData,
   type SeriesSnapshot,
   type SnapshotSort,
@@ -8,6 +9,7 @@ import {
   buildHoverSnapshots,
   buildLastSnapshots,
   formatCompact,
+  formatHeaderX,
   formatPriceAdaptive,
   resolveCandlestickBodyColor,
 } from '@wick-charts/core';
@@ -98,9 +100,13 @@ const displayTime = computed(() => {
 const slots = useSlots();
 const hasCustomSlot = computed(() => typeof slots.default === 'function');
 
-function isOHLC(data: OHLCData | TimePoint): data is OHLCData {
+function isOHLC(data: SeriesSnapshot['data']): data is OHLCData {
   return 'open' in data;
 }
+
+function isBand(data: SeriesSnapshot['data']): data is BandPoint {
+  return 'high' in data && !isOHLC(data);
+}
 </script>
 
 <template>
@@ -139,7 +145,7 @@ function isOHLC(data: OHLCData | TimePoint): data is OHLCData {
       <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' }">
@@ -174,6 +180,20 @@ function isOHLC(data: OHLCData | TimePoint): data is OHLCData {
               </span>
             </template>
           </span>
+          <span v-else-if="isBand(s.data)" :style="{ display: 'inline-flex', alignItems: 'center', gap: '3px' }">
+            <span
+              :style="{
+                width: '6px',
+                height: '6px',
+                borderRadius: '1px',
+                background: s.color,
+                flexShrink: 0,
+              }"
+            />
+            <span :style="{ color: s.color, fontWeight: 500 }">
+              {{ effectiveFormat((s.data as BandPoint).low, 'low') }} – {{ effectiveFormat((s.data as BandPoint).high, 'high') }}
+            </span>
+          </span>
           <span v-else :style="{ display: 'inline-flex', alignItems: 'center', gap: '3px' }">
             <span
               :style="{

package/src/ui/Marker.vue

@@ -19,6 +19,8 @@ const props = defineProps<{
   label?: string;
   /** Color override. Falls back to the series color (when `seriesId` is set), then the theme line color. */
   color?: string;
+  /** Named Y scale (`ChartContainer` `scales`) the `value` maps through. Default: the `seriesId` series' scale, else the default scale. */
+  scale?: string;
 }>();
 
 const chart = useChartInstance();
@@ -33,6 +35,7 @@ onMounted(() => {
     pulse: props.pulse,
     label: props.label,
     color: props.color,
+    scale: props.scale,
   });
 });
 
@@ -42,7 +45,7 @@ onUnmounted(() => {
 });
 
 watch(
-  () => [props.time, props.value, props.seriesId, props.shape, props.pulse, props.label, props.color],
+  () => [props.time, props.value, props.seriesId, props.shape, props.pulse, props.label, props.color, props.scale],
   () => {
     if (markerId === null) return;
 
@@ -54,6 +57,7 @@ watch(
       pulse: props.pulse,
       label: props.label,
       color: props.color,
+      scale: props.scale,
     });
   },
 );

package/src/ui/Navigator.vue

@@ -25,6 +25,7 @@ const stripRef = ref<HTMLDivElement | null>(null);
 const controller = shallowRef<NavigatorController | null>(null);
 
 const resolvedHeight = computed(() => props.height ?? themeRef.value.navigator.height);
+const timeAxis = computed(() => chartRef.value?.checkTimeOnlyFeature('Navigator') ?? false);
 
 // Mount the controller once the strip div exists and the chart is available.
 // Watch both — either may arrive after the other across Teleport boundaries.
@@ -63,7 +64,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <Teleport v-if="anchor" :to="anchor">
+  <Teleport v-if="anchor && timeAxis" :to="anchor">
     <div
       ref="stripRef"
       data-chart-navigator=""

package/src/ui/ReferenceLine.vue

@@ -17,6 +17,8 @@ const props = defineProps<{
   style?: ReferenceLineStyle;
   /** Stroke width in CSS pixels. Default: `1`. */
   width?: number;
+  /** Named Y scale (`ChartContainer` `scales`) the `value` maps through. Default: the default scale. */
+  scale?: string;
 }>();
 
 const chart = useChartInstance();
@@ -30,6 +32,7 @@ onMounted(() => {
     label: props.label,
     style: props.style,
     width: props.width,
+    scale: props.scale,
   });
 });
 
@@ -39,7 +42,7 @@ onUnmounted(() => {
 });
 
 watch(
-  () => [props.value, props.time, props.color, props.label, props.style, props.width],
+  () => [props.value, props.time, props.color, props.label, props.style, props.width, props.scale],
   () => {
     if (lineId === null) return;
 
@@ -50,6 +53,7 @@ watch(
       label: props.label,
       style: props.style,
       width: props.width,
+      scale: props.scale,
     });
   },
 );

package/src/ui/Tooltip.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {
+  type BandPoint,
   type OHLCData,
   type SeriesSnapshot,
   type SnapshotSort,
@@ -9,6 +10,7 @@ import {
   computeTooltipPosition,
   formatCompact,
   formatDate,
+  formatHeaderX,
   formatPriceAdaptive,
   resolveCandlestickBodyColor,
 } from '@wick-charts/core';
@@ -105,7 +107,7 @@ const floatingPos = computed<{ left: number; top: number } | null>(() => {
   if (!crosshair.value || snapshots.value.length === 0) return null;
   const mediaSize = chart.getMediaSize();
   const chartLeft = chart.plotLeft;
-  const chartWidth = mediaSize.width - chart.yAxisWidth;
+  const chartWidth = chart.getLayout().chartArea.width;
   const chartHeight = mediaSize.height - chart.xAxisHeight;
 
   if (hasCustomSlot.value) {
@@ -125,7 +127,9 @@ const floatingPos = computed<{ left: number; top: number } | null>(() => {
 
   const hasOHLC = snapshots.value.some((s) => 'open' in s.data);
   const lineCount = snapshots.value.filter((s) => !('open' in s.data)).length;
-  const tooltipWidth = 160;
+  // A band row carries two numbers, so it needs a wider box than a line row.
+  const hasBand = snapshots.value.some((s) => 'high' in s.data && !('open' in s.data));
+  const tooltipWidth = hasBand ? 220 : 160;
   const tooltipHeight = hasOHLC ? 140 : 40 + lineCount * 22;
 
   return computeTooltipPosition({
@@ -141,9 +145,13 @@ const floatingPos = computed<{ left: number; top: number } | null>(() => {
 
 const measured = computed(() => !hasCustomSlot.value || measuredSize.value !== null);
 
-function isOHLC(data: OHLCData | TimePoint): data is OHLCData {
+function isOHLC(data: SeriesSnapshot['data']): data is OHLCData {
   return 'open' in data;
 }
+
+function isBand(data: SeriesSnapshot['data']): data is BandPoint {
+  return 'high' in data && !isOHLC(data);
+}
 </script>
 
 <template>
@@ -180,8 +188,10 @@ function isOHLC(data: OHLCData | TimePoint): data is OHLCData {
         letterSpacing: '0.02em',
       }"
     >
-      {{ formatDate(displayTime, { locale: chart.timeScale.getLocale(), timeZone: chart.timeScale.getTimeZone() }) }}
-      {{ chart.timeScale.formatX(displayTime, dataInterval) }}
+      <template v-if="chart.timeScale.getType() === 'time'">
+        {{ formatDate(displayTime, { locale: chart.timeScale.getLocale(), timeZone: chart.timeScale.getTimeZone() }) }}
+      </template>
+      {{ formatHeaderX(chart, { time: displayTime, snapshots, interval: dataInterval }) }}
     </div>
 
     <template v-for="s in snapshots" :key="s.id">
@@ -215,6 +225,33 @@ function isOHLC(data: OHLCData | TimePoint): data is OHLCData {
           </span>
         </template>
       </div>
+      <div
+        v-else-if="isBand(s.data)"
+        :style="{ display: 'flex', alignItems: 'center', gap: '8px', padding: '2px 0' }"
+      >
+        <span
+          :style="{
+            width: '8px',
+            height: '8px',
+            borderRadius: '2px',
+            background: s.color,
+            flexShrink: 0,
+          }"
+        />
+        <span
+          :style="{
+            opacity: 0.6,
+            flex: '1',
+            minWidth: 0,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }"
+        >{{ s.label ?? 'Range' }}</span>
+        <span :style="{ fontWeight: 600, color: s.color, whiteSpace: 'nowrap' }">
+          {{ effectiveFormat((s.data as BandPoint).low, 'low') }} – {{ effectiveFormat((s.data as BandPoint).high, 'high') }}
+        </span>
+      </div>
       <div v-else :style="{ display: 'flex', alignItems: 'center', gap: '8px', padding: '2px 0' }">
         <span
           :style="{
@@ -254,7 +291,7 @@ function isOHLC(data: OHLCData | TimePoint): data is OHLCData {
       fontVariantNumeric: 'tabular-nums',
       color: theme.tooltip.textColor,
       width: 'max-content',
-      maxWidth: (chart.getMediaSize().width - chart.yAxisWidth) + 'px',
+      maxWidth: chart.getLayout().chartArea.width + 'px',
       boxSizing: 'border-box',
       zIndex: 10,
       visibility: measuredSize !== null ? 'visible' : 'hidden',

package/src/ui/{TimeAxis.vue → XAxis.vue}

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { mountAxisLabels } from '@wick-charts/core';
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { type XAxisFormatter, mountAxisLabels } from '@wick-charts/core';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { useAxisLayout } from '../composables';
 import { useChartInstance } from '../context';
@@ -10,11 +10,16 @@ const props = defineProps<{
   labelCount?: number;
   /** Minimum pixel gap between adjacent labels (hard floor). Overrides chart-level. */
   minLabelSpacing?: number;
+  /**
+   * Custom label formatter. `x` is epoch ms on a time axis, the number on a
+   * numeric axis, the category name on a category axis; `step` is the tick
+   * spacing. Also formats the crosshair label and the tooltip / info-bar headers.
+   */
+  format?: XAxisFormatter;
 }>();
 
 const chart = useChartInstance();
 const layout = useAxisLayout(chart);
-const onLeft = computed(() => layout.value.yAxisPosition === 'left');
 const containerRef = ref<HTMLDivElement | null>(null);
 
 const applyDensity = () => {
@@ -25,8 +30,16 @@ const applyDensity = () => {
 };
 applyDensity();
 watch(() => [props.labelCount, props.minLabelSpacing], applyDensity);
+
+chart.setXAxisFormat(props.format ?? null);
+watch(
+  () => props.format,
+  (format) => chart.setXAxisFormat(format ?? null),
+);
+
 onUnmounted(() => {
   chart.setTimeAxisLabelDensity({ labelCount: null, minLabelSpacing: null });
+  chart.setXAxisFormat(null);
 });
 
 let cleanup: (() => void) | null = null;
@@ -45,9 +58,9 @@ onUnmounted(() => {
     ref="containerRef"
     :style="{
       position: 'absolute',
-      left: (onLeft ? layout.yAxisWidth : 0) + 'px',
+      left: layout.leftAxisWidth + 'px',
       bottom: '0',
-      right: (onLeft ? 0 : layout.yAxisWidth) + 'px',
+      right: layout.rightAxisWidth + 'px',
       height: layout.xAxisHeight + 'px',
       pointerEvents: 'none',
       display: 'flex',

package/src/ui/YAxis.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { type ValueFormatter, mountAxisLabels } from '@wick-charts/core';
-import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
-import { useAxisLayout } from '../composables';
+import { useAxisLayout, useYRange } from '../composables';
 import { useChartInstance } from '../context';
 
 const props = defineProps<{
@@ -15,34 +15,87 @@ const props = defineProps<{
   labelCount?: number;
   /** Minimum pixel gap between adjacent labels (hard floor). Overrides chart-level. */
   minLabelSpacing?: number;
+  /**
+   * Named Y scale (`ChartContainer` `scales`) this axis labels. Default: the
+   * default scale. An overlay scale has no column, so only `format` and the
+   * label density apply.
+   */
+  scale?: string;
 }>();
 
 const chart = useChartInstance();
 const layout = useAxisLayout(chart);
+// `setScales` emits `viewportChange`, which this ref follows.
+const yRange = useYRange(chart);
 const containerRef = ref<HTMLDivElement | null>(null);
 
+// An id `scales` doesn't define (yet) must not fall through to the default scale.
+const known = computed(() => {
+  void yRange.value;
+
+  return props.scale === undefined || chart.getYScaleIds().includes(props.scale);
+});
+const column = computed(() => {
+  const { yAxisPosition, yAxisWidth } = layout.value;
+  if (props.scale === undefined) return { position: yAxisPosition, width: yAxisWidth };
+
+  return known.value ? chart.getYScaleColumn(props.scale) : null;
+});
+
 // Route the formatter through yScale so Crosshair / YLabel fallback use
 // the same function as the axis labels.
-const syncFormat = () => chart.yScale.setFormat(props.format ?? null);
+// The scale whose formatter this axis set, so a scale switch and unmount clear that one.
+let formatApplied: { scale: string | undefined } | null = null;
+const clearFormat = () => {
+  if (formatApplied === null) return;
+
+  chart.setYAxisFormat({ format: null, scale: formatApplied.scale });
+  formatApplied = null;
+};
+const syncFormat = () => {
+  clearFormat();
+  if (!known.value) return;
+
+  chart.setYAxisFormat({ format: props.format ?? null, scale: props.scale });
+  formatApplied = { scale: props.scale };
+};
 onMounted(syncFormat);
-watch(() => props.format, syncFormat);
-onUnmounted(() => chart.yScale.setFormat(null));
+watch(() => [props.format, props.scale, known.value], syncFormat);
+onUnmounted(clearFormat);
+
+// The scale whose density this axis set, so a scale switch and unmount reset that one.
+let densityApplied: { scale: string | undefined } | null = null;
+const resetDensity = () => {
+  if (densityApplied === null) return;
 
+  chart.setYAxisLabelDensity({ labelCount: null, minLabelSpacing: null, scale: densityApplied.scale });
+  densityApplied = null;
+};
 const applyDensity = () => {
+  if (densityApplied !== null && densityApplied.scale !== props.scale) resetDensity();
+  if (!known.value) return;
+
   chart.setYAxisLabelDensity({
     labelCount: props.labelCount ?? null,
     minLabelSpacing: props.minLabelSpacing ?? null,
+    scale: props.scale,
   });
+  densityApplied = { scale: props.scale };
 };
 applyDensity();
-watch(() => [props.labelCount, props.minLabelSpacing], applyDensity);
-onUnmounted(() => chart.setYAxisLabelDensity({ labelCount: null, minLabelSpacing: null }));
+watch(() => [props.labelCount, props.minLabelSpacing, props.scale, known.value], applyDensity);
+onUnmounted(resetDensity);
 
 let cleanup: (() => void) | null = null;
-onMounted(() => {
+const mountLabels = () => {
+  cleanup?.();
+  cleanup = null;
   if (containerRef.value === null) return;
-  cleanup = mountAxisLabels({ chart, container: containerRef.value, axis: 'y' });
-});
+
+  cleanup = mountAxisLabels({ chart, container: containerRef.value, axis: 'y', scale: props.scale });
+};
+onMounted(mountLabels);
+watch([containerRef, () => props.scale], mountLabels, { flush: 'post' });
 onUnmounted(() => {
   cleanup?.();
   cleanup = null;
@@ -51,13 +104,14 @@ onUnmounted(() => {
 
 <template>
   <div
+    v-if="column"
     ref="containerRef"
     :style="{
       position: 'absolute',
-      [layout.yAxisPosition]: '0',
+      [column.position]: '0',
       top: '0',
       bottom: layout.xAxisHeight + 'px',
-      width: layout.yAxisWidth + 'px',
+      width: column.width + 'px',
       pointerEvents: 'none',
     }"
   />

package/src/ui/YLabel.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import {
   BadgeAnimator,
-  type ChartInstance,
   type ValueFormatter,
   type YLabelAnimate,
   firstVisibleValue,
   prefersReducedMotion,
   resolveAnimate,
+  resolveYLabelSeriesId,
 } from '@wick-charts/core';
 import { computed, onMounted, onUnmounted, ref, useSlots } from 'vue';
 
@@ -29,13 +29,19 @@ const props = defineProps<{
    */
   seriesId?: string;
   color?: string;
-  /** Custom formatter; routed through NumberFlow's `formatter` so the digit animation still plays. */
+  /** Custom formatter; routed through NumberFlow's `formatter` so the digit animation still plays. Default: the scale's `<YAxis format>`, else a range-adaptive number. */
   format?: ValueFormatter;
   /**
    * Badge motion. `true` (default) glides + counts up + fades in with the
    * intro; `false` snaps with no easing; an object tunes individual parts.
    */
   animate?: YLabelAnimate;
+  /**
+   * Named Y scale (`ChartContainer` `scales`) the value maps through. Default:
+   * the series' own scale. The badge sits on that scale's axis side — the
+   * default axis side for an overlay scale.
+   */
+  scale?: string;
 }>();
 
 defineSlots<{
@@ -145,21 +151,10 @@ onUnmounted(() => {
   rafId = null;
 });
 
-function resolveSeriesId(c: ChartInstance, explicit: string | undefined): string | null {
-  if (explicit !== undefined) return explicit;
-
-  const singleLayer = c.getSeriesIdsByType('time', { visibleOnly: true, singleLayerOnly: true });
-  if (singleLayer.length > 0) return singleLayer[0];
-
-  const anyTime = c.getSeriesIdsByType('time', { visibleOnly: true });
-
-  return anyTime.length > 0 ? anyTime[0] : null;
-}
-
 const resolvedId = computed<string | null>(() => {
   void bump.value;
 
-  return resolveSeriesId(chart, props.seriesId);
+  return resolveYLabelSeriesId(chart, props.seriesId);
 });
 
 const last = computed<{ value: number; isLive: boolean } | null>(() => {
@@ -180,6 +175,24 @@ const theme = computed(() => {
   return chart.getTheme();
 });
 
+const scaleId = computed<string | undefined>(() => {
+  void bump.value;
+  if (props.scale !== undefined) return props.scale;
+
+  return resolvedId.value !== null ? chart.getSeriesScale(resolvedId.value) : undefined;
+});
+const yScale = computed(() => {
+  void bump.value;
+
+  return chart.getYScale(scaleId.value);
+});
+// An overlay scale has no column; its badge sits on the default axis side.
+const side = computed(() => {
+  void bump.value;
+
+  return chart.getYScaleColumn(scaleId.value)?.position ?? chart.yAxisPosition;
+});
+
 // Position eases (the glide); the digit value steps discretely (once per real
 // point, not per frame) so the roll doesn't churn. Before the first rAF frame
 // lands, fall back to the settled value (hidden if an intro is still sweeping).
@@ -206,7 +219,7 @@ const y = computed(() => {
   void bump.value;
   if (last.value === null) return 0;
 
-  return chart.yScale.valueToY(positionValue.value);
+  return yScale.value.valueToY(positionValue.value);
 });
 
 // Direction / color track the settled last value (not the mid-glide display
@@ -236,7 +249,7 @@ const bgColor = computed<string>(() => {
 
 const fractionDigits = computed(() => {
   void bump.value;
-  const yRange = chart.yScale.getRange();
+  const yRange = yScale.value.getRange();
   const range = yRange.max - yRange.min;
   if (range < 0.1) return 6;
   if (range < 10) return 4;
@@ -247,6 +260,12 @@ const fractionDigits = computed(() => {
 
 const effectiveFormat = computed<ValueFormatter>(() => {
   if (props.format) return props.format;
+
+  // `<YAxis format>` puts its formatter on the scale; the badge follows it.
+  void bump.value;
+  const scaleFormat = yScale.value.getFormat();
+  if (scaleFormat) return scaleFormat;
+
   const nf = new Intl.NumberFormat('en-US', {
     minimumFractionDigits: fractionDigits.value,
     maximumFractionDigits: fractionDigits.value,
@@ -274,7 +293,7 @@ const effectiveFormat = computed<ValueFormatter>(() => {
         :style="{
           position: 'absolute',
           left: chart.plotLeft + 'px',
-          right: (chart.yAxisPosition === 'left' ? 0 : chart.yAxisWidth) + 'px',
+          right: chart.getAxisColumnWidth('right') + 'px',
           top: y + 'px',
           height: '0',
           borderTop: '1px dashed ' + bgColor,
@@ -286,7 +305,7 @@ const effectiveFormat = computed<ValueFormatter>(() => {
       <div
         :style="{
           position: 'absolute',
-          [chart.yAxisPosition]: '4px',
+          [side]: '4px',
           top: y + 'px',
           transform: 'translateY(-50%)',
           opacity: opacity,

package/dist/ui/TimeAxis.vue.js

@@ -1,44 +0,0 @@
-import { defineComponent as c, computed as p, ref as m, watch as f, onUnmounted as u, onMounted as x, openBlock as b, createElementBlock as y, normalizeStyle as h, unref as o } from "vue";
-import { mountAxisLabels as L } from "../core/dist/axis/dom-labels.js";
-import { useAxisLayout as d } from "../composables.js";
-import { useChartInstance as g } from "../context.js";
-const D = /* @__PURE__ */ c({
-  __name: "TimeAxis",
-  props: {
-    labelCount: {},
-    minLabelSpacing: {}
-  },
-  setup(r) {
-    const e = r, n = g(), t = d(n), a = p(() => t.value.yAxisPosition === "left"), l = m(null), s = () => {
-      n.setTimeAxisLabelDensity({
-        labelCount: e.labelCount ?? null,
-        minLabelSpacing: e.minLabelSpacing ?? null
-      });
-    };
-    s(), f(() => [e.labelCount, e.minLabelSpacing], s), u(() => {
-      n.setTimeAxisLabelDensity({ labelCount: null, minLabelSpacing: null });
-    });
-    let i = null;
-    return x(() => {
-      l.value !== null && (i = L({ chart: n, container: l.value, axis: "x" }));
-    }), u(() => {
-      i?.(), i = null;
-    }), (A, v) => (b(), y("div", {
-      ref_key: "containerRef",
-      ref: l,
-      style: h({
-        position: "absolute",
-        left: (a.value ? o(t).yAxisWidth : 0) + "px",
-        bottom: "0",
-        right: (a.value ? 0 : o(t).yAxisWidth) + "px",
-        height: o(t).xAxisHeight + "px",
-        pointerEvents: "none",
-        display: "flex",
-        alignItems: "center"
-      })
-    }, null, 4));
-  }
-});
-export {
-  D as default
-};

package/dist/ui/TimeAxis.vue2.js

@@ -1,4 +0,0 @@
-import f from "./TimeAxis.vue.js";
-export {
-  f as default
-};