@wick-charts/vue 0.4.1 → 0.5.0

package/dist/ui/Tooltip.vue2.js

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

package/dist/ui/YAxis.vue.js

@@ -0,0 +1,42 @@
+import { defineComponent as m, ref as p, onMounted as r, watch as s, onUnmounted as o, openBlock as f, createElementBlock as b, normalizeStyle as y, unref as u } from "vue";
+import { mountAxisLabels as x } from "../core/dist/axis/dom-labels.js";
+import { useChartInstance as h } from "../context.js";
+const _ = /* @__PURE__ */ m({
+  __name: "YAxis",
+  props: {
+    format: { type: Function },
+    labelCount: {},
+    minLabelSpacing: {}
+  },
+  setup(c) {
+    const e = c, n = h(), t = p(null), a = () => n.yScale.setFormat(e.format ?? null);
+    r(a), s(() => e.format, a), o(() => n.yScale.setFormat(null));
+    const i = () => {
+      n.setYAxisLabelDensity({
+        labelCount: e.labelCount ?? null,
+        minLabelSpacing: e.minLabelSpacing ?? null
+      });
+    };
+    i(), s(() => [e.labelCount, e.minLabelSpacing], i), o(() => n.setYAxisLabelDensity({ labelCount: null, minLabelSpacing: null }));
+    let l = null;
+    return r(() => {
+      t.value !== null && (l = x({ chart: n, container: t.value, axis: "y" }));
+    }), o(() => {
+      l?.(), l = null;
+    }), (L, S) => (f(), b("div", {
+      ref_key: "containerRef",
+      ref: t,
+      style: y({
+        position: "absolute",
+        right: "0",
+        top: "0",
+        bottom: u(n).xAxisHeight + "px",
+        width: u(n).yAxisWidth + "px",
+        pointerEvents: "none"
+      })
+    }, null, 4));
+  }
+});
+export {
+  _ as default
+};

package/dist/ui/YAxis.vue2.js

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

package/dist/ui/YLabel.vue.js

@@ -0,0 +1,105 @@
+import { defineComponent as B, useSlots as F, computed as n, ref as _, onMounted as T, onUnmounted as z, openBlock as h, createElementBlock as b, Fragment as x, renderSlot as Y, createElementVNode as C, normalizeStyle as L, unref as E, createVNode as N, createCommentVNode as V } from "vue";
+import { useChartInstance as D } from "../context.js";
+import O from "./NumberFlow.vue.js";
+const A = /* @__PURE__ */ B({
+  __name: "YLabel",
+  props: {
+    seriesId: {},
+    color: {},
+    format: { type: Function }
+  },
+  setup(S) {
+    const u = S, e = D(), k = F(), I = n(() => typeof k.default == "function"), r = _(0), i = () => {
+      r.value++;
+    };
+    T(() => {
+      e.setYLabel(!0), e.on("overlayChange", i), e.on("viewportChange", i), e.getSeriesIds().length > 0 && r.value++;
+    }), z(() => {
+      e.setYLabel(!1), e.off("overlayChange", i), e.off("viewportChange", i);
+    });
+    function w(a, l) {
+      if (l !== void 0) return l;
+      const g = a.getSeriesIdsByType("time", { visibleOnly: !0, singleLayerOnly: !0 });
+      if (g.length > 0) return g[0];
+      const y = a.getSeriesIdsByType("time", { visibleOnly: !0 });
+      return y.length > 0 ? y[0] : null;
+    }
+    const s = n(() => (r.value, w(e, u.seriesId))), t = n(() => (r.value, s.value !== null ? e.getStackedLastValue(s.value) : null)), v = n(() => (r.value, s.value !== null ? e.getPreviousClose(s.value) : null)), o = n(() => (r.value, e.getTheme())), c = n(() => (r.value, t.value === null ? 0 : e.yScale.valueToY(t.value.value))), f = n(() => t.value === null || v.value === null ? "neutral" : t.value.value > v.value ? "up" : t.value.value < v.value ? "down" : "neutral"), d = n(() => {
+      if (t.value === null) return o.value.yLabel.neutralBackground;
+      if (!t.value.isLive) return o.value.axis.textColor;
+      if (u.color) return u.color;
+      switch (f.value) {
+        case "up":
+          return o.value.yLabel.upBackground;
+        case "down":
+          return o.value.yLabel.downBackground;
+        default:
+          return o.value.yLabel.neutralBackground;
+      }
+    }), m = n(() => {
+      r.value;
+      const a = e.yScale.getRange(), l = a.max - a.min;
+      return l < 0.1 ? 6 : l < 10 ? 4 : l < 1e3 ? 2 : 0;
+    }), p = n(() => {
+      if (u.format) return u.format;
+      const a = new Intl.NumberFormat("en-US", {
+        minimumFractionDigits: m.value,
+        maximumFractionDigits: m.value,
+        useGrouping: !1
+      });
+      return (l) => a.format(l);
+    });
+    return (a, l) => t.value !== null ? (h(), b(x, { key: 0 }, [
+      I.value ? Y(a.$slots, "default", {
+        key: 0,
+        value: t.value.value,
+        y: c.value,
+        bgColor: d.value,
+        isLive: t.value.isLive,
+        direction: f.value,
+        format: p.value
+      }) : (h(), b(x, { key: 1 }, [
+        C("div", {
+          style: L({
+            position: "absolute",
+            left: "0",
+            right: E(e).yAxisWidth + "px",
+            top: c.value + "px",
+            height: "0",
+            borderTop: "1px dashed " + d.value,
+            opacity: 0.5,
+            pointerEvents: "none",
+            zIndex: 2
+          })
+        }, null, 4),
+        C("div", {
+          style: L({
+            position: "absolute",
+            right: "4px",
+            top: c.value + "px",
+            transform: "translateY(-50%)",
+            pointerEvents: "auto",
+            zIndex: 3,
+            background: d.value,
+            color: o.value.yLabel.textColor,
+            fontSize: o.value.yLabel.fontSize + "px",
+            fontFamily: o.value.typography.fontFamily,
+            padding: "3px 8px",
+            borderRadius: "3px",
+            whiteSpace: "nowrap",
+            transition: "background-color 0.3s ease"
+          })
+        }, [
+          N(O, {
+            value: t.value.value,
+            format: p.value,
+            "spin-duration": 350
+          }, null, 8, ["value", "format"])
+        ], 4)
+      ], 64))
+    ], 64)) : V("", !0);
+  }
+});
+export {
+  A as default
+};

package/dist/ui/YLabel.vue2.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wick-charts/vue",
-  "version": "0.4.1",
+  "version": "0.5.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.4.1"
+    "@wick-charts/core": "^0.5.0"
   },
   "scripts": {
     "build": "vite build"

package/src/BarSeries.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { BarSeriesOptions, SeriesSyncState, TimePoint } from '@wick-charts/core';
-import { EMPTY_SYNC_STATE, syncSeriesLayer } from '@wick-charts/core';
+import type { BarSeriesOptions, MultiLayerData, SeriesSyncState } from '@wick-charts/core';
+import { BarSeriesDef, EMPTY_SYNC_STATE, syncLayers, toLayers } from '@wick-charts/core';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { useChartInstance } from './context';
 
 const props = defineProps<{
-  data: TimePoint[][];
+  /** Flat `TimePoint[]`, `TimePoint[][]`, or named `{ label, color?, data }` layers. Time accepts ms or `Date`. */
+  data: MultiLayerData;
   options?: Partial<BarSeriesOptions>;
   /** Stable series ID — same value across remounts. */
   id?: string;
@@ -15,25 +16,23 @@ const props = defineProps<{
 const chart = useChartInstance();
 const seriesId = ref<string | null>(null);
 // Per-layer sync state — drives the shared append/keepLast/update/replace
-// reconciliation so streaming eases instead of snapping Y every tick.
+// reconciliation (plus per-layer labels/colors) so streaming eases instead of
+// snapping Y every tick.
 let prevSync: SeriesSyncState[] = [];
 
-function applyData(id: string, data: TimePoint[][]): void {
-  chart.batch(() => {
-    for (let i = 0; i < data.length; i++) {
-      prevSync[i] = syncSeriesLayer({ chart, id, data: data[i], prev: prevSync[i] ?? EMPTY_SYNC_STATE, layerIndex: i });
-    }
-  });
+function applyData(id: string, data: MultiLayerData): void {
+  prevSync = syncLayers({ chart, id, data, prev: prevSync });
 }
 
 onMounted(() => {
-  const id = chart.addSeries('bar', {
+  const layerCount = toLayers(props.data).length;
+  const id = chart.addSeries(BarSeriesDef, {
     ...props.options,
-    layers: props.data.length,
+    layers: layerCount,
     id: props.id,
   });
   seriesId.value = id;
-  prevSync = props.data.map(() => EMPTY_SYNC_STATE);
+  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);
 });

package/src/CandlestickSeries.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { CandlestickSeriesOptions, OHLCInput, SeriesSyncState } from '@wick-charts/core';
-import { EMPTY_SYNC_STATE, syncSeriesLayer } from '@wick-charts/core';
+import type { CandlestickData, CandlestickSeriesOptions, OHLCInput, SeriesSyncState } from '@wick-charts/core';
+import { CandlestickSeriesDef, EMPTY_SYNC_STATE, syncSeriesLayer, toLayers } from '@wick-charts/core';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { useChartInstance } from './context';
 
 const props = defineProps<{
-  data: OHLCInput[];
+  /** Flat `OHLCInput[]`, or `{ label, data }` to name the stream. */
+  data: CandlestickData;
   options?: Partial<CandlestickSeriesOptions>;
   /** Stable series ID — same value across remounts. */
   id?: string;
@@ -19,13 +20,23 @@ const seriesId = ref<string | null>(null);
 // burst takes the smooth append path, matching React's 20-candle threshold).
 let prevSync: SeriesSyncState = EMPTY_SYNC_STATE;
 
+function applyData(id: string, data: CandlestickData): void {
+  const layer = toLayers<OHLCInput>(data)[0];
+  chart.setSeriesLabels(id, [layer.label]);
+  prevSync = syncSeriesLayer({ chart, id, data: layer.data, prev: prevSync });
+}
+
 onMounted(() => {
-  const id = chart.addSeries('candlestick', { ...props.options, id: props.id });
+  const id = chart.addSeries(CandlestickSeriesDef, {
+    ...props.options,
+    id: props.id,
+    label: toLayers<OHLCInput>(props.data)[0].label,
+  });
   seriesId.value = id;
   // Initial data load — Vue's `watch` is lazy by default, so the watcher
   // below only fires on subsequent `data` prop mutations. Explicitly apply
   // the first value here so components with static data render immediately.
-  prevSync = syncSeriesLayer({ chart, id, data: props.data, prev: prevSync });
+  applyData(id, props.data);
 });
 
 onUnmounted(() => {
@@ -38,7 +49,7 @@ watch(
     const id = seriesId.value;
     if (!id) return;
 
-    prevSync = syncSeriesLayer({ chart, id, data, prev: prevSync });
+    applyData(id, data);
   },
 );
 

package/src/LineSeries.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { LineSeriesOptions, SeriesSyncState, TimePoint } from '@wick-charts/core';
-import { EMPTY_SYNC_STATE, syncSeriesLayer } from '@wick-charts/core';
+import type { LineSeriesOptions, MultiLayerData, SeriesSyncState } from '@wick-charts/core';
+import { EMPTY_SYNC_STATE, LineSeriesDef, syncLayers, toLayers } from '@wick-charts/core';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { useChartInstance } from './context';
 
 const props = defineProps<{
-  data: TimePoint[][];
+  /** Flat `TimePoint[]`, `TimePoint[][]`, or named `{ label, color?, data }` layers. Time accepts ms or `Date`. */
+  data: MultiLayerData;
   options?: Partial<LineSeriesOptions>;
   /** Stable series ID — same value across remounts. */
   id?: string;
@@ -15,25 +16,23 @@ const props = defineProps<{
 const chart = useChartInstance();
 const seriesId = ref<string | null>(null);
 // Per-layer sync state — drives the shared append/keepLast/update/replace
-// reconciliation so streaming eases instead of snapping Y every tick.
+// reconciliation (plus per-layer labels/colors) so streaming eases instead of
+// snapping Y every tick.
 let prevSync: SeriesSyncState[] = [];
 
-function applyData(id: string, data: TimePoint[][]): void {
-  chart.batch(() => {
-    for (let i = 0; i < data.length; i++) {
-      prevSync[i] = syncSeriesLayer({ chart, id, data: data[i], prev: prevSync[i] ?? EMPTY_SYNC_STATE, layerIndex: i });
-    }
-  });
+function applyData(id: string, data: MultiLayerData): void {
+  prevSync = syncLayers({ chart, id, data, prev: prevSync });
 }
 
 onMounted(() => {
-  const id = chart.addSeries('line', {
+  const layerCount = toLayers(props.data).length;
+  const id = chart.addSeries(LineSeriesDef, {
     ...props.options,
-    layers: props.data.length,
+    layers: layerCount,
     id: props.id,
   });
   seriesId.value = id;
-  prevSync = props.data.map(() => EMPTY_SYNC_STATE);
+  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);
 });

package/src/PieSeries.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { PieSeriesOptions, PieSliceData } from '@wick-charts/core';
+import { PieSeriesDef } from '@wick-charts/core';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { useChartInstance } from './context';
@@ -15,7 +16,7 @@ const chart = useChartInstance();
 const seriesId = ref<string | null>(null);
 
 onMounted(() => {
-  const id = chart.addSeries('pie', { ...props.options, id: props.id });
+  const id = chart.addSeries(PieSeriesDef, { ...props.options, id: props.id });
   seriesId.value = id;
   // Lazy watcher — apply initial data here so static-data mounts render without a no-op first frame.
   if (props.data.length > 0) {

package/src/composables.ts

@@ -22,10 +22,20 @@ export function useYRange(chart: ChartInstance): Ref<YRange> {
 }
 
 export function useLastYValue(chart: ChartInstance, seriesId: string): Ref<{ value: number; isLive: boolean } | null> {
-  const val = ref<{ value: number; isLive: boolean } | null>(chart.getLastValue(seriesId));
+  let snapshot = chart.getLastValue(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;
+  const val = ref<{ value: number; isLive: boolean } | null>(snapshot);
   const handler = () => {
     const next = chart.getLastValue(seriesId);
-    if (val.value?.value === next?.value && val.value?.isLive === next?.isLive) return;
+    const nextY = next ? chart.yScale.valueToY(next.value) : null;
+    if (snapshot?.value === next?.value && snapshot?.isLive === next?.isLive && lastY === nextY) return;
+
+    snapshot = next;
+    lastY = nextY;
     val.value = next;
   };
   onMounted(() => {

package/src/index.ts

@@ -11,19 +11,29 @@
 export type {
   AxisBound,
   AxisConfig,
+  BarPaintArgs,
+  BarPainter,
   BarSeriesOptions,
   /** @deprecated Use {@link StackingMode} instead. */
   BuildHoverSnapshotsArgs,
   BuildLastSnapshotsArgs,
+  CandlePaintArgs,
+  CandlePainter,
   CandlestickSeriesOptions,
   ChartLayout,
   ChartOptions,
   ChartTheme,
+  CornerMask,
   CrosshairPosition,
+  CurveKind,
   HoverInfo,
   LegendItem,
+  LinePaintArgs,
+  LinePainter,
   /** @deprecated Use {@link TimePoint} instead. */
   LineSeriesOptions,
+  MarkerConfig,
+  MarkerShape,
   NavigatorCandlePoint,
   NavigatorControllerParams,
   NavigatorData,
@@ -32,8 +42,18 @@ export type {
   NavigatorSeriesType,
   OHLCData,
   OHLCInput,
+  PaintEnv,
+  PerfConfig,
+  PerfMonitorOptions,
+  PerfStats,
   PieSeriesOptions,
   PieSliceData,
+  ReferenceLineConfig,
+  ReferenceLineOrientation,
+  ReferenceLineStyle,
+  RoundedRectArgs,
+  SeriesCreateEnv,
+  SeriesDefinition,
   SeriesSnapshot,
   SeriesType,
   SliceInfo,
@@ -43,11 +63,14 @@ export type {
   ThemePreset,
   TimePoint,
   TimePointInput,
+  TimeRegionConfig,
+  TimeRegionEnd,
   TimeValue,
   TooltipField,
   TooltipFormatter,
   TooltipPosition,
   TooltipPositionArgs,
+  TracePathArgs,
   Typography,
   ValueFormatter,
   VisibleRange,
@@ -55,9 +78,15 @@ export type {
   YAxisConfig,
   YRange,
 } from '@wick-charts/core';
+// Painters — custom per-element drawing for bar / candle / line series.
 export {
+  BarSeriesDef,
+  CandlestickSeriesDef,
   ChartInstance,
+  LineSeriesDef,
   NavigatorController,
+  PerfMonitor,
+  PieSeriesDef,
   andromeda,
   autoGradient,
   ayuMirage,
@@ -68,6 +97,7 @@ export {
   createTheme,
   detectInterval,
   dracula,
+  fillRoundedRect,
   formatCompact,
   formatDate,
   formatPriceAdaptive,
@@ -87,13 +117,22 @@ export {
   oneDarkPro,
   panda,
   peachCream,
+  perfHud,
   quietLight,
+  registerBuiltinSeries,
+  registerSeriesDefinition,
   resolveAxisFontSize,
   resolveAxisTextColor,
   resolveCandlestickBodyColor,
   rosePineDawn,
+  roundedBarFill,
+  roundedCandleFill,
   sandDune,
+  smoothCurve,
   solarizedLight,
+  steppedCurve,
+  straightCurve,
+  tracePath,
 } from '@wick-charts/core';
 
 export { default as BarSeries } from './BarSeries.vue';
@@ -108,11 +147,14 @@ export { default as PieSeries } from './PieSeries.vue';
 export { default as Crosshair } from './ui/Crosshair.vue';
 export { default as InfoBar } from './ui/InfoBar.vue';
 export { default as Legend } from './ui/Legend.vue';
+export { default as Marker } from './ui/Marker.vue';
 export { default as Navigator } from './ui/Navigator.vue';
 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 } 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';

package/src/ui/Crosshair.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { formatTime } from '@wick-charts/core';
-import { computed } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 
 import { useCrosshairPosition } from '../composables';
 import { useChartInstance } from '../context';
@@ -8,8 +8,33 @@ import { useChartInstance } from '../context';
 const chart = useChartInstance();
 const position = useCrosshairPosition(chart);
 
-const theme = computed(() => chart.getTheme());
+// `setTheme` fires `overlayChange`; bump re-runs the theme computed so the
+// label colors track a runtime theme swap instead of freezing on the
+// first-render snapshot (matches Tooltip/PieTooltip).
+const bump = ref(0);
+const onOverlayChange = () => {
+  bump.value++;
+};
+onMounted(() => chart.on('overlayChange', onOverlayChange));
+onUnmounted(() => chart.off('overlayChange', onOverlayChange));
+
+const theme = computed(() => {
+  void bump.value;
+
+  return chart.getTheme();
+});
 const dataInterval = computed(() => chart.getDataInterval());
+// Format the time pill at the axis's *resolved* tick granularity, not the raw
+// data interval — otherwise a time-of-day badge floats among date labels when
+// zoomed out. `niceTickValues` reads the live visible range, which Vue can't
+// track reactively, so depend on `position` (a wheel-zoom re-emits the
+// crosshair) to re-resolve on zoom — matching React, which recomputes this on
+// every render. Falls back to dataInterval on a degenerate range.
+const tickInterval = computed(() => {
+  void position.value;
+
+  return chart.timeScale.niceTickValues(dataInterval.value).tickInterval || dataInterval.value;
+});
 
 const labelStyle = computed(() => ({
   // Blend the theme's labelBackground at 80% opacity so the axis grid
@@ -54,7 +79,7 @@ const labelStyle = computed(() => ({
         ...labelStyle,
       }"
     >
-      {{ formatTime(position.time, dataInterval) }}
+      {{ formatTime(position.time, tickInterval) }}
     </div>
   </template>
 </template>

package/src/ui/Legend.vue

@@ -129,7 +129,6 @@ function buildLegendItems(c: ChartInstance): LegendItem[] {
   for (const seriesId of c.getSeriesIds()) {
     const layers = c.getSeriesLayers(seriesId);
     if (layers) {
-      const baseLabel = c.getSeriesLabel(seriesId);
       for (let layerIndex = 0; layerIndex < layers.length; layerIndex++) {
         const id = `${seriesId}_layer${layerIndex}`;
         const visible = c.isSeriesVisible(seriesId) && c.isLayerVisible(seriesId, layerIndex);
@@ -138,7 +137,7 @@ function buildLegendItems(c: ChartInstance): LegendItem[] {
             id,
             seriesId,
             layerIndex,
-            label: baseLabel ? `${baseLabel} ${layerIndex + 1}` : `Series ${layerIndex + 1}`,
+            label: c.getLayerLabel(seriesId, layerIndex) ?? `Series ${layerIndex + 1}`,
             color: layers[layerIndex].color,
             isDisabled: !visible,
           }),

package/src/ui/Marker.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { MarkerShape, TimeValue } from '@wick-charts/core';
+import { onMounted, onUnmounted, watch } from 'vue';
+
+import { useChartInstance } from '../context';
+
+const props = defineProps<{
+  /** X anchor — epoch ms or a `Date`. */
+  time: TimeValue;
+  /** Y anchor as a data value. Omit and set `seriesId` to snap to that series' value at `time`. */
+  value?: number;
+  /** Snap Y to this series' value at `time` when `value` is omitted. Also the default color source. */
+  seriesId?: string;
+  /** Glyph at the anchor. Default: `'dot'`. Arrows point their tip at the anchor. */
+  shape?: MarkerShape;
+  /** Reuse the line pulse halo around the anchor. Default: `false`. */
+  pulse?: boolean;
+  /** Optional text label drawn in a pill next to the anchor. */
+  label?: string;
+  /** Color override. Falls back to the series color (when `seriesId` is set), then the theme line color. */
+  color?: string;
+}>();
+
+const chart = useChartInstance();
+let markerId: string | null = null;
+
+onMounted(() => {
+  markerId = chart.addMarker({
+    time: props.time,
+    value: props.value,
+    seriesId: props.seriesId,
+    shape: props.shape,
+    pulse: props.pulse,
+    label: props.label,
+    color: props.color,
+  });
+});
+
+onUnmounted(() => {
+  if (markerId !== null) chart.removeMarker(markerId);
+  markerId = null;
+});
+
+watch(
+  () => [props.time, props.value, props.seriesId, props.shape, props.pulse, props.label, props.color],
+  () => {
+    if (markerId === null) return;
+
+    chart.updateMarker(markerId, {
+      time: props.time,
+      value: props.value,
+      seriesId: props.seriesId,
+      shape: props.shape,
+      pulse: props.pulse,
+      label: props.label,
+      color: props.color,
+    });
+  },
+);
+</script>
+
+<template><span v-if="false" /></template>