@wick-charts/vue 0.6.4 → 0.7.0

package/README.md

@@ -94,7 +94,7 @@ For a CodePen, JSFiddle, or a plain HTML page, load the prebuilt UMD bundle from
 </script>
 ```
 
-The same file is on unpkg (`https://unpkg.com/@wick-charts/react/dist/wick-charts.umd.min.js`); pin a version with `@x.y.z` for production. ~72 kB gzipped, self-contained.
+The same file is on unpkg (`https://unpkg.com/@wick-charts/react/dist/wick-charts.umd.min.js`); pin a version with `@x.y.z` for production. ~86 kB gzipped, self-contained.
 
 ## Bundle size
 
@@ -104,9 +104,9 @@ Tree-shaken React scenarios via `pnpm size` (esbuild, minified, browser target,
 
 | Scenario | Raw | Gzip | Brotli |
 |---|---:|---:|---:|
-| Candlestick only | 109.8 kB | 34.1 kB | 30.0 kB |
-| Line only        | 125.6 kB | 38.7 kB | 33.8 kB |
-| Full React       | 253.5 kB | 78.1 kB | 65.6 kB |
+| Candlestick only | 137.6 kB | 42.9 kB | 37.6 kB |
+| Line only        | 158.4 kB | 49.0 kB | 42.7 kB |
+| Full React       | 307.9 kB | 94.9 kB | 79.5 kB |
 
 ## Migration
 

package/dist/BandSeries.vue.js

@@ -1,50 +1,52 @@
-import { defineComponent as u, ref as d, onMounted as p, onUnmounted as c, watch as n, createCommentVNode as f } from "vue";
-import { toLayers as m, EMPTY_SYNC_STATE as v, syncLayers as y } from "./core/dist/data/sync.js";
-import { BandSeriesDef as S } from "./core/dist/series/band.js";
+import { defineComponent as u, ref as d, onMounted as c, onUnmounted as p, watch as n, createCommentVNode as f } from "vue";
+import { toLayers as m, EMPTY_SYNC_STATE as v, syncLayers as S } from "./core/dist/data/sync.js";
+import { BandSeriesDef as y } from "./core/dist/series/band.js";
 import { useChartInstance as _ } from "./context.js";
-const E = /* @__PURE__ */ u({
+const B = /* @__PURE__ */ u({
   __name: "BandSeries",
   props: {
     data: {},
     options: {},
     id: {},
-    visible: { type: Boolean, default: !0 }
+    visible: { type: Boolean, default: !0 },
+    scale: {}
   },
   setup(l) {
-    const a = l, s = _(), r = d(null);
+    const a = l, r = _(), s = d(null);
     let i = [];
     function o(e, t) {
-      i = y({ chart: s, id: e, data: t, prev: i });
+      i = S({ chart: r, id: e, data: t, prev: i });
     }
-    return p(() => {
-      const e = m(a.data).length, t = s.addSeries(S, {
+    return c(() => {
+      const e = m(a.data).length, t = r.addSeries(y, {
         ...a.options,
+        scale: a.scale,
         layers: e,
         id: a.id
       });
-      r.value = t, i = new Array(e).fill(v), o(t, a.data), s.setSeriesVisible(t, a.visible);
-    }), c(() => {
-      r.value && s.removeSeries(r.value);
+      s.value = t, i = new Array(e).fill(v), o(t, a.data), r.setSeriesVisible(t, a.visible);
+    }), p(() => {
+      s.value && r.removeSeries(s.value);
     }), n(
       () => a.data,
       (e) => {
-        const t = r.value;
+        const t = s.value;
         t && o(t, e);
       }
     ), n(
-      () => a.options,
-      (e) => {
-        r.value && e && s.updateSeriesOptions(r.value, e);
+      () => [a.options, a.scale],
+      ([e, t]) => {
+        s.value && r.updateSeriesOptions(s.value, e ? { ...e, scale: t } : { scale: t });
       },
       { deep: !0 }
     ), n(
       () => a.visible,
       (e) => {
-        r.value && s.setSeriesVisible(r.value, e);
+        s.value && r.setSeriesVisible(s.value, e);
       }
     ), (e, t) => f("", !0);
   }
 });
 export {
-  E as default
+  B as default
 };

package/dist/BarSeries.vue.js

@@ -1,29 +1,31 @@
-import { defineComponent as u, ref as p, onMounted as d, onUnmounted as c, watch as o, createCommentVNode as f } from "vue";
-import { toLayers as m, EMPTY_SYNC_STATE as v, syncLayers as y } from "./core/dist/data/sync.js";
-import { BarSeriesDef as S } from "./core/dist/series/bar.js";
+import { defineComponent as u, ref as c, onMounted as d, onUnmounted as p, watch as o, createCommentVNode as f } from "vue";
+import { toLayers as m, EMPTY_SYNC_STATE as v, syncLayers as S } from "./core/dist/data/sync.js";
+import { BarSeriesDef as y } from "./core/dist/series/bar.js";
 import { useChartInstance as _ } from "./context.js";
-const E = /* @__PURE__ */ u({
+const B = /* @__PURE__ */ u({
   __name: "BarSeries",
   props: {
     data: {},
     options: {},
     id: {},
-    visible: { type: Boolean, default: !0 }
+    visible: { type: Boolean, default: !0 },
+    scale: {}
   },
   setup(l) {
-    const a = l, s = _(), r = p(null);
+    const a = l, s = _(), r = c(null);
     let i = [];
     function n(e, t) {
-      i = y({ chart: s, id: e, data: t, prev: i });
+      i = S({ chart: s, id: e, data: t, prev: i });
     }
     return d(() => {
-      const e = m(a.data).length, t = s.addSeries(S, {
+      const e = m(a.data).length, t = s.addSeries(y, {
         ...a.options,
+        scale: a.scale,
         layers: e,
         id: a.id
       });
       r.value = t, i = new Array(e).fill(v), n(t, a.data), s.setSeriesVisible(t, a.visible);
-    }), c(() => {
+    }), p(() => {
       r.value && s.removeSeries(r.value);
     }), o(
       () => a.data,
@@ -32,9 +34,9 @@ const E = /* @__PURE__ */ u({
         t && n(t, e);
       }
     ), o(
-      () => a.options,
-      (e) => {
-        r.value && e && s.updateSeriesOptions(r.value, e);
+      () => [a.options, a.scale],
+      ([e, t]) => {
+        r.value && s.updateSeriesOptions(r.value, e ? { ...e, scale: t } : { scale: t });
       },
       { deep: !0 }
     ), o(
@@ -46,5 +48,5 @@ const E = /* @__PURE__ */ u({
   }
 });
 export {
-  E as default
+  B as default
 };

package/dist/CandlestickSeries.vue.js

@@ -1,49 +1,51 @@
-import { defineComponent as p, ref as c, onMounted as f, onUnmounted as m, watch as r, createCommentVNode as v } from "vue";
-import { toLayers as d, syncSeriesLayer as S, EMPTY_SYNC_STATE as b } from "./core/dist/data/sync.js";
-import { CandlestickSeriesDef as y } from "./core/dist/series/candlestick.js";
-import { useChartInstance as _ } from "./context.js";
-const V = /* @__PURE__ */ p({
+import { defineComponent as d, ref as p, onMounted as f, onUnmounted as m, watch as i, createCommentVNode as v } from "vue";
+import { toLayers as u, syncSeriesLayer as S, EMPTY_SYNC_STATE as b } from "./core/dist/data/sync.js";
+import { CandlestickSeriesDef as _ } from "./core/dist/series/candlestick.js";
+import { useChartInstance as y } from "./context.js";
+const V = /* @__PURE__ */ d({
   __name: "CandlestickSeries",
   props: {
     data: {},
     options: {},
     id: {},
-    visible: { type: Boolean, default: !0 }
+    visible: { type: Boolean, default: !0 },
+    scale: {}
   },
-  setup(u) {
-    const t = u, s = _(), a = c(null);
+  setup(c) {
+    const a = c, r = y(), t = p(null);
     let o = b;
-    function n(e, i) {
-      const l = d(i)[0];
-      s.setSeriesLabels(e, [l.label]), o = S({ chart: s, id: e, data: l.data, prev: o });
+    function n(e, s) {
+      const l = u(s)[0];
+      r.setSeriesLabels(e, [l.label]), o = S({ chart: r, id: e, data: l.data, prev: o });
     }
     return f(() => {
-      const e = s.addSeries(y, {
-        ...t.options,
-        id: t.id,
-        label: d(t.data)[0].label
+      const e = r.addSeries(_, {
+        ...a.options,
+        scale: a.scale,
+        id: a.id,
+        label: u(a.data)[0].label
       });
-      a.value = e, n(e, t.data), s.setSeriesVisible(e, t.visible);
+      t.value = e, n(e, a.data), r.setSeriesVisible(e, a.visible);
     }), m(() => {
-      a.value && s.removeSeries(a.value);
-    }), r(
-      () => t.data,
+      t.value && r.removeSeries(t.value);
+    }), i(
+      () => a.data,
       (e) => {
-        const i = a.value;
-        i && n(i, e);
+        const s = t.value;
+        s && n(s, e);
       }
-    ), r(
-      () => t.options,
-      (e) => {
-        a.value && e && s.updateSeriesOptions(a.value, e);
+    ), i(
+      () => [a.options, a.scale],
+      ([e, s]) => {
+        t.value && r.updateSeriesOptions(t.value, e ? { ...e, scale: s } : { scale: s });
       },
       { deep: !0 }
-    ), r(
-      () => t.visible,
+    ), i(
+      () => a.visible,
       (e) => {
-        a.value && s.setSeriesVisible(a.value, e);
+        t.value && r.setSeriesVisible(t.value, e);
       }
-    ), (e, i) => v("", !0);
+    ), (e, s) => v("", !0);
   }
 });
 export {

package/dist/ChartContainer.vue.js

@@ -1,9 +1,9 @@
-import { defineComponent as U, ref as d, shallowRef as F, provide as l, watch as r, computed as v, onMounted as G, nextTick as g, onUnmounted as I, openBlock as y, createElementBlock as m, normalizeStyle as q, createElementVNode as o, createCommentVNode as w, renderSlot as J } from "vue";
+import { defineComponent as U, ref as l, shallowRef as F, provide as d, watch as o, computed as c, onMounted as G, nextTick as g, onUnmounted as I, openBlock as y, createElementBlock as m, normalizeStyle as q, createElementVNode as n, createCommentVNode as w, renderSlot as J } from "vue";
 import { ChartInstance as P } from "./core/dist/chart.js";
-import { deepEqual as T } from "./core/dist/utils/deep-equal.js";
+import { deepEqual as S } from "./core/dist/utils/deep-equal.js";
 import { catppuccin as Q } from "./core/dist/theme/themes/catppuccin.js";
-import { ChartKey as W, ThemeKey as X, TitleAnchorKey as Y, InfoBarAnchorKey as Z, LegendAnchorKey as ee, LegendRightAnchorKey as te, NavigatorAnchorKey as ie } from "./context.js";
-const ae = { style: { display: "flex", "flex-direction": "row", flex: "1", "min-height": "0" } }, oe = { style: { display: "flex", "flex-direction": "column", flex: "1", "min-width": "0", "min-height": "0" } }, ne = {
+import { ChartKey as W, ThemeKey as X, TitleAnchorKey as Y, InfoBarAnchorKey as Z, LegendAnchorKey as ee, LegendRightAnchorKey as te, NavigatorAnchorKey as ae } from "./context.js";
+const ie = { style: { display: "flex", "flex-direction": "row", flex: "1", "min-height": "0" } }, oe = { style: { display: "flex", "flex-direction": "column", flex: "1", "min-width": "0", "min-height": "0" } }, ne = {
   key: 0,
   "data-chart-header": "",
   style: { "flex-shrink": "0", display: "flex", "flex-direction": "column", "pointer-events": "none" }
@@ -11,11 +11,12 @@ const ae = { style: { display: "flex", "flex-direction": "row", flex: "1", "min-
   key: 1,
   "data-chart-series-overlay": "",
   style: { position: "absolute", inset: "0", "pointer-events": "none", "z-index": "3" }
-}, z = 24, ce = /* @__PURE__ */ U({
+}, T = 24, ve = /* @__PURE__ */ U({
   __name: "ChartContainer",
   props: {
     theme: { default: () => Q.theme },
     axis: {},
+    scales: {},
     padding: {},
     viewport: {},
     visibleRange: {},
@@ -35,31 +36,31 @@ const ae = { style: { display: "flex", "flex-direction": "row", flex: "1", "min-
     onCrosshairMove: {}
   },
   setup(b) {
-    const e = b, u = d(), a = F(null), x = F(e.theme), c = e.perf, h = e.onEdgeReached, C = d(null), R = d(null), k = d(null), _ = d(null), E = d(null), B = d(null);
-    l(W, a), l(X, x), l(Y, R), l(Z, k), l(ee, _), l(te, E), l(ie, B);
+    const e = b, u = l(), i = F(null), x = F(e.theme), v = e.perf, p = e.onEdgeReached, C = l(null), R = l(null), k = l(null), _ = l(null), E = l(null), B = l(null);
+    d(W, i), d(X, x), d(Y, R), d(Z, k), d(ee, _), d(te, E), d(ae, B);
     let f = null;
-    const s = d(0);
-    r(
-      () => [a.value, e.headerLayout === "overlay" ? s.value : 0],
-      ([t, i]) => t?.setHeaderHeight(i),
+    const s = l(0);
+    o(
+      () => [i.value, e.headerLayout === "overlay" ? s.value : 0],
+      ([t, a]) => t?.setHeaderHeight(a),
       { immediate: !0 }
     );
-    const L = v(() => e.fade === !1 ? !1 : typeof e.fade == "object" ? e.fade.top !== void 0 || e.fade.overlap !== void 0 : e.fade === !0), S = v(() => {
-      if (!L.value) return 0;
+    const O = c(() => e.fade === !1 ? !1 : typeof e.fade == "object" ? e.fade.top !== void 0 || e.fade.overlap !== void 0 : e.fade === !0), z = c(() => {
+      if (!O.value) return 0;
       const t = typeof e.fade == "object" ? e.fade.overlap : void 0;
       return t !== void 0 ? Math.max(0, t) : s.value / 2;
-    }), O = v(() => {
-      if (!L.value) return 0;
+    }), L = c(() => {
+      if (!O.value) return 0;
       if (typeof e.fade == "object" && e.fade.top !== void 0) return e.fade.top;
       const t = e.headerLayout === "overlay" ? s.value : 0;
-      return t > 0 ? t + z : z;
-    }), j = v(
-      () => e.headerLayout === "overlay" ? Math.max(0, s.value - S.value) : 0
+      return t > 0 ? t + T : T;
+    }), j = c(
+      () => e.headerLayout === "overlay" ? Math.max(0, s.value - z.value) : 0
     );
     function A() {
-      if (!a.value) return;
-      const i = { top: (e.padding?.top ?? 20) + j.value };
-      e.padding?.bottom !== void 0 && (i.bottom = e.padding.bottom), e.padding?.right !== void 0 && (i.right = e.padding.right), e.padding?.left !== void 0 && (i.left = e.padding.left), a.value.setPadding(i);
+      if (!i.value) return;
+      const a = { top: (e.padding?.top ?? 20) + j.value };
+      e.padding?.bottom !== void 0 && (a.bottom = e.padding.bottom), e.padding?.right !== void 0 && (a.right = e.padding.right), e.padding?.left !== void 0 && (a.left = e.padding.left), i.value.setPadding(a);
     }
     function M(t) {
       if (e.fade === !1) {
@@ -67,17 +68,17 @@ const ae = { style: { display: "flex", "flex-direction": "row", flex: "1", "min-
         return;
       }
       if (typeof e.fade != "object") return;
-      const i = {};
-      e.fade.top !== void 0 && (i.top = e.fade.top), e.fade.right !== void 0 && (i.right = e.fade.right), e.fade.left !== void 0 && (i.left = e.fade.left), t.fade = i;
+      const a = {};
+      e.fade.top !== void 0 && (a.top = e.fade.top), e.fade.right !== void 0 && (a.right = e.fade.right), e.fade.left !== void 0 && (a.left = e.fade.left), t.fade = a;
     }
     function $() {
-      if (!a.value) return;
+      if (!i.value) return;
       if (e.fade === !1) {
-        a.value.setFade({ top: 0, right: 0, left: 0 });
+        i.value.setFade({ top: 0, right: 0, left: 0 });
         return;
       }
-      const t = { top: O.value };
-      typeof e.fade == "object" && (e.fade.right !== void 0 && (t.right = e.fade.right), e.fade.left !== void 0 && (t.left = e.fade.left)), a.value.setFade(t);
+      const t = { top: L.value };
+      typeof e.fade == "object" && (e.fade.right !== void 0 && (t.right = e.fade.right), e.fade.left !== void 0 && (t.left = e.fade.left)), i.value.setFade(t);
     }
     function V() {
       f?.disconnect(), f = null;
@@ -86,62 +87,68 @@ const ae = { style: { display: "flex", "flex-direction": "row", flex: "1", "min-
         s.value = 0, A();
         return;
       }
-      const i = () => {
+      const a = () => {
         s.value = t.getBoundingClientRect().height, A();
       };
-      i(), f = new ResizeObserver(i), f.observe(t);
+      a(), f = new ResizeObserver(a), f.observe(t);
     }
     function H(t) {
-      t.on("pointClick", (n) => e.onPointClick?.(n)), t.on("pointDoubleClick", (n) => e.onPointDoubleClick?.(n)), t.on("seriesHover", (n) => e.onSeriesHover?.(n)), t.on("crosshairMove", (n) => e.onCrosshairMove?.(n));
-      const i = () => e.onVisibleRangeChange?.(t.getVisibleRange());
-      t.on("viewportChange", i), t.on("dataUpdate", i), t.on("seriesChange", i);
+      t.on("pointClick", (r) => e.onPointClick?.(r)), t.on("pointDoubleClick", (r) => e.onPointDoubleClick?.(r)), t.on("seriesHover", (r) => e.onSeriesHover?.(r)), t.on("crosshairMove", (r) => e.onCrosshairMove?.(r));
+      const a = () => e.onVisibleRangeChange?.(t.getVisibleRange());
+      t.on("viewportChange", a), t.on("dataUpdate", a), t.on("seriesChange", a);
     }
     G(async () => {
       if (!u.value) return;
       const t = {};
-      e.axis && (t.axis = e.axis), e.theme && (t.theme = e.theme), e.padding && (t.padding = e.padding), e.viewport && (t.viewport = e.viewport), e.interactive !== void 0 && (t.interactive = e.interactive), e.grid !== void 0 && (t.grid = e.grid), c !== void 0 && (t.perf = c), h && (t.onEdgeReached = h), e.animations !== void 0 && (t.animations = e.animations), M(t), a.value = new P(u.value, t), H(a.value), e.onReady?.(a.value), await g(), V();
+      e.axis && (t.axis = e.axis), e.scales && (t.scales = e.scales), e.theme && (t.theme = e.theme), e.padding && (t.padding = e.padding), e.viewport && (t.viewport = e.viewport), e.interactive !== void 0 && (t.interactive = e.interactive), e.grid !== void 0 && (t.grid = e.grid), v !== void 0 && (t.perf = v), p && (t.onEdgeReached = p), e.animations !== void 0 && (t.animations = e.animations), M(t), i.value = new P(u.value, t), H(i.value), e.onReady?.(i.value), await g(), V();
     }), I(() => {
-      f?.disconnect(), f = null, a.value?.destroy(), a.value = null;
-    }), r(
+      f?.disconnect(), f = null, i.value?.destroy(), i.value = null;
+    }), o(
       () => e.headerLayout,
       async () => {
-        a.value && (await g(), V());
+        i.value && (await g(), V());
       }
-    ), r(
+    ), o(
       () => e.theme,
       (t) => {
-        a.value && t && (a.value.setTheme(t), x.value = t);
+        i.value && t && (i.value.setTheme(t), x.value = t);
       }
-    ), r(
+    ), o(
       () => e.axis,
       (t) => {
-        a.value && t && a.value.setAxis(t);
+        i.value && t && i.value.setAxis(t);
       },
       { deep: !0 }
-    ), r(
+    ), o(
+      () => e.scales,
+      (t) => {
+        i.value?.setScales(t);
+      },
+      { deep: !0 }
+    ), o(
       () => e.grid?.visible,
       () => {
-        a.value && e.grid !== void 0 && a.value.setGrid(e.grid);
+        i.value && e.grid !== void 0 && i.value.setGrid(e.grid);
       }
     );
     let K = e.animations;
-    r(
+    o(
       () => e.animations,
       async (t) => {
-        if (T(t, K) || (K = t, !a.value || !u.value)) return;
-        a.value.destroy(), a.value = null, await g();
-        const i = {};
-        e.axis && (i.axis = e.axis), e.theme && (i.theme = e.theme), e.padding && (i.padding = e.padding), e.viewport && (i.viewport = e.viewport), e.interactive !== void 0 && (i.interactive = e.interactive), e.grid !== void 0 && (i.grid = e.grid), c !== void 0 && (i.perf = c), h && (i.onEdgeReached = h), t !== void 0 && (i.animations = t), M(i), a.value = new P(u.value, i), H(a.value), e.onReady?.(a.value);
+        if (S(t, K) || (K = t, !i.value || !u.value)) return;
+        i.value.destroy(), i.value = null, await g();
+        const a = {};
+        e.axis && (a.axis = e.axis), e.scales && (a.scales = e.scales), e.theme && (a.theme = e.theme), e.padding && (a.padding = e.padding), e.viewport && (a.viewport = e.viewport), e.interactive !== void 0 && (a.interactive = e.interactive), e.grid !== void 0 && (a.grid = e.grid), v !== void 0 && (a.perf = v), p && (a.onEdgeReached = p), t !== void 0 && (a.animations = t), M(a), i.value = new P(u.value, a), H(i.value), e.onReady?.(i.value);
       }
     );
-    let p;
-    r(
-      () => [a.value, e.visibleRange],
-      async ([t, i]) => {
-        !t || i === void 0 || p !== void 0 && p.instance === t && T(p.spec, i) || (p = { instance: t, spec: i }, await g(), t.setVisibleRange(i));
+    let h;
+    o(
+      () => [i.value, e.visibleRange],
+      async ([t, a]) => {
+        !t || a === void 0 || h !== void 0 && h.instance === t && S(h.spec, a) || (h = { instance: t, spec: a }, await g(), t.setVisibleRange(a));
       },
       { immediate: !0 }
-    ), r(
+    ), o(
       () => [
         e.padding?.top,
         e.padding?.bottom,
@@ -150,29 +157,29 @@ const ae = { style: { display: "flex", "flex-direction": "row", flex: "1", "min-
         j.value
       ],
       A
-    ), r(() => [a.value, O.value, e.fade], $, { immediate: !0 });
-    const N = v(() => {
-      const t = x.value, [i, n] = t?.chartGradient ?? ["transparent", "transparent"], D = t?.background ?? "transparent";
-      return `position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 240px; overflow: hidden; background: ${e.gradient ? `linear-gradient(to bottom, ${i} 0%, ${D} 70%, ${n} 100%)` : D}`;
+    ), o(() => [i.value, L.value, e.fade], $, { immediate: !0 });
+    const N = c(() => {
+      const t = x.value, [a, r] = t?.chartGradient ?? ["transparent", "transparent"], D = t?.background ?? "transparent";
+      return `position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 240px; overflow: hidden; background: ${e.gradient ? `linear-gradient(to bottom, ${a} 0%, ${D} 70%, ${r} 100%)` : D}`;
     });
-    return (t, i) => (y(), m("div", {
+    return (t, a) => (y(), m("div", {
       style: q(N.value)
     }, [
-      o("div", ae, [
-        o("div", oe, [
+      n("div", ie, [
+        n("div", oe, [
           b.headerLayout === "inline" ? (y(), m("div", ne, [
-            o("div", {
+            n("div", {
               ref_key: "titleAnchor",
               ref: R,
               "data-chart-title-anchor": ""
             }, null, 512),
-            o("div", {
+            n("div", {
               ref_key: "infoBarAnchor",
               ref: k,
               "data-tooltip-legend-anchor": ""
             }, null, 512)
           ])) : w("", !0),
-          o("div", {
+          n("div", {
             ref_key: "containerRef",
             ref: u,
             style: { position: "relative", flex: "1", "min-width": "0", "min-height": "0", overflow: "hidden" }
@@ -184,36 +191,36 @@ const ae = { style: { display: "flex", "flex-direction": "row", flex: "1", "min-
               "data-chart-top-overlay": "",
               style: { position: "absolute", top: "0", left: "0", right: "0", "z-index": "2", "pointer-events": "none", display: "flex", "flex-direction": "column" }
             }, [
-              o("div", {
+              n("div", {
                 ref_key: "titleAnchor",
                 ref: R,
                 "data-chart-title-anchor": ""
               }, null, 512),
-              o("div", {
+              n("div", {
                 ref_key: "infoBarAnchor",
                 ref: k,
                 "data-tooltip-legend-anchor": ""
               }, null, 512)
             ], 512)) : w("", !0),
-            a.value ? (y(), m("div", re, [
+            i.value ? (y(), m("div", re, [
               J(t.$slots, "default")
             ])) : w("", !0)
           ], 512)
         ]),
-        o("div", {
+        n("div", {
           ref_key: "legendRightAnchor",
           ref: E,
           "data-legend-right-anchor": "",
           style: { flex: "0 0 auto" }
         }, null, 512)
       ]),
-      o("div", {
+      n("div", {
         ref_key: "legendAnchor",
         ref: _,
         "data-legend-anchor": "",
         style: { flex: "0 0 auto" }
       }, null, 512),
-      o("div", {
+      n("div", {
         ref_key: "navigatorAnchor",
         ref: B,
         "data-navigator-anchor": "",
@@ -223,5 +230,5 @@ const ae = { style: { display: "flex", "flex-direction": "row", flex: "1", "min-
   }
 });
 export {
-  ce as default
+  ve as default
 };

package/dist/LineSeries.vue.js

@@ -1,50 +1,52 @@
-import { defineComponent as u, ref as p, onMounted as d, onUnmounted as c, watch as n, createCommentVNode as f } from "vue";
-import { toLayers as m, EMPTY_SYNC_STATE as v, syncLayers as y } from "./core/dist/data/sync.js";
-import { LineSeriesDef as S } from "./core/dist/series/line.js";
+import { defineComponent as u, ref as c, onMounted as d, onUnmounted as p, watch as n, createCommentVNode as f } from "vue";
+import { toLayers as m, EMPTY_SYNC_STATE as v, syncLayers as S } from "./core/dist/data/sync.js";
+import { LineSeriesDef as y } from "./core/dist/series/line.js";
 import { useChartInstance as _ } from "./context.js";
-const E = /* @__PURE__ */ u({
+const T = /* @__PURE__ */ u({
   __name: "LineSeries",
   props: {
     data: {},
     options: {},
     id: {},
-    visible: { type: Boolean, default: !0 }
+    visible: { type: Boolean, default: !0 },
+    scale: {}
   },
   setup(l) {
-    const a = l, s = _(), r = p(null);
+    const a = l, r = _(), s = c(null);
     let i = [];
     function o(e, t) {
-      i = y({ chart: s, id: e, data: t, prev: i });
+      i = S({ chart: r, id: e, data: t, prev: i });
     }
     return d(() => {
-      const e = m(a.data).length, t = s.addSeries(S, {
+      const e = m(a.data).length, t = r.addSeries(y, {
         ...a.options,
+        scale: a.scale,
         layers: e,
         id: a.id
       });
-      r.value = t, i = new Array(e).fill(v), o(t, a.data), s.setSeriesVisible(t, a.visible);
-    }), c(() => {
-      r.value && s.removeSeries(r.value);
+      s.value = t, i = new Array(e).fill(v), o(t, a.data), r.setSeriesVisible(t, a.visible);
+    }), p(() => {
+      s.value && r.removeSeries(s.value);
     }), n(
       () => a.data,
       (e) => {
-        const t = r.value;
+        const t = s.value;
         t && o(t, e);
       }
     ), n(
-      () => a.options,
-      (e) => {
-        r.value && e && s.updateSeriesOptions(r.value, e);
+      () => [a.options, a.scale],
+      ([e, t]) => {
+        s.value && r.updateSeriesOptions(s.value, e ? { ...e, scale: t } : { scale: t });
       },
       { deep: !0 }
     ), n(
       () => a.visible,
       (e) => {
-        r.value && s.setSeriesVisible(r.value, e);
+        s.value && r.setSeriesVisible(s.value, e);
       }
     ), (e, t) => f("", !0);
   }
 });
 export {
-  E as default
+  T as default
 };