vue-data-ui 2.3.84 → 2.3.85

package/dist/{vue-ui-xy-Ct-9OxiZ.js → vue-ui-xy-DgEdZz0O.js}

@@ -1,17 +1,17 @@
 import { p as Q } from "./pdf-97UbtKC2.js";
-import { U as K, s as j } from "./usePrinter-D9bNzUQP.js";
-import { c as J, a as $, t as ee, z as te, p as ae, T as X, N as P, f as Z, I as ie, F as le, i as re, Z as se, W as ne, _ as he, v as ce, $ as oe, d as de, B as ue, b as ge, q as fe, Q as Ne, a0 as me, r as Ie, e as xe, y as be, L as Fe, x as _e, a1 as ye, o as Ae, s as Le, w as Ce, E as Se, A as ke, u as we } from "./index-DI4DaxVG.js";
-import { D as Oe } from "./DataTable-C-iU_7h7.js";
-import { _ as ve } from "./Title-Bk3h09h9.js";
-import { _ as Ge, u as pe } from "./Tooltip-CdB80DsD.js";
-import { _ as ze } from "./Shape-CyM44biU.js";
-import Me from "./BaseIcon-B9ZZ6wkT.js";
-import Pe from "./vue-ui-table-sparkline-BakiSjV4.js";
-import Te from "./vue-ui-skeleton-DH4t1hrL.js";
-import { S as Ve } from "./Slicer-CZobytqL.js";
-import Re from "./vue-ui-accordion-DsN9lxvc.js";
-import { u as U } from "./useNestedProp-COsQo-tX.js";
-import { resolveComponent as T, openBlock as l, createElementBlock as r, normalizeClass as M, normalizeStyle as C, createBlock as V, createCommentVNode as o, createSlots as De, withCtx as p, renderSlot as O, normalizeProps as B, guardReactiveProps as Y, createElementVNode as u, Fragment as N, renderList as I, toDisplayString as S, createVNode as q, withDirectives as He, vModelCheckbox as We, createTextVNode as Ee } from "vue";
+import { U as K, s as j } from "./usePrinter-Do8KiK5h.js";
+import { c as J, a as $, t as ee, z as te, p as ae, T as X, N as T, f as Z, I as ie, F as le, i as re, Z as se, W as ne, _ as ce, v as he, $ as oe, d as de, B as ue, b as ge, q as fe, Q as me, a0 as Ne, r as Ie, e as xe, y as be, L as Fe, x as _e, a1 as ye, o as Ae, s as Le, w as Ce, E as Se, A as ke, u as we } from "./index-BiuHBtkZ.js";
+import { D as Oe } from "./DataTable-MkG5Dqrn.js";
+import { _ as ve } from "./Title-ISDbzCH8.js";
+import { _ as Ge, u as pe } from "./Tooltip-BHmMXOej.js";
+import { _ as ze } from "./Shape-BFiZBf3X.js";
+import Me from "./BaseIcon-BysUnfCR.js";
+import Te from "./vue-ui-table-sparkline-Dg2RKv6f.js";
+import Pe from "./vue-ui-skeleton-Du4zw-c1.js";
+import { S as Ve } from "./Slicer-CALc-Q4W.js";
+import Re from "./vue-ui-accordion-D2fhyKpk.js";
+import { u as U } from "./useNestedProp-Ck5_RzLu.js";
+import { resolveComponent as P, openBlock as l, createElementBlock as r, normalizeClass as M, normalizeStyle as A, createBlock as V, createCommentVNode as o, createSlots as De, withCtx as p, renderSlot as O, normalizeProps as B, guardReactiveProps as Y, createElementVNode as u, Fragment as m, renderList as I, toDisplayString as S, createVNode as q, withDirectives as He, vModelCheckbox as We, createTextVNode as Ee } from "vue";
 import { _ as Be } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const Ye = J(), Xe = {
   name: "vue-ui-xy",
@@ -36,21 +36,21 @@ const Ye = J(), Xe = {
     Tooltip: Ge,
     UserOptions: K,
     BaseIcon: Me,
-    TableSparkline: Pe,
-    Skeleton: Te,
+    TableSparkline: Te,
+    Skeleton: Pe,
     Slicer: Ve,
     Accordion: Re
   },
   data() {
-    this.dataset.forEach((c, f) => {
-      [null, void 0].includes(c.series) && this.error({
+    this.dataset.forEach((h, f) => {
+      [null, void 0].includes(h.series) && this.error({
         componentName: "VueUiXy",
         type: "datasetSerieAttribute",
         property: "series (number[])",
         index: f
       });
     });
-    const a = Math.max(...this.dataset.map((c) => c.series.length)), s = {
+    const a = Math.max(...this.dataset.map((h) => h.series.length)), s = {
       start: 0,
       end: a
     };
@@ -122,7 +122,7 @@ const Ye = J(), Xe = {
   watch: {
     dataset: {
       handler(a, s) {
-        this.maxX = Math.max(...this.dataset.map((c) => c.series.length)), this.slicer = {
+        this.maxX = Math.max(...this.dataset.map((h) => h.series.length)), this.slicer = {
           start: 0,
           end: this.maxX
         }, this.slicerStep += 1, this.segregateStep += 1;
@@ -139,11 +139,11 @@ const Ye = J(), Xe = {
   computed: {
     minimap() {
       if (!this.FINAL_CONFIG.chart.zoom.minimap.show) return [];
-      const a = this.datasetWithIds.filter((i) => !this.segregatedSeries.includes(i.id)), s = Math.max(...a.map((i) => i.series.length)), c = [];
+      const a = this.datasetWithIds.filter((i) => !this.segregatedSeries.includes(i.id)), s = Math.max(...a.map((i) => i.series.length)), h = [];
       for (let i = 0; i < s; i += 1)
-        c.push(a.map((e) => e.series[i] || 0).reduce((e, x) => (e || 0) + (x || 0), 0));
-      const f = Math.min(...c);
-      return c.map((i) => i + (f < 0 ? Math.abs(f) : 0));
+        h.push(a.map((e) => e.series[i] || 0).reduce((e, x) => (e || 0) + (x || 0), 0));
+      const f = Math.min(...h);
+      return h.map((i) => i + (f < 0 ? Math.abs(f) : 0));
     },
     customPalette() {
       return this.convertCustomPalette(this.FINAL_CONFIG.customPalette);
@@ -178,7 +178,7 @@ const Ye = J(), Xe = {
         id: i.id,
         yOffset: i.yOffset || 0,
         individualHeight: i.individualHeight || this.drawingArea.height
-      })), c = this.plotSet.map((i) => ({
+      })), h = this.plotSet.map((i) => ({
         name: i.name,
         color: i.color,
         scale: i.individualScale,
@@ -190,8 +190,8 @@ const Ye = J(), Xe = {
         id: i.id,
         yOffset: i.yOffset || 0,
         individualHeight: i.individualHeight || this.drawingArea.height
-      })), f = [...a, ...s, ...c].flatMap((i) => i).length;
-      return [...a, ...s, ...c].flatMap((i, e) => ({
+      })), f = [...a, ...s, ...h].flatMap((i) => i).length;
+      return [...a, ...s, ...h].flatMap((i, e) => ({
         id: i.id,
         scaleLabel: i.scaleLabel,
         name: i.name,
@@ -251,7 +251,7 @@ const Ye = J(), Xe = {
     safeDataset() {
       return this.useSafeValues ? this.dataset.map((a, s) => ({
         ...a,
-        series: a.series.map((c) => this.isSafeValue(c) ? c : null).slice(this.slicer.start, this.slicer.end),
+        series: a.series.map((h) => this.isSafeValue(h) ? h : null).slice(this.slicer.start, this.slicer.end),
         color: this.convertColorToHex(a.color ? a.color : this.customPalette[s] ? this.customPalette[s] : this.palette[s]),
         id: `uniqueId_${s}`
       })) : this.dataset;
@@ -259,13 +259,13 @@ const Ye = J(), Xe = {
     relativeDataset() {
       return this.safeDataset.map((a, s) => ({
         ...a,
-        series: a.series.map((c) => c + this.relativeZero),
+        series: a.series.map((h) => h + this.relativeZero),
         absoluteValues: a.series
       })).filter((a) => !this.segregatedSeries.includes(a.id));
     },
     tableSparklineDataset() {
       return this.relativeDataset.map((a) => {
-        const s = a.absoluteValues.map((c) => [void 0, null].includes(c) ? 0 : c);
+        const s = a.absoluteValues.map((h) => [void 0, null].includes(h) ? 0 : h);
         return {
           id: a.id,
           name: a.name,
@@ -304,7 +304,7 @@ const Ye = J(), Xe = {
       return this.safeDataset.map((a, s) => ({
         absoluteIndex: s,
         ...a,
-        series: a.series.map((c) => c + this.relativeZero),
+        series: a.series.map((h) => h + this.relativeZero),
         absoluteValues: a.series,
         segregate: () => this.segregate(a),
         isSegregated: this.segregatedSeries.includes(a.id)
@@ -313,14 +313,14 @@ const Ye = J(), Xe = {
     barSet() {
       return this.activeSeriesWithStackRatios.filter((a) => a.type === "bar").map((a, s) => {
         this.checkAutoScaleError(a);
-        const c = Math.min(...a.absoluteValues.filter((d) => ![null, void 0].includes(d))), f = Math.max(...a.absoluteValues.filter((d) => ![null, void 0].includes(d))), e = {
-          ratios: a.absoluteValues.filter((d) => ![null, void 0].includes(d)).map((d) => (d - c) / (f - c)),
-          valueMin: c,
+        const h = Math.min(...a.absoluteValues.filter((d) => ![null, void 0].includes(d))), f = Math.max(...a.absoluteValues.filter((d) => ![null, void 0].includes(d))), e = {
+          ratios: a.absoluteValues.filter((d) => ![null, void 0].includes(d)).map((d) => (d - h) / (f - h)),
+          valueMin: h,
           valueMax: f < 0 ? 0 : f
         }, x = {
           max: a.scaleMax || Math.max(...a.absoluteValues) || 1,
           min: a.scaleMin || Math.min(...a.absoluteValues.filter((d) => ![void 0, null].includes(d))) > 0 ? 0 : Math.min(...a.absoluteValues.filter((d) => ![null, void 0].includes(d)))
-        }, _ = a.scaleSteps || this.FINAL_CONFIG.chart.grid.labels.yAxis.commonScaleSteps, A = 1.0000001, m = this.calculateNiceScaleWithExactExtremes(x.min, x.max === x.min ? x.max * A : x.max, _), L = this.calculateNiceScaleWithExactExtremes(e.valueMin, e.valueMax === e.valueMin ? e.valueMax * A : e.valueMax, _), z = m.min >= 0 ? 0 : Math.abs(m.min), k = 0, G = m.max + z, v = L.max + Math.abs(k), b = this.mutableConfig.isStacked ? this.drawingArea.height * (1 - a.cumulatedStackRatio) : 0, t = this.mutableConfig.isStacked ? this.drawingArea.height * a.stackRatio - this.FINAL_CONFIG.chart.grid.labels.yAxis.gap : this.drawingArea.height, h = this.drawingArea.bottom - b - t * z / G, n = this.drawingArea.bottom - b - t * k / v, g = this.absoluteDataset.filter((d) => d.type === "bar").filter((d) => !this.segregatedSeries.includes(d.id)).length, R = a.series.map((d, F) => {
+        }, _ = a.scaleSteps || this.FINAL_CONFIG.chart.grid.labels.yAxis.commonScaleSteps, L = 1.0000001, N = this.calculateNiceScaleWithExactExtremes(x.min, x.max === x.min ? x.max * L : x.max, _), C = this.calculateNiceScaleWithExactExtremes(e.valueMin, e.valueMax === e.valueMin ? e.valueMax * L : e.valueMax, _), z = N.min >= 0 ? 0 : Math.abs(N.min), k = 0, G = N.max + z, v = C.max + Math.abs(k), b = this.mutableConfig.isStacked ? this.drawingArea.height * (1 - a.cumulatedStackRatio) : 0, t = this.mutableConfig.isStacked ? this.drawingArea.height * a.stackRatio - this.FINAL_CONFIG.chart.grid.labels.yAxis.gap : this.drawingArea.height, c = this.drawingArea.bottom - b - t * z / G, n = this.drawingArea.bottom - b - t * k / v, g = this.absoluteDataset.filter((d) => d.type === "bar").filter((d) => !this.segregatedSeries.includes(d.id)).length, R = a.series.map((d, F) => {
           const W = this.mutableConfig.useIndividualScale ? (a.absoluteValues[F] + z) / G : this.ratioToMax(d), E = this.mutableConfig.useIndividualScale && this.mutableConfig.isStacked ? this.drawingArea.left + this.drawingArea.width / this.maxSeries * F : this.drawingArea.left + this.slot.bar * s + this.slot.bar * F * g - this.barSlot / 2 - s * this.barPeriodGap;
           return {
             yOffset: this.checkNaN(b),
@@ -328,11 +328,11 @@ const Ye = J(), Xe = {
             x: this.checkNaN(E),
             y: this.drawingArea.bottom - b - t * W,
             value: a.absoluteValues[F],
-            zeroPosition: this.checkNaN(h),
+            zeroPosition: this.checkNaN(c),
             individualMax: this.checkNaN(G),
             comment: a.comments && a.comments.slice(this.slicer.start, this.slicer.end)[F] || ""
           };
-        }), H = a.absoluteValues.map((d) => L.min >= 0 ? (d - Math.abs(L.min)) / (L.max - Math.abs(L.min)) : (d + Math.abs(L.min)) / (L.max + Math.abs(L.min))), D = a.series.map((d, F) => {
+        }), H = a.absoluteValues.map((d) => C.min >= 0 ? (d - Math.abs(C.min)) / (C.max - Math.abs(C.min)) : (d + Math.abs(C.min)) / (C.max + Math.abs(C.min))), D = a.series.map((d, F) => {
           const W = this.mutableConfig.useIndividualScale && this.mutableConfig.isStacked ? this.drawingArea.left + this.drawingArea.width / this.maxSeries * F : this.drawingArea.left - this.slot.bar / 2 + this.slot.bar * s + this.slot.bar * F * this.absoluteDataset.filter((E) => E.type === "bar").filter((E) => !this.segregatedSeries.includes(E.id)).length;
           return {
             yOffset: this.checkNaN(b),
@@ -340,18 +340,18 @@ const Ye = J(), Xe = {
             x: this.checkNaN(W),
             y: this.checkNaN(this.drawingArea.bottom - this.checkNaN(b) - (this.checkNaN(t) * H[F] || 0)),
             value: a.absoluteValues[F],
-            zeroPosition: this.checkNaN(h),
+            zeroPosition: this.checkNaN(c),
             individualMax: this.checkNaN(G),
             comment: a.comments && a.comments.slice(this.slicer.start, this.slicer.end)[F] || ""
           };
-        }), y = m.ticks.map((d) => ({
-          y: d >= 0 ? h - t * (d / G) : h + t * Math.abs(d) / G,
+        }), y = N.ticks.map((d) => ({
+          y: d >= 0 ? c - t * (d / G) : c + t * Math.abs(d) / G,
           value: d,
           prefix: a.prefix || this.FINAL_CONFIG.chart.labels.prefix,
           suffix: a.suffix || this.FINAL_CONFIG.chart.labels.suffix,
           datapoint: a
-        })), w = L.ticks.map((d) => {
-          const F = (d - L.min) / (L.max - L.min);
+        })), w = C.ticks.map((d) => {
+          const F = (d - C.min) / (C.max - C.min);
           return {
             y: d >= 0 ? n - t * F : n + t * F,
             value: d,
@@ -366,9 +366,9 @@ const Ye = J(), Xe = {
           autoScaleYLabels: w,
           individualHeight: t,
           scaleYLabels: a.autoScaling ? w : y,
-          individualScale: a.autoScaling ? L : m,
+          individualScale: a.autoScaling ? C : N,
           individualMax: a.autoScaling ? v : G,
-          zeroPosition: a.autoScaling ? n : h,
+          zeroPosition: a.autoScaling ? n : c,
           plots: a.autoScaling ? D : R
         };
       });
@@ -382,22 +382,22 @@ const Ye = J(), Xe = {
     lineSet() {
       return this.activeSeriesWithStackRatios.filter((a) => a.type === "line").map((a) => {
         this.checkAutoScaleError(a);
-        const s = Math.min(...a.absoluteValues.filter((d) => ![void 0, null].includes(d))), c = Math.max(...a.absoluteValues.filter((d) => ![void 0, null].includes(d))) || 1, i = {
-          ratios: a.absoluteValues.filter((d) => ![null, void 0].includes(d)).map((d) => (d - s) / (c - s)),
+        const s = Math.min(...a.absoluteValues.filter((d) => ![void 0, null].includes(d))), h = Math.max(...a.absoluteValues.filter((d) => ![void 0, null].includes(d))) || 1, i = {
+          ratios: a.absoluteValues.filter((d) => ![null, void 0].includes(d)).map((d) => (d - s) / (h - s)),
           valueMin: s,
-          valueMax: c
+          valueMax: h
         }, e = {
           max: a.scaleMax || Math.max(...a.absoluteValues) || 1,
           min: a.scaleMin || (Math.min(...a.absoluteValues) > 0 ? 0 : Math.min(...a.absoluteValues))
-        }, x = a.scaleSteps || this.FINAL_CONFIG.chart.grid.labels.yAxis.commonScaleSteps, _ = 1.0000001, A = this.calculateNiceScaleWithExactExtremes(e.min, e.max === e.min ? e.max * _ : e.max, x), m = this.calculateNiceScaleWithExactExtremes(i.valueMin, i.valueMax === i.valueMin ? i.valueMax * _ : i.valueMax, x), L = A.min >= 0 ? 0 : Math.abs(A.min), z = 0, k = A.max + Math.abs(L), G = m.max + Math.abs(z), v = this.mutableConfig.isStacked ? this.drawingArea.height * (1 - a.cumulatedStackRatio) : 0, b = this.mutableConfig.isStacked ? this.drawingArea.height * a.stackRatio - this.FINAL_CONFIG.chart.grid.labels.yAxis.gap : this.drawingArea.height, t = this.drawingArea.bottom - v - b * L / k, h = this.drawingArea.bottom - v - b * z / G, n = a.series.map((d, F) => {
-          const W = this.mutableConfig.useIndividualScale ? (a.absoluteValues[F] + Math.abs(L)) / k : this.ratioToMax(d);
+        }, x = a.scaleSteps || this.FINAL_CONFIG.chart.grid.labels.yAxis.commonScaleSteps, _ = 1.0000001, L = this.calculateNiceScaleWithExactExtremes(e.min, e.max === e.min ? e.max * _ : e.max, x), N = this.calculateNiceScaleWithExactExtremes(i.valueMin, i.valueMax === i.valueMin ? i.valueMax * _ : i.valueMax, x), C = L.min >= 0 ? 0 : Math.abs(L.min), z = 0, k = L.max + Math.abs(C), G = N.max + Math.abs(z), v = this.mutableConfig.isStacked ? this.drawingArea.height * (1 - a.cumulatedStackRatio) : 0, b = this.mutableConfig.isStacked ? this.drawingArea.height * a.stackRatio - this.FINAL_CONFIG.chart.grid.labels.yAxis.gap : this.drawingArea.height, t = this.drawingArea.bottom - v - b * C / k, c = this.drawingArea.bottom - v - b * z / G, n = a.series.map((d, F) => {
+          const W = this.mutableConfig.useIndividualScale ? (a.absoluteValues[F] + Math.abs(C)) / k : this.ratioToMax(d);
           return {
             x: this.checkNaN(this.drawingArea.left + this.slot.line / 2 + this.slot.line * F),
             y: this.checkNaN(this.drawingArea.bottom - v - b * W),
             value: a.absoluteValues[F],
             comment: a.comments && a.comments.slice(this.slicer.start, this.slicer.end)[F] || ""
           };
-        }), g = a.absoluteValues.map((d) => m.min >= 0 ? (d - Math.abs(m.min)) / (m.max - Math.abs(m.min)) : (d + Math.abs(m.min)) / (m.max + Math.abs(m.min))), R = a.series.map((d, F) => {
+        }), g = a.absoluteValues.map((d) => N.min >= 0 ? (d - Math.abs(N.min)) / (N.max - Math.abs(N.min)) : (d + Math.abs(N.min)) / (N.max + Math.abs(N.min))), R = a.series.map((d, F) => {
           if (![void 0, null].includes(a.absoluteValues[F]))
             return {
               x: this.checkNaN(this.drawingArea.left + this.slot.line / 2 + this.slot.line * F),
@@ -405,16 +405,16 @@ const Ye = J(), Xe = {
               value: a.absoluteValues[F],
               comment: a.comments && a.comments.slice(this.slicer.start, this.slicer.end)[F] || ""
             };
-        }), H = this.createSmoothPath(n), D = this.createSmoothPath(R), y = A.ticks.map((d) => ({
+        }), H = this.createSmoothPath(n), D = this.createSmoothPath(R), y = L.ticks.map((d) => ({
           y: d >= 0 ? t - b * (d / k) : t + b * Math.abs(d) / k,
           value: d,
           prefix: a.prefix || this.FINAL_CONFIG.chart.labels.prefix,
           suffix: a.suffix || this.FINAL_CONFIG.chart.labels.suffix,
           datapoint: a
-        })), w = m.ticks.map((d) => {
-          const F = (d - m.min) / (m.max - m.min);
+        })), w = N.ticks.map((d) => {
+          const F = (d - N.min) / (N.max - N.min);
           return {
-            y: d >= 0 ? h - b * F : h + b * F,
+            y: d >= 0 ? c - b * F : c + b * F,
             value: d,
             prefix: a.prefix || this.FINAL_CONFIG.chart.labels.prefix,
             suffix: a.suffix || this.FINAL_CONFIG.chart.labels.suffix,
@@ -427,48 +427,48 @@ const Ye = J(), Xe = {
           autoScaleYLabels: w,
           individualHeight: b,
           scaleYLabels: a.autoScaling ? w : y,
-          individualScale: a.autoScaling ? m : A,
+          individualScale: a.autoScaling ? N : L,
           individualMax: a.autoScaling ? G : k,
-          zeroPosition: a.autoScaling ? h : t,
+          zeroPosition: a.autoScaling ? c : t,
           curve: a.autoScaling ? D : H,
           plots: a.autoScaling ? R : n,
-          area: a.useArea ? this.mutableConfig.useIndividualScale ? this.createIndividualArea(a.autoScaling ? R : n, a.autoScaling ? h : t) : this.createArea(n) : ""
+          area: a.useArea ? this.mutableConfig.useIndividualScale ? this.createIndividualArea(a.autoScaling ? R : n, a.autoScaling ? c : t) : this.createArea(n) : ""
         };
       });
     },
     plotSet() {
       return this.activeSeriesWithStackRatios.filter((a) => a.type === "plot").map((a) => {
         this.checkAutoScaleError(a);
-        const s = Math.min(...a.absoluteValues.filter((y) => ![null, void 0].includes(y))), c = Math.max(...a.absoluteValues.filter((y) => ![null, void 0].includes(y))) || 1, i = {
-          ratios: a.absoluteValues.filter((y) => ![null, void 0].includes(y)).map((y) => (y - s) / (c - s)),
+        const s = Math.min(...a.absoluteValues.filter((y) => ![null, void 0].includes(y))), h = Math.max(...a.absoluteValues.filter((y) => ![null, void 0].includes(y))) || 1, i = {
+          ratios: a.absoluteValues.filter((y) => ![null, void 0].includes(y)).map((y) => (y - s) / (h - s)),
           valueMin: s,
-          valueMax: c
+          valueMax: h
         }, e = {
           max: a.scaleMax || Math.max(...a.absoluteValues) || 1,
           min: a.scaleMin || Math.min(...a.absoluteValues) > 0 ? 0 : Math.min(...a.absoluteValues)
-        }, x = a.scaleSteps || this.FINAL_CONFIG.chart.grid.labels.yAxis.commonScaleSteps, _ = 1.0000001, A = this.calculateNiceScaleWithExactExtremes(e.min, e.max === e.min ? e.max * _ : e.max, x), m = this.calculateNiceScaleWithExactExtremes(i.valueMin, i.valueMax === i.valueMin ? i.valueMax * _ : i.valueMax, x), L = A.min >= 0 ? 0 : Math.abs(A.min), z = 0, k = A.max + L, G = m.max + Math.abs(z), v = this.mutableConfig.isStacked ? this.drawingArea.height * (1 - a.cumulatedStackRatio) : 0, b = this.mutableConfig.isStacked ? this.drawingArea.height * a.stackRatio - this.FINAL_CONFIG.chart.grid.labels.yAxis.gap : this.drawingArea.height, t = this.drawingArea.bottom - v - b * L / k, h = this.drawingArea.bottom - v - b * z / G, n = a.series.map((y, w) => {
-          const d = this.mutableConfig.useIndividualScale ? (a.absoluteValues[w] + Math.abs(L)) / k : this.ratioToMax(y);
+        }, x = a.scaleSteps || this.FINAL_CONFIG.chart.grid.labels.yAxis.commonScaleSteps, _ = 1.0000001, L = this.calculateNiceScaleWithExactExtremes(e.min, e.max === e.min ? e.max * _ : e.max, x), N = this.calculateNiceScaleWithExactExtremes(i.valueMin, i.valueMax === i.valueMin ? i.valueMax * _ : i.valueMax, x), C = L.min >= 0 ? 0 : Math.abs(L.min), z = 0, k = L.max + C, G = N.max + Math.abs(z), v = this.mutableConfig.isStacked ? this.drawingArea.height * (1 - a.cumulatedStackRatio) : 0, b = this.mutableConfig.isStacked ? this.drawingArea.height * a.stackRatio - this.FINAL_CONFIG.chart.grid.labels.yAxis.gap : this.drawingArea.height, t = this.drawingArea.bottom - v - b * C / k, c = this.drawingArea.bottom - v - b * z / G, n = a.series.map((y, w) => {
+          const d = this.mutableConfig.useIndividualScale ? (a.absoluteValues[w] + Math.abs(C)) / k : this.ratioToMax(y);
           return {
             x: this.checkNaN(this.drawingArea.left + this.slot.plot / 2 + this.slot.plot * w),
             y: this.checkNaN(this.drawingArea.bottom - v - b * d),
             value: a.absoluteValues[w],
             comment: a.comments && a.comments.slice(this.slicer.start, this.slicer.end)[w] || ""
           };
-        }), g = a.absoluteValues.map((y) => m.min >= 0 ? (y - Math.abs(m.min)) / (m.max - Math.abs(m.min)) : (y + Math.abs(m.min)) / (m.max + Math.abs(m.min))), R = a.series.map((y, w) => ({
+        }), g = a.absoluteValues.map((y) => N.min >= 0 ? (y - Math.abs(N.min)) / (N.max - Math.abs(N.min)) : (y + Math.abs(N.min)) / (N.max + Math.abs(N.min))), R = a.series.map((y, w) => ({
           x: this.checkNaN(this.drawingArea.left + this.slot.plot / 2 + this.slot.plot * w),
           y: this.checkNaN(this.drawingArea.bottom - v - (b * g[w] || 0)),
           value: a.absoluteValues[w],
           comment: a.comments && a.comments.slice(this.slicer.start, this.slicer.end)[w] || ""
-        })), H = A.ticks.map((y) => ({
+        })), H = L.ticks.map((y) => ({
           y: y >= 0 ? t - b * (y / k) : t + b * Math.abs(y) / k,
           value: y,
           prefix: a.prefix || this.FINAL_CONFIG.chart.labels.prefix,
           suffix: a.suffix || this.FINAL_CONFIG.chart.labels.suffix,
           datapoint: a
-        })), D = m.ticks.map((y) => {
-          const w = (y - m.min) / (m.max - m.min);
+        })), D = N.ticks.map((y) => {
+          const w = (y - N.min) / (N.max - N.min);
           return {
-            y: y >= 0 ? h - b * w : h + b * w,
+            y: y >= 0 ? c - b * w : c + b * w,
             value: y,
             prefix: a.prefix || this.FINAL_CONFIG.chart.labels.prefix,
             suffix: a.suffix || this.FINAL_CONFIG.chart.labels.suffix,
@@ -481,9 +481,9 @@ const Ye = J(), Xe = {
           autoScaleYLabels: D,
           individualHeight: b,
           scaleYLabels: a.autoScaling ? D : H,
-          individualScale: a.autoScaling ? m : A,
+          individualScale: a.autoScaling ? N : L,
           individualMax: a.autoScaling ? G : k,
-          zeroPosition: a.autoScaling ? h : t,
+          zeroPosition: a.autoScaling ? c : t,
           plots: a.autoScaling ? R : n
         };
       });
@@ -536,13 +536,13 @@ const Ye = J(), Xe = {
     },
     table() {
       if (this.safeDataset.length === 0) return { head: [], body: [], config: {}, columnNames: [] };
-      const a = this.relativeDataset.map((c) => ({
-        label: c.name,
-        color: c.color,
-        type: c.type
+      const a = this.relativeDataset.map((h) => ({
+        label: h.name,
+        color: h.color,
+        type: h.type
       })), s = [];
-      return this.timeLabels.forEach((c, f) => {
-        const i = [c];
+      return this.timeLabels.forEach((h, f) => {
+        const i = [h];
         this.relativeDataset.forEach((e) => {
           i.push(this.canShowValue(e.absoluteValues[f]) ? Number(e.absoluteValues[f].toFixed(this.FINAL_CONFIG.table.rounding)) : "");
         }), s.push(i);
@@ -552,10 +552,10 @@ const Ye = J(), Xe = {
       const a = this.FINAL_CONFIG.table.showSum;
       let s = [""].concat(this.relativeDataset.map((e) => e.name));
       a && (s = s.concat(' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>'));
-      let c = [];
+      let h = [];
       for (let e = 0; e < this.maxSeries; e += 1) {
-        const x = this.relativeDataset.map((_) => _.absoluteValues[e] ?? 0).reduce((_, A) => _ + A, 0);
-        c.push(
+        const x = this.relativeDataset.map((_) => _.absoluteValues[e] ?? 0).reduce((_, L) => _ + L, 0);
+        h.push(
           [
             this.timeLabels[e] ?? "-"
           ].concat(this.relativeDataset.map(
@@ -585,7 +585,7 @@ const Ye = J(), Xe = {
         },
         breakpoint: this.FINAL_CONFIG.table.responsiveBreakpoint
       }, i = [this.FINAL_CONFIG.table.columnNames.period].concat(this.relativeDataset.map((e) => e.name)).concat(this.FINAL_CONFIG.table.columnNames.total);
-      return { head: s, body: c, config: f, colNames: i };
+      return { head: s, body: h, config: f, colNames: i };
     },
     dataTooltipSlot() {
       return {
@@ -604,7 +604,7 @@ const Ye = J(), Xe = {
         name: a.name,
         color: a.color,
         type: a.type,
-        value: a.absoluteValues.find((s, c) => c === this.selectedSerieIndex),
+        value: a.absoluteValues.find((s, h) => h === this.selectedSerieIndex),
         comments: a.comments || [],
         prefix: a.prefix || this.FINAL_CONFIG.chart.labels.prefix,
         suffix: a.suffix || this.FINAL_CONFIG.chart.labels.suffix
@@ -612,7 +612,7 @@ const Ye = J(), Xe = {
     },
     tooltipContent() {
       let a = "", s = this.selectedSeries.map((i) => i.value).filter((i) => this.isSafeValue(i) && i !== null).reduce((i, e) => Math.abs(i) + Math.abs(e), 0);
-      const c = this.timeLabels[this.selectedSerieIndex], f = this.FINAL_CONFIG.chart.tooltip.customFormat;
+      const h = this.timeLabels[this.selectedSerieIndex], f = this.FINAL_CONFIG.chart.tooltip.customFormat;
       return this.isFunction(f) && this.functionReturnsString(() => f({
         seriesIndex: this.selectedSerieIndex,
         datapoint: this.selectedSeries,
@@ -629,7 +629,7 @@ const Ye = J(), Xe = {
         lines: this.lineSet,
         plots: this.plotSet,
         config: this.FINAL_CONFIG
-      }) : (c && (a += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${this.FINAL_CONFIG.chart.tooltip.borderColor}; width:100%">${c}</div>`), this.selectedSeries.forEach((i) => {
+      }) : (h && (a += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${this.FINAL_CONFIG.chart.tooltip.borderColor}; width:100%">${h}</div>`), this.selectedSeries.forEach((i) => {
         if (this.isSafeValue(i.value)) {
           let e = "", x = "";
           switch (this.icons[i.type]) {
@@ -637,7 +637,7 @@ const Ye = J(), Xe = {
               e = `<svg viewBox="0 0 12 12" height="14" width="14"><rect x="0" y="0" rx="1" stroke="none" height="12" width="12" fill="${i.color}" /></svg>`;
               break;
             case "line":
-              !i.shape || !["star", "triangle", "square", "diamond", "pentagon", "hexagon"].includes(i.shape) ? x = `<circle cx="10" cy="8" r="4" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" fill="${i.color}" />` : i.shape === "triangle" ? x = `<path d="${P({ plot: { x: 10, y: 8 }, radius: 4, sides: 3, rotation: 0.52 }).path}" fill="${i.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" />` : i.shape === "square" ? x = `<path d="${P({ plot: { x: 10, y: 8 }, radius: 4, sides: 4, rotation: 0.8 }).path}" fill="${i.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" />` : i.shape === "diamond" ? x = `<path d="${P({ plot: { x: 10, y: 8 }, radius: 4, sides: 4, rotation: 0 }).path}" fill="${i.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" />` : i.shape === "pentagon" ? x = `<path d="${P({ plot: { x: 10, y: 8 }, radius: 4, sides: 5, rotation: 0.95 }).path}" fill="${i.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" />` : i.shape === "hexagon" ? x = `<path d="${P({ plot: { x: 10, y: 8 }, radius: 4, sides: 6, rotation: 0 }).path}" fill="${i.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" />` : i.shape === "star" && (x = `<polygon stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" fill="${i.color}" points="${X({ plot: { x: 10, y: 8 }, radius: 4 })}" />`), e = `<svg viewBox="0 0 20 12" height="14" width="20"><rect rx="3" x="0" y="6" stroke="none" height="4" width="20" fill="${i.color}" />${x}</svg>`;
+              !i.shape || !["star", "triangle", "square", "diamond", "pentagon", "hexagon"].includes(i.shape) ? x = `<circle cx="10" cy="8" r="4" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" fill="${i.color}" />` : i.shape === "triangle" ? x = `<path d="${T({ plot: { x: 10, y: 8 }, radius: 4, sides: 3, rotation: 0.52 }).path}" fill="${i.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" />` : i.shape === "square" ? x = `<path d="${T({ plot: { x: 10, y: 8 }, radius: 4, sides: 4, rotation: 0.8 }).path}" fill="${i.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" />` : i.shape === "diamond" ? x = `<path d="${T({ plot: { x: 10, y: 8 }, radius: 4, sides: 4, rotation: 0 }).path}" fill="${i.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" />` : i.shape === "pentagon" ? x = `<path d="${T({ plot: { x: 10, y: 8 }, radius: 4, sides: 5, rotation: 0.95 }).path}" fill="${i.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" />` : i.shape === "hexagon" ? x = `<path d="${T({ plot: { x: 10, y: 8 }, radius: 4, sides: 6, rotation: 0 }).path}" fill="${i.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" />` : i.shape === "star" && (x = `<polygon stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" fill="${i.color}" points="${X({ plot: { x: 10, y: 8 }, radius: 4 })}" />`), e = `<svg viewBox="0 0 20 12" height="14" width="20"><rect rx="3" x="0" y="6" stroke="none" height="4" width="20" fill="${i.color}" />${x}</svg>`;
               break;
             case "plot":
               if (!i.shape || !["star", "triangle", "square", "diamond", "pentagon", "hexagon"].includes(i.shape)) {
@@ -649,23 +649,23 @@ const Ye = J(), Xe = {
                 break;
               }
               if (i.shape === "triangle") {
-                e = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${P({ plot: { x: 6, y: 6 }, radius: 6, sides: 3, rotation: 0.52 }).path}" fill="${i.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
+                e = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${T({ plot: { x: 6, y: 6 }, radius: 6, sides: 3, rotation: 0.52 }).path}" fill="${i.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
                 break;
               }
               if (i.shape === "square") {
-                e = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${P({ plot: { x: 6, y: 6 }, radius: 6, sides: 4, rotation: 0.8 }).path}" fill="${i.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
+                e = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${T({ plot: { x: 6, y: 6 }, radius: 6, sides: 4, rotation: 0.8 }).path}" fill="${i.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
                 break;
               }
               if (i.shape === "diamond") {
-                e = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${P({ plot: { x: 6, y: 6 }, radius: 5, sides: 4, rotation: 0 }).path}" fill="${i.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
+                e = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${T({ plot: { x: 6, y: 6 }, radius: 5, sides: 4, rotation: 0 }).path}" fill="${i.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
                 break;
               }
               if (i.shape === "pentagon") {
-                e = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${P({ plot: { x: 6, y: 6 }, radius: 5, sides: 5, rotation: 0.95 }).path}" fill="${i.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
+                e = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${T({ plot: { x: 6, y: 6 }, radius: 5, sides: 5, rotation: 0.95 }).path}" fill="${i.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
                 break;
               }
               if (i.shape === "hexagon") {
-                e = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${P({ plot: { x: 6, y: 6 }, radius: 5, sides: 6, rotation: 0 }).path}" fill="${i.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
+                e = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${T({ plot: { x: 6, y: 6 }, radius: 5, sides: 6, rotation: 0 }).path}" fill="${i.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
                 break;
               }
           }
@@ -719,15 +719,15 @@ const Ye = J(), Xe = {
     applyDataLabel: re,
     assignStackRatios: se,
     calcLinearProgression: ne,
-    calculateNiceScaleWithExactExtremes: he,
-    checkNaN: ce,
+    calculateNiceScaleWithExactExtremes: ce,
+    checkNaN: he,
     closestDecimal: oe,
     convertColorToHex: de,
     convertConfigColors: ue,
     convertCustomPalette: ge,
     createCsvContent: fe,
-    createSmoothPath: Ne,
-    createTSpans: me,
+    createSmoothPath: me,
+    createTSpans: Ne,
     dataLabel: Z,
     downloadCsv: Ie,
     error: xe,
@@ -744,6 +744,13 @@ const Ye = J(), Xe = {
     treeShake: ke,
     useMouse: pe,
     useNestedProp: U,
+    getHighlightAreaPosition(a) {
+      const s = this.drawingArea.left + this.drawingArea.width / this.maxSeries * (a.from - this.slicer.start), h = this.drawingArea.width / (this.slicer.end - this.slicer.start) * a.span < 0 ? 1e-5 : this.drawingArea.width / (this.slicer.end - this.slicer.start) * a.span;
+      return {
+        x: s < this.drawingArea.left ? this.drawingArea.left : s,
+        width: h
+      };
+    },
     prepareConfig() {
       const a = we().vue_ui_xy;
       if (!Object.keys(this.config || {}).length)
@@ -772,9 +779,9 @@ const Ye = J(), Xe = {
           index: s
         });
       }), this.FINAL_CONFIG.showWarnings && this.dataset.forEach((a) => {
-        a.series.forEach((s, c) => {
+        a.series.forEach((s, h) => {
           this.isSafeValue(s) || console.warn(`VueUiXy has detected an unsafe value in your dataset:
------> The serie '${a.name}' contains the value '${s}' at index ${c}.
+-----> The serie '${a.name}' contains the value '${s}' at index ${h}.
 '${s}' was converted to null to allow the chart to display.`);
         });
       }), this.mutableConfig = {
@@ -786,15 +793,15 @@ const Ye = J(), Xe = {
         isStacked: this.FINAL_CONFIG.chart.grid.labels.yAxis.stacked,
         useIndividualScale: this.FINAL_CONFIG.chart.grid.labels.yAxis.useIndividualScale
       }, this.FINAL_CONFIG.responsive) {
-        const s = this.$refs.chart.parentNode, { height: c, width: f } = s.getBoundingClientRect();
+        const s = this.$refs.chart.parentNode, { height: h, width: f } = s.getBoundingClientRect();
         let i = null, e = 0;
         this.FINAL_CONFIG.chart.title.show && (i = this.$refs.chartTitle, e = i.getBoundingClientRect().height);
         let x = null, _ = 0;
         this.FINAL_CONFIG.chart.zoom.show && this.maxX > 6 && this.isDataset && (x = this.$refs.chartSlicer.$el, _ = x.getBoundingClientRect().height);
-        let A = null, m = 0;
-        this.FINAL_CONFIG.chart.legend.show && (A = this.$refs.chartLegend, m = A.getBoundingClientRect().height), this.height = c - e - m - _, this.width = f, this.viewBox = `0 0 ${this.width < 0 ? 10 : this.width} ${this.height < 0 ? 10 : this.height}`, this.convertSizes(), new ResizeObserver((z) => {
+        let L = null, N = 0;
+        this.FINAL_CONFIG.chart.legend.show && (L = this.$refs.chartLegend, N = L.getBoundingClientRect().height), this.height = h - e - N - _, this.width = f, this.viewBox = `0 0 ${this.width < 0 ? 10 : this.width} ${this.height < 0 ? 10 : this.height}`, this.convertSizes(), new ResizeObserver((z) => {
           for (const k of z)
-            this.$refs.chartTitle && (e = this.$refs.chartTitle.getBoundingClientRect().height), this.$refs.chartSlicer && this.$refs.chartSlicer.$el && (_ = this.$refs.chartSlicer.$el.getBoundingClientRect().height), this.$refs.chartLegend && (m = this.$refs.chartLegend.getBoundingClientRect().height), this.height = k.contentBoxSize[0].blockSize - e - m - _ - 24, this.width = k.contentBoxSize[0].inlineSize, this.viewBox = `0 0 ${this.width < 0 ? 10 : this.width} ${this.height < 0 ? 10 : this.height}`, this.convertSizes();
+            this.$refs.chartTitle && (e = this.$refs.chartTitle.getBoundingClientRect().height), this.$refs.chartSlicer && this.$refs.chartSlicer.$el && (_ = this.$refs.chartSlicer.$el.getBoundingClientRect().height), this.$refs.chartLegend && (N = this.$refs.chartLegend.getBoundingClientRect().height), this.height = k.contentBoxSize[0].blockSize - e - N - _ - 24, this.width = k.contentBoxSize[0].inlineSize, this.viewBox = `0 0 ${this.width < 0 ? 10 : this.width} ${this.height < 0 ? 10 : this.height}`, this.convertSizes();
         }).observe(s);
       } else
         this.height = this.FINAL_CONFIG.chart.height, this.width = this.FINAL_CONFIG.chart.width, this.viewBox = `0 0 ${this.width} ${this.height}`, this.fontSizes.dataLabels = this.FINAL_CONFIG.chart.grid.labels.fontSize, this.fontSizes.yAxis = this.FINAL_CONFIG.chart.grid.labels.axis.fontSize, this.fontSizes.xAxis = this.FINAL_CONFIG.chart.grid.labels.xAxisLabels.fontSize, this.fontSizes.plotLabels = this.FINAL_CONFIG.chart.labels.fontSize, this.plotRadii.plot = this.FINAL_CONFIG.plot.radius, this.plotRadii.line = this.FINAL_CONFIG.line.radius;
@@ -858,25 +865,25 @@ const Ye = J(), Xe = {
     },
     createArea(a) {
       if (!a[0]) return [-10, -10, "", -10, -10];
-      const s = { x: a[0].x, y: this.zero }, c = { x: a.at(-1).x, y: this.zero }, f = [];
+      const s = { x: a[0].x, y: this.zero }, h = { x: a.at(-1).x, y: this.zero }, f = [];
       return a.forEach((i) => {
         f.push(`${i.x},${i.y} `);
-      }), [s.x, s.y, ...f, c.x, c.y].toString();
+      }), [s.x, s.y, ...f, h.x, h.y].toString();
     },
     createIndividualArea(a, s) {
       if (!a[0]) return [-10, -10, "", -10, -10];
-      const c = { x: a[0] ? a[0].x : Math.min(...a.filter((e) => !!e).map((e) => e.x)), y: s }, f = { x: a.at(-1) ? a.at(-1).x : Math.min(...a.filter((e) => !!e).map((e) => e.x)), y: s }, i = [];
+      const h = { x: a[0] ? a[0].x : Math.min(...a.filter((e) => !!e).map((e) => e.x)), y: s }, f = { x: a.at(-1) ? a.at(-1).x : Math.min(...a.filter((e) => !!e).map((e) => e.x)), y: s }, i = [];
       return a.filter((e) => !!e).forEach((e) => {
         i.push(`${e.x},${e.y} `);
-      }), [c.x, c.y, ...i, f.x, f.y].toString();
+      }), [h.x, h.y, ...i, f.x, f.y].toString();
     },
     createStar: X,
-    createPolygonPath: P,
+    createPolygonPath: T,
     fillArray(a, s) {
-      let c = Array(a).fill(0);
+      let h = Array(a).fill(0);
       for (let f = 0; f < s.length && f < a; f += 1)
-        c[f] = s[f];
-      return c;
+        h[f] = s[f];
+      return h;
     },
     refreshSlicer() {
       this.slicer = {
@@ -906,12 +913,12 @@ const Ye = J(), Xe = {
       return ![null, void 0, NaN, 1 / 0, -1 / 0].includes(a);
     },
     findClosestValue(a, s) {
-      let c = s[0], f = Math.abs(a - s[0]);
+      let h = s[0], f = Math.abs(a - s[0]);
       for (let i = 1; i < s.length; i += 1) {
         const e = Math.abs(a - s[i]);
-        e < f && s[i] < a && (c = s[i], f = e);
+        e < f && s[i] < a && (h = s[i], f = e);
       }
-      return c;
+      return h;
     },
     ratioToMax(a) {
       return a / (this.canShowValue(this.absoluteMax) ? this.absoluteMax : 1);
@@ -973,7 +980,7 @@ const Ye = J(), Xe = {
       }, 100);
     },
     generateCsv() {
-      const a = [[this.FINAL_CONFIG.chart.title.text], [this.FINAL_CONFIG.chart.title.subtitle.text], [""]], s = ["", ...this.table.head.map((e) => e.label)], c = this.table.body, f = a.concat([s]).concat(c), i = this.createCsvContent(f);
+      const a = [[this.FINAL_CONFIG.chart.title.text], [this.FINAL_CONFIG.chart.title.subtitle.text], [""]], s = ["", ...this.table.head.map((e) => e.label)], h = this.table.body, f = a.concat([s]).concat(h), i = this.createCsvContent(f);
       this.downloadCsv({ csvContent: i, title: this.FINAL_CONFIG.chart.title.text || "vue-ui-xy" });
     },
     showSpinnerImage() {
@@ -991,39 +998,39 @@ const Ye = J(), Xe = {
       }, 100);
     }
   }
-}, qe = ["id"], Ze = ["viewBox"], Ue = { key: 0 }, Je = { class: "vue-ui-xy-grid" }, Qe = ["stroke", "x1", "x2", "y1", "y2"], Ke = ["stroke", "x1", "x2", "y1", "y2"], je = { key: 1 }, $e = ["x1", "x2", "y1", "y2", "stroke"], et = ["x1", "x2", "y1", "y2", "stroke"], tt = ["x1", "x2", "y1", "y2", "stroke"], at = { key: 3 }, it = ["x1", "x2", "y1", "y2", "stroke"], lt = ["id"], rt = ["stop-color"], st = ["stop-color"], nt = ["stop-color"], ht = ["id"], ct = ["stop-color"], ot = ["stop-color"], dt = ["stop-color"], ut = ["id"], gt = ["stop-color"], ft = ["stop-color"], Nt = ["id"], mt = ["stop-color"], It = ["stop-color"], xt = ["id"], bt = ["stop-color"], Ft = ["stop-color"], _t = ["x", "y", "height", "width", "fill"], yt = ["x", "y", "width"], At = ["x", "y", "height", "width", "fill"], Lt = ["x", "y", "height", "width", "rx", "fill", "stroke", "stroke-width"], Ct = ["width", "x", "y"], St = { key: 0 }, kt = ["id"], wt = ["fill"], Ot = ["x1", "x2", "y1", "y2", "stroke", "marker-end"], vt = ["x", "y", "font-size", "fill"], Gt = ["stroke", "x1", "x2", "y1", "y2"], pt = { key: 2 }, zt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Mt = ["y", "width", "height", "fill"], Pt = ["x", "y", "width", "height", "fill"], Tt = ["x", "y", "width", "height", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin", "stroke-dasharray"], Vt = { key: 4 }, Rt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Dt = ["fill", "font-size", "transform"], Ht = ["x1", "x2", "y1", "y2", "stroke"], Wt = ["x", "y", "font-size", "fill"], Et = ["x1", "x2", "y1", "y2", "stroke"], Bt = ["x", "y", "font-size", "fill"], Yt = ["width", "x", "y"], Xt = { style: { width: "100%" } }, qt = { key: 0 }, Zt = ["id"], Ut = ["fill"], Jt = ["x1", "x2", "y1", "y2", "stroke", "marker-end"], Qt = ["x", "y", "font-size", "fill"], Kt = ["d", "stroke", "stroke-width", "stroke-dasharray"], jt = { key: 1 }, $t = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], ea = { key: 0 }, ta = ["d", "fill"], aa = ["d", "fill"], ia = ["d", "stroke", "stroke-width", "stroke-dasharray"], la = { key: 2 }, ra = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], sa = ["width", "x", "y"], na = { style: { width: "100%" } }, ha = { key: 3 }, ca = ["id"], oa = ["fill"], da = ["x1", "x2", "y1", "y2", "stroke", "marker-end"], ua = ["x", "y", "font-size", "fill"], ga = { key: 5 }, fa = ["x", "y", "font-size", "fill"], Na = ["x", "y", "font-size", "fill", "font-weight"], ma = { key: 6 }, Ia = ["x", "y", "font-size", "fill"], xa = ["x", "y"], ba = ["x", "y"], Fa = { key: 7 }, _a = ["x", "y", "font-size", "fill"], ya = ["x", "y"], Aa = ["x", "y"], La = ["x", "y", "font-size", "fill", "innerHTML"], Ca = ["x", "y", "font-size", "fill", "innerHTML"], Sa = ["x", "y", "font-size", "fill", "innerHTML"], ka = ["x", "y", "font-size", "fill", "innerHTML"], wa = ["x", "y", "width", "height", "fill", "onMouseenter"], Oa = ["font-size", "fill", "transform"], va = ["x", "y", "font-size", "fill"], Ga = { key: 9 }, pa = ["text-anchor", "font-size", "fill", "transform"], za = ["x", "y", "height", "width", "onMouseenter", "onClick"], Ma = { key: 10 }, Pa = ["x", "y"], Ta = ["cx", "cy", "r", "fill"], Va = {
+}, qe = ["id"], Ze = ["viewBox"], Ue = { key: 0 }, Je = { class: "vue-ui-xy-grid" }, Qe = ["stroke", "x1", "x2", "y1", "y2"], Ke = ["stroke", "x1", "x2", "y1", "y2"], je = { key: 1 }, $e = ["x1", "x2", "y1", "y2", "stroke"], et = ["x1", "x2", "y1", "y2", "stroke"], tt = ["x1", "x2", "y1", "y2", "stroke"], at = { key: 3 }, it = ["x1", "x2", "y1", "y2", "stroke"], lt = ["id"], rt = ["stop-color"], st = ["stop-color"], nt = ["stop-color"], ct = ["id"], ht = ["stop-color"], ot = ["stop-color"], dt = ["stop-color"], ut = ["id"], gt = ["stop-color"], ft = ["stop-color"], mt = ["id"], Nt = ["stop-color"], It = ["stop-color"], xt = ["id"], bt = ["stop-color"], Ft = ["stop-color"], _t = ["x", "y", "height", "width", "fill"], yt = ["x", "y", "width"], At = ["x", "y", "height", "width", "fill"], Lt = ["x", "y", "height", "width", "rx", "fill", "stroke", "stroke-width"], Ct = ["width", "x", "y"], St = { key: 0 }, kt = ["id"], wt = ["fill"], Ot = ["x1", "x2", "y1", "y2", "stroke", "marker-end"], vt = ["x", "y", "font-size", "fill"], Gt = ["stroke", "x1", "x2", "y1", "y2"], pt = { key: 2 }, zt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Mt = ["x", "y", "width", "height", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin", "stroke-dasharray"], Tt = { key: 4 }, Pt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Vt = ["fill", "font-size", "transform"], Rt = ["x1", "x2", "y1", "y2", "stroke"], Dt = ["x", "y", "font-size", "fill"], Ht = ["x1", "x2", "y1", "y2", "stroke"], Wt = ["x", "y", "font-size", "fill"], Et = ["width", "x", "y"], Bt = { style: { width: "100%" } }, Yt = { key: 0 }, Xt = ["id"], qt = ["fill"], Zt = ["x1", "x2", "y1", "y2", "stroke", "marker-end"], Ut = ["x", "y", "font-size", "fill"], Jt = ["d", "stroke", "stroke-width", "stroke-dasharray"], Qt = { key: 1 }, Kt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], jt = { key: 0 }, $t = ["d", "fill"], ea = ["d", "fill"], ta = ["d", "stroke", "stroke-width", "stroke-dasharray"], aa = { key: 2 }, ia = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], la = ["width", "x", "y"], ra = { style: { width: "100%" } }, sa = { key: 3 }, na = ["id"], ca = ["fill"], ha = ["x1", "x2", "y1", "y2", "stroke", "marker-end"], oa = ["x", "y", "font-size", "fill"], da = { key: 5 }, ua = ["x", "y", "font-size", "fill"], ga = ["x", "y", "font-size", "fill", "font-weight"], fa = { key: 6 }, ma = ["x", "y", "font-size", "fill"], Na = ["x", "y"], Ia = ["x", "y"], xa = { key: 7 }, ba = ["x", "y", "font-size", "fill"], Fa = ["x", "y"], _a = ["x", "y"], ya = ["x", "y", "font-size", "fill", "innerHTML"], Aa = ["x", "y", "font-size", "fill", "innerHTML"], La = ["x", "y", "font-size", "fill", "innerHTML"], Ca = ["x", "y", "font-size", "fill", "innerHTML"], Sa = ["x", "y", "width", "height", "fill", "onMouseenter"], ka = ["font-size", "fill", "transform"], wa = ["x", "y", "font-size", "fill"], Oa = { key: 9 }, va = ["text-anchor", "font-size", "fill", "transform"], Ga = ["x", "y", "height", "width", "onMouseenter", "onClick"], pa = { key: 10 }, za = ["x", "y"], Ma = ["cx", "cy", "r", "fill"], Ta = {
   key: 3,
   class: "vue-data-ui-watermark"
-}, Ra = ["onClick"], Da = {
+}, Pa = ["onClick"], Va = {
   key: 0,
   viewBox: "0 0 20 12",
   height: "14",
   width: "20"
-}, Ha = ["fill"], Wa = {
+}, Ra = ["fill"], Da = {
   key: 1,
   viewBox: "0 0 12 12",
   height: "14",
   width: "14"
-}, Ea = ["fill"], Ba = {
+}, Ha = ["fill"], Wa = {
   key: 7,
   ref: "chartLegend"
-}, Ya = {
+}, Ea = {
   style: { display: "flex", "flex-direction": "row", gap: "6px", "align-items": "center", "padding-left": "6px" },
   "data-html2canvas-ignore": ""
-}, Xa = ["innerHTML"];
-function qa(a, s, c, f, i, e) {
-  const x = T("Title"), _ = T("UserOptions"), A = T("Shape"), m = T("Skeleton"), L = T("Slicer"), z = T("Tooltip"), k = T("BaseIcon"), G = T("TableSparkline"), v = T("DataTable"), b = T("Accordion");
+}, Ba = ["innerHTML"];
+function Ya(a, s, h, f, i, e) {
+  const x = P("Title"), _ = P("UserOptions"), L = P("Shape"), N = P("Skeleton"), C = P("Slicer"), z = P("Tooltip"), k = P("BaseIcon"), G = P("TableSparkline"), v = P("DataTable"), b = P("Accordion");
   return l(), r("div", {
     id: `vue-ui-xy_${i.uniqueId}`,
     class: M(`vue-ui-xy ${i.isFullscreen ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.FINAL_CONFIG.useCssAnimation ? "" : "vue-ui-dna"}`),
     ref: "chart",
-    style: C(`background:${e.FINAL_CONFIG.chart.backgroundColor}; color:${e.FINAL_CONFIG.chart.color};width:100%;${e.FINAL_CONFIG.chart.title.text ? "" : "padding-top:36px"};font-family:${e.FINAL_CONFIG.chart.fontFamily};${e.FINAL_CONFIG.responsive ? "height: 100%" : ""}`)
+    style: A(`background:${e.FINAL_CONFIG.chart.backgroundColor}; color:${e.FINAL_CONFIG.chart.color};width:100%;${e.FINAL_CONFIG.chart.title.text ? "" : "padding-top:36px"};font-family:${e.FINAL_CONFIG.chart.fontFamily};${e.FINAL_CONFIG.responsive ? "height: 100%" : ""}`)
   }, [
     e.FINAL_CONFIG.chart.title.show ? (l(), r("div", {
       key: 0,
       ref: "chartTitle",
       class: "vue-ui-xy-title",
-      style: C(`font-family:${e.FINAL_CONFIG.chart.fontFamily}`)
+      style: A(`font-family:${e.FINAL_CONFIG.chart.fontFamily}`)
     }, [
       (l(), V(x, {
         key: `title_${i.titleStep}`,
@@ -1053,7 +1060,7 @@ function qa(a, s, c, f, i, e) {
       hasImg: e.FINAL_CONFIG.chart.userOptions.buttons.img,
       hasLabel: e.FINAL_CONFIG.chart.userOptions.buttons.labels,
       hasTable: e.FINAL_CONFIG.chart.userOptions.buttons.table,
-      hasStack: c.dataset.length > 1 && e.FINAL_CONFIG.chart.userOptions.buttons.stack,
+      hasStack: h.dataset.length > 1 && e.FINAL_CONFIG.chart.userOptions.buttons.stack,
       hasFullscreen: e.FINAL_CONFIG.chart.userOptions.buttons.fullscreen,
       isStacked: i.mutableConfig.isStacked,
       isFullscreen: i.isFullscreen,
@@ -1120,8 +1127,8 @@ function qa(a, s, c, f, i, e) {
       } : void 0,
       a.$slots.optionFullscreen ? {
         name: "optionFullscreen",
-        fn: p(({ toggleFullscreen: t, isFullscreen: h }) => [
-          O(a.$slots, "optionFullscreen", B(Y({ toggleFullscreen: t, isFullscreen: h })), void 0, !0)
+        fn: p(({ toggleFullscreen: t, isFullscreen: c }) => [
+          O(a.$slots, "optionFullscreen", B(Y({ toggleFullscreen: t, isFullscreen: c })), void 0, !0)
         ]),
         key: "7"
       } : void 0
@@ -1132,7 +1139,7 @@ function qa(a, s, c, f, i, e) {
       class: M([{ "vue-data-ui-fullscreen--on": i.isFullscreen, "vue-data-ui-fulscreen--off": !i.isFullscreen }, "vue-ui-xy-svg"]),
       width: "100%",
       viewBox: i.viewBox,
-      style: C(`background:${e.FINAL_CONFIG.chart.backgroundColor}; color:${e.FINAL_CONFIG.chart.color}; font-family:${e.FINAL_CONFIG.chart.fontFamily}`)
+      style: A(`background: transparent; color:${e.FINAL_CONFIG.chart.color}; font-family:${e.FINAL_CONFIG.chart.fontFamily}`)
     }, [
       e.maxSeries > 0 ? (l(), r("g", Ue, [
         u("g", Je, [
@@ -1146,25 +1153,25 @@ function qa(a, s, c, f, i, e) {
             y2: e.drawingArea.bottom,
             "stroke-linecap": "round"
           }, null, 8, Qe)) : o("", !0),
-          i.mutableConfig.useIndividualScale ? e.FINAL_CONFIG.chart.grid.showHorizontalLines ? (l(!0), r(N, { key: 2 }, I(e.allScales, (t) => (l(), r("g", null, [
-            t.id === i.selectedScale && t.yLabels.length ? (l(!0), r(N, { key: 0 }, I(t.yLabels, (h) => (l(), r("line", {
+          i.mutableConfig.useIndividualScale ? e.FINAL_CONFIG.chart.grid.showHorizontalLines ? (l(!0), r(m, { key: 2 }, I(e.allScales, (t) => (l(), r("g", null, [
+            t.id === i.selectedScale && t.yLabels.length ? (l(!0), r(m, { key: 0 }, I(t.yLabels, (c) => (l(), r("line", {
               x1: e.drawingArea.left + e.xPadding,
               x2: e.drawingArea.right - e.xPadding,
-              y1: e.checkNaN(h.y),
-              y2: e.checkNaN(h.y),
+              y1: e.checkNaN(c.y),
+              y2: e.checkNaN(c.y),
               stroke: t.color,
               "stroke-width": 0.5,
               "stroke-linecap": "round"
-            }, null, 8, et))), 256)) : t.yLabels.length ? (l(!0), r(N, { key: 1 }, I(t.yLabels, (h) => (l(), r("line", {
+            }, null, 8, et))), 256)) : t.yLabels.length ? (l(!0), r(m, { key: 1 }, I(t.yLabels, (c) => (l(), r("line", {
               x1: e.drawingArea.left + e.xPadding,
               x2: e.drawingArea.right - e.xPadding,
-              y1: e.checkNaN(h.y),
-              y2: e.checkNaN(h.y),
+              y1: e.checkNaN(c.y),
+              y2: e.checkNaN(c.y),
               stroke: e.FINAL_CONFIG.chart.grid.stroke,
               "stroke-width": 0.5,
               "stroke-linecap": "round"
             }, null, 8, tt))), 256)) : o("", !0)
-          ]))), 256)) : o("", !0) : (l(), r(N, { key: 1 }, [
+          ]))), 256)) : o("", !0) : (l(), r(m, { key: 1 }, [
             e.FINAL_CONFIG.chart.grid.labels.yAxis.showBaseline ? (l(), r("line", {
               key: 0,
               stroke: e.FINAL_CONFIG.chart.grid.stroke,
@@ -1176,7 +1183,7 @@ function qa(a, s, c, f, i, e) {
               "stroke-linecap": "round"
             }, null, 8, Ke)) : o("", !0),
             e.FINAL_CONFIG.chart.grid.showHorizontalLines ? (l(), r("g", je, [
-              (l(!0), r(N, null, I(e.yLabels, (t) => (l(), r("line", {
+              (l(!0), r(m, null, I(e.yLabels, (t) => (l(), r("line", {
                 x1: e.drawingArea.left + e.xPadding,
                 x2: e.drawingArea.right - e.xPadding,
                 y1: e.checkNaN(t.y),
@@ -1188,10 +1195,10 @@ function qa(a, s, c, f, i, e) {
             ])) : o("", !0)
           ], 64)),
           e.FINAL_CONFIG.chart.grid.showVerticalLines ? (l(), r("g", at, [
-            (l(!0), r(N, null, I(e.maxSeries + (e.FINAL_CONFIG.chart.grid.position === "middle" ? 1 : 0), (t, h) => (l(), r("line", {
-              key: `grid_vertical_line_${h}`,
-              x1: e.drawingArea.width / e.maxSeries * h + e.drawingArea.left + e.xPadding,
-              x2: e.drawingArea.width / e.maxSeries * h + e.drawingArea.left + e.xPadding,
+            (l(!0), r(m, null, I(e.maxSeries + (e.FINAL_CONFIG.chart.grid.position === "middle" ? 1 : 0), (t, c) => (l(), r("line", {
+              key: `grid_vertical_line_${c}`,
+              x1: e.drawingArea.width / e.maxSeries * c + e.drawingArea.left + e.xPadding,
+              x2: e.drawingArea.width / e.maxSeries * c + e.drawingArea.left + e.xPadding,
               y1: e.drawingArea.top,
               y2: e.drawingArea.bottom,
               "stroke-width": "0.5",
@@ -1199,11 +1206,11 @@ function qa(a, s, c, f, i, e) {
             }, null, 8, it))), 128))
           ])) : o("", !0)
         ]),
-        (l(!0), r(N, null, I(e.barSet, (t, h) => (l(), r("defs", {
-          key: `def_rect_${h}`
+        (l(!0), r(m, null, I(e.barSet, (t, c) => (l(), r("defs", {
+          key: `def_rect_${c}`
         }, [
           u("linearGradient", {
-            id: `rectGradient_pos_${h}_${i.uniqueId}`,
+            id: `rectGradient_pos_${c}_${i.uniqueId}`,
             x2: "0%",
             y2: "100%"
           }, [
@@ -1221,14 +1228,14 @@ function qa(a, s, c, f, i, e) {
             }, null, 8, nt)
           ], 8, lt),
           u("linearGradient", {
-            id: `rectGradient_neg_${h}_${i.uniqueId}`,
+            id: `rectGradient_neg_${c}_${i.uniqueId}`,
             x2: "0%",
             y2: "100%"
           }, [
             u("stop", {
               offset: "0%",
               "stop-color": `${e.shiftHue(t.color, 0.05)}`
-            }, null, 8, ct),
+            }, null, 8, ht),
             u("stop", {
               offset: "38%",
               "stop-color": `${e.shiftHue(t.color, 0.02)}`
@@ -1237,13 +1244,13 @@ function qa(a, s, c, f, i, e) {
               offset: "100%",
               "stop-color": t.color
             }, null, 8, dt)
-          ], 8, ht)
+          ], 8, ct)
         ]))), 128)),
-        (l(!0), r(N, null, I(e.plotSet, (t, h) => (l(), r("defs", {
-          key: `def_plot_${h}`
+        (l(!0), r(m, null, I(e.plotSet, (t, c) => (l(), r("defs", {
+          key: `def_plot_${c}`
         }, [
           u("radialGradient", {
-            id: `plotGradient_${h}_${i.uniqueId}`,
+            id: `plotGradient_${c}_${i.uniqueId}`,
             cx: "50%",
             cy: "50%",
             r: "50%",
@@ -1260,11 +1267,11 @@ function qa(a, s, c, f, i, e) {
             }, null, 8, ft)
           ], 8, ut)
         ]))), 128)),
-        (l(!0), r(N, null, I(e.lineSet, (t, h) => (l(), r("defs", {
-          key: `def_line_${h}`
+        (l(!0), r(m, null, I(e.lineSet, (t, c) => (l(), r("defs", {
+          key: `def_line_${c}`
         }, [
           u("radialGradient", {
-            id: `lineGradient_${h}_${i.uniqueId}`,
+            id: `lineGradient_${c}_${i.uniqueId}`,
             cx: "50%",
             cy: "50%",
             r: "50%",
@@ -1274,14 +1281,14 @@ function qa(a, s, c, f, i, e) {
             u("stop", {
               offset: "0%",
               "stop-color": `${e.shiftHue(t.color, 0.05)}`
-            }, null, 8, mt),
+            }, null, 8, Nt),
             u("stop", {
               offset: "100%",
               "stop-color": t.color
             }, null, 8, It)
-          ], 8, Nt),
+          ], 8, mt),
           u("linearGradient", {
-            id: `areaGradient_${h}_${i.uniqueId}`,
+            id: `areaGradient_${c}_${i.uniqueId}`,
             x1: "0%",
             x2: "100%",
             y1: "0%",
@@ -1297,50 +1304,56 @@ function qa(a, s, c, f, i, e) {
             }, null, 8, Ft)
           ], 8, xt)
         ]))), 128)),
-        (l(!0), r(N, null, I(e.highlightAreas, (t) => (l(), r("g", null, [
-          t.show ? (l(), r(N, { key: 0 }, [
+        (l(!0), r(m, null, I(e.highlightAreas, (t) => (l(), r("g", null, [
+          t.show ? (l(!0), r(m, { key: 0 }, I(t.span, (c, n) => (l(), r("g", null, [
             u("rect", {
-              style: { transition: "none" },
-              x: e.drawingArea.left + e.drawingArea.width / e.maxSeries * (t.from - i.slicer.start),
+              style: A({
+                transition: "none",
+                opacity: t.from + n >= i.slicer.start && t.from + n <= i.slicer.end - 1 ? 1 : 0
+              }),
+              x: e.drawingArea.left + e.drawingArea.width / e.maxSeries * (t.from + n - i.slicer.start),
               y: e.drawingArea.top,
               height: e.drawingArea.height < 0 ? 10 : e.drawingArea.height,
-              width: e.drawingArea.width / e.maxSeries * t.span < 0 ? 1e-5 : e.drawingArea.width / e.maxSeries * t.span,
+              width: e.drawingArea.width / e.maxSeries < 0 ? 1e-5 : e.drawingArea.width / e.maxSeries,
               fill: e.setOpacity(t.color, t.opacity)
-            }, null, 8, _t),
-            t.caption.text ? (l(), r("foreignObject", {
+            }, null, 12, _t),
+            t.caption.text && n === 0 ? (l(), r("foreignObject", {
               key: 0,
-              x: e.drawingArea.left + e.drawingArea.width / e.maxSeries * (t.from - i.slicer.start) - (t.caption.width === "auto" ? 0 : t.caption.width / 2 - e.drawingArea.width / e.maxSeries * t.span / 2),
+              x: e.drawingArea.left + e.drawingArea.width / e.maxSeries * (t.from + n - i.slicer.start) - (t.caption.width === "auto" ? 0 : t.caption.width / 2 - e.drawingArea.width / e.maxSeries * t.span / 2),
               y: e.drawingArea.top + t.caption.offsetY,
-              style: { overflow: "visible" },
+              style: A({
+                overflow: "visible",
+                opacity: t.to >= i.slicer.start && t.from < i.slicer.end ? 1 : 0
+              }),
               height: "1",
               width: t.caption.width === "auto" ? e.drawingArea.width / e.maxSeries * t.span : t.caption.width
             }, [
               u("div", {
-                style: C(`padding:${t.caption.padding}px;text-align:${t.caption.textAlign};font-size:${t.caption.fontSize}px;color:${t.caption.color};font-weight:${t.caption.bold ? "bold" : "normal"}`)
+                style: A(`padding:${t.caption.padding}px;text-align:${t.caption.textAlign};font-size:${t.caption.fontSize}px;color:${t.caption.color};font-weight:${t.caption.bold ? "bold" : "normal"}`)
               }, S(t.caption.text), 5)
-            ], 8, yt)) : o("", !0)
-          ], 64)) : o("", !0)
+            ], 12, yt)) : o("", !0)
+          ]))), 256)) : o("", !0)
         ]))), 256)),
         u("g", null, [
-          (l(!0), r(N, null, I(e.maxSeries, (t, h) => (l(), r("g", {
-            key: `tooltip_trap_${h}`
+          (l(!0), r(m, null, I(e.maxSeries, (t, c) => (l(), r("g", {
+            key: `tooltip_trap_${c}`
           }, [
             u("rect", {
-              x: e.drawingArea.left + e.drawingArea.width / e.maxSeries * h,
+              x: e.drawingArea.left + e.drawingArea.width / e.maxSeries * c,
               y: e.drawingArea.top,
               height: e.drawingArea.height < 0 ? 10 : e.drawingArea.height,
               width: e.drawingArea.width / e.maxSeries < 0 ? 1e-5 : e.drawingArea.width / e.maxSeries,
-              fill: [i.selectedMinimapIndex, i.selectedSerieIndex, i.selectedRowIndex].includes(h) ? e.setOpacity(e.FINAL_CONFIG.chart.highlighter.color, e.FINAL_CONFIG.chart.highlighter.opacity) : "transparent"
+              fill: [i.selectedMinimapIndex, i.selectedSerieIndex, i.selectedRowIndex].includes(c) ? e.setOpacity(e.FINAL_CONFIG.chart.highlighter.color, e.FINAL_CONFIG.chart.highlighter.opacity) : "transparent"
             }, null, 8, At)
           ]))), 128))
         ]),
-        e.barSet.length ? (l(!0), r(N, { key: 0 }, I(e.barSet, (t, h) => (l(), r("g", {
-          key: `serie_bar_${h}`,
-          class: M(`serie_bar_${h}`),
-          style: C(`opacity:${i.selectedScale ? i.selectedScale === t.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
+        e.barSet.length ? (l(!0), r(m, { key: 0 }, I(e.barSet, (t, c) => (l(), r("g", {
+          key: `serie_bar_${c}`,
+          class: M(`serie_bar_${c}`),
+          style: A(`opacity:${i.selectedScale ? i.selectedScale === t.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
         }, [
-          (l(!0), r(N, null, I(t.plots, (n, g) => (l(), r("g", {
-            key: `bar_plot_${h}_${g}`
+          (l(!0), r(m, null, I(t.plots, (n, g) => (l(), r("g", {
+            key: `bar_plot_${c}_${g}`
           }, [
             e.canShowValue(n.value) ? (l(), r("rect", {
               key: 0,
@@ -1349,7 +1362,7 @@ function qa(a, s, c, f, i, e) {
               height: i.mutableConfig.useIndividualScale ? Math.abs(e.calcIndividualHeight(n)) : Math.abs(e.calcRectHeight(n)),
               width: e.calcRectWidth() - (i.mutableConfig.useIndividualScale && i.mutableConfig.isStacked ? 0 : e.barPeriodGap) < 0 ? 1e-5 : e.calcRectWidth() - (i.mutableConfig.useIndividualScale && i.mutableConfig.isStacked ? 0 : e.barPeriodGap),
               rx: e.FINAL_CONFIG.bar.borderRadius,
-              fill: e.FINAL_CONFIG.bar.useGradient ? n.value >= 0 ? `url(#rectGradient_pos_${h}_${i.uniqueId})` : `url(#rectGradient_neg_${h}_${i.uniqueId})` : t.color,
+              fill: e.FINAL_CONFIG.bar.useGradient ? n.value >= 0 ? `url(#rectGradient_pos_${c}_${i.uniqueId})` : `url(#rectGradient_neg_${c}_${i.uniqueId})` : t.color,
               stroke: e.FINAL_CONFIG.bar.border.useSerieColor ? t.color : e.FINAL_CONFIG.bar.border.stroke,
               "stroke-width": e.FINAL_CONFIG.bar.border.strokeWidth
             }, null, 8, Lt)) : o("", !0),
@@ -1369,7 +1382,7 @@ function qa(a, s, c, f, i, e) {
           Object.hasOwn(t, "useProgression") && t.useProgression === !0 && !isNaN(e.calcLinearProgression(t.plots).trend) ? (l(), r("g", St, [
             u("defs", null, [
               u("marker", {
-                id: `bar_arrow_${h}`,
+                id: `bar_arrow_${c}`,
                 markerWidth: 7,
                 markerHeight: 7,
                 refX: "0",
@@ -1391,7 +1404,7 @@ function qa(a, s, c, f, i, e) {
               "stroke-width": 1,
               stroke: t.color,
               "stroke-dasharray": 2,
-              "marker-end": `url(#bar_arrow_${h})`
+              "marker-end": `url(#bar_arrow_${c})`
             }, null, 8, Ot)) : o("", !0),
             t.plots.length > 1 ? (l(), r("text", {
               key: 1,
@@ -1430,24 +1443,6 @@ function qa(a, s, c, f, i, e) {
             style: { transition: "none !important", animation: "none !important", "pointer-events": "none" }
           }, null, 8, zt)
         ])) : o("", !0),
-        u("g", null, [
-          u("rect", {
-            style: { transition: "none" },
-            x: 0,
-            y: e.drawingArea.top,
-            width: e.FINAL_CONFIG.chart.padding.left - 1 + e.xPadding,
-            height: e.drawingArea.height < 0 ? 10 : e.drawingArea.height,
-            fill: e.FINAL_CONFIG.chart.backgroundColor
-          }, null, 8, Mt),
-          u("rect", {
-            style: { transition: "none" },
-            x: e.drawingArea.right + 1 - e.xPadding,
-            y: e.drawingArea.top,
-            width: e.FINAL_CONFIG.chart.padding.right - 1 + e.xPadding,
-            height: e.drawingArea.height < 0 ? 10 : e.drawingArea.height,
-            fill: e.FINAL_CONFIG.chart.backgroundColor
-          }, null, 8, Pt)
-        ]),
         e.FINAL_CONFIG.chart.grid.frame.show ? (l(), r("rect", {
           key: 3,
           style: { pointerEvents: "none", transition: "none" },
@@ -1461,10 +1456,10 @@ function qa(a, s, c, f, i, e) {
           "stroke-linecap": e.FINAL_CONFIG.chart.grid.frame.strokeLinecap,
           "stroke-linejoin": e.FINAL_CONFIG.chart.grid.frame.strokeLinejoin,
           "stroke-dasharray": e.FINAL_CONFIG.chart.grid.frame.strokeDasharray
-        }, null, 8, Tt)) : o("", !0),
-        e.FINAL_CONFIG.chart.grid.labels.show ? (l(), r("g", Vt, [
-          i.mutableConfig.useIndividualScale ? (l(), r(N, { key: 0 }, [
-            (l(!0), r(N, null, I(e.allScales, (t) => (l(), r("g", null, [
+        }, null, 8, Mt)) : o("", !0),
+        e.FINAL_CONFIG.chart.grid.labels.show ? (l(), r("g", Tt, [
+          i.mutableConfig.useIndividualScale ? (l(), r(m, { key: 0 }, [
+            (l(!0), r(m, null, I(e.allScales, (t) => (l(), r("g", null, [
               u("line", {
                 x1: t.x + e.xPadding,
                 x2: t.x + e.xPadding,
@@ -1473,47 +1468,47 @@ function qa(a, s, c, f, i, e) {
                 stroke: t.color,
                 "stroke-width": e.FINAL_CONFIG.chart.grid.stroke,
                 "stroke-linecap": "round",
-                style: C(`opacity:${i.selectedScale ? i.selectedScale === t.id ? 1 : 0.3 : 1};transition:opacity 0.2s ease-in-out`)
-              }, null, 12, Rt)
+                style: A(`opacity:${i.selectedScale ? i.selectedScale === t.id ? 1 : 0.3 : 1};transition:opacity 0.2s ease-in-out`)
+              }, null, 12, Pt)
             ]))), 256)),
-            (l(!0), r(N, null, I(e.allScales, (t) => (l(), r("g", {
-              style: C(`opacity:${i.selectedScale ? i.selectedScale === t.id ? 1 : 0.3 : 1};transition:opacity 0.2s ease-in-out`)
+            (l(!0), r(m, null, I(e.allScales, (t) => (l(), r("g", {
+              style: A(`opacity:${i.selectedScale ? i.selectedScale === t.id ? 1 : 0.3 : 1};transition:opacity 0.2s ease-in-out`)
             }, [
               u("text", {
                 fill: t.color,
                 "font-size": i.fontSizes.dataLabels,
                 "text-anchor": "middle",
                 transform: `translate(${t.x - e.FINAL_CONFIG.chart.grid.labels.yAxis.labelWidth + 5}, ${i.mutableConfig.isStacked ? e.drawingArea.bottom - t.yOffset - t.individualHeight / 2 : e.drawingArea.top + e.drawingArea.height / 2}) rotate(-90)`
-              }, S(t.name) + " " + S(t.scaleLabel ? `- ${t.scaleLabel}` : ""), 9, Dt),
-              (l(!0), r(N, null, I(t.yLabels, (h, n) => (l(), r("line", {
+              }, S(t.name) + " " + S(t.scaleLabel ? `- ${t.scaleLabel}` : ""), 9, Vt),
+              (l(!0), r(m, null, I(t.yLabels, (c, n) => (l(), r("line", {
                 x1: t.x - 3 + e.xPadding,
                 x2: t.x + e.xPadding,
-                y1: e.checkNaN(h.y),
-                y2: e.checkNaN(h.y),
+                y1: e.checkNaN(c.y),
+                y2: e.checkNaN(c.y),
                 stroke: t.color,
                 "stroke-width": 1,
                 "stroke-linecap": "round"
-              }, null, 8, Ht))), 256)),
-              (l(!0), r(N, null, I(t.yLabels, (h, n) => (l(), r("text", {
+              }, null, 8, Rt))), 256)),
+              (l(!0), r(m, null, I(t.yLabels, (c, n) => (l(), r("text", {
                 x: t.x - 5 + e.xPadding,
-                y: e.checkNaN(h.y) + i.fontSizes.dataLabels / 3,
+                y: e.checkNaN(c.y) + i.fontSizes.dataLabels / 3,
                 "font-size": i.fontSizes.dataLabels,
                 "text-anchor": "end",
                 fill: t.color
               }, S(e.applyDataLabel(
                 e.FINAL_CONFIG.chart.grid.labels.yAxis.formatter,
-                h.value,
+                c.value,
                 e.dataLabel({
-                  p: h.prefix,
-                  v: h.value,
-                  s: h.suffix,
+                  p: c.prefix,
+                  v: c.value,
+                  s: c.suffix,
                   r: 1
                 }),
-                { datapoint: h.datapoint, seriesIndex: n }
-              )), 9, Wt))), 256))
+                { datapoint: c.datapoint, seriesIndex: n }
+              )), 9, Dt))), 256))
             ], 4))), 256))
-          ], 64)) : (l(!0), r(N, { key: 1 }, I(e.yLabels, (t, h) => (l(), r("g", {
-            key: `yLabel_${h}`
+          ], 64)) : (l(!0), r(m, { key: 1 }, I(e.yLabels, (t, c) => (l(), r("g", {
+            key: `yLabel_${c}`
           }, [
             e.canShowValue(t) && t.value >= e.niceScale.min && t.value <= e.niceScale.max ? (l(), r("line", {
               key: 0,
@@ -1524,7 +1519,7 @@ function qa(a, s, c, f, i, e) {
               stroke: e.FINAL_CONFIG.chart.grid.stroke,
               "stroke-width": "1",
               "stroke-linecap": "round"
-            }, null, 8, Et)) : o("", !0),
+            }, null, 8, Ht)) : o("", !0),
             t.value >= e.niceScale.min && t.value <= e.niceScale.max ? (l(), r("text", {
               key: 1,
               x: e.drawingArea.left - 7 + e.xPadding,
@@ -1541,21 +1536,21 @@ function qa(a, s, c, f, i, e) {
                 s: t.suffix,
                 r: 1
               })
-            ) : ""), 9, Bt)) : o("", !0)
+            ) : ""), 9, Wt)) : o("", !0)
           ]))), 128))
         ])) : o("", !0),
-        (l(!0), r(N, null, I(e.plotSet, (t, h) => (l(), r("g", {
-          key: `serie_plot_${h}`,
-          class: M(`serie_plot_${h}`),
-          style: C(`opacity:${i.selectedScale ? i.selectedScale === t.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
+        (l(!0), r(m, null, I(e.plotSet, (t, c) => (l(), r("g", {
+          key: `serie_plot_${c}`,
+          class: M(`serie_plot_${c}`),
+          style: A(`opacity:${i.selectedScale ? i.selectedScale === t.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
         }, [
-          (l(!0), r(N, null, I(t.plots, (n, g) => (l(), r("g", {
-            key: `circle_plot_${h}_${g}`
+          (l(!0), r(m, null, I(t.plots, (n, g) => (l(), r("g", {
+            key: `circle_plot_${c}_${g}`
           }, [
-            e.canShowValue(n.value) ? (l(), V(A, {
+            e.canShowValue(n.value) ? (l(), V(L, {
               key: 0,
               shape: ["triangle", "square", "diamond", "pentagon", "hexagon", "star"].includes(t.shape) ? t.shape : "circle",
-              color: e.FINAL_CONFIG.plot.useGradient ? `url(#plotGradient_${h}_${i.uniqueId})` : t.color,
+              color: e.FINAL_CONFIG.plot.useGradient ? `url(#plotGradient_${c}_${i.uniqueId})` : t.color,
               plot: { x: e.checkNaN(n.x), y: e.checkNaN(n.y) },
               radius: i.selectedSerieIndex !== null && i.selectedSerieIndex === g || i.selectedMinimapIndex !== null && i.selectedMinimapIndex === g ? (i.plotRadii.plot || 6) * 1.5 : i.plotRadii.plot || 6,
               stroke: e.FINAL_CONFIG.chart.backgroundColor,
@@ -1569,17 +1564,17 @@ function qa(a, s, c, f, i, e) {
               x: n.x - e.FINAL_CONFIG.chart.comments.width / 2 + e.FINAL_CONFIG.chart.comments.offsetX,
               y: n.y + e.FINAL_CONFIG.chart.comments.offsetY + 6
             }, [
-              u("div", Xt, [
+              u("div", Bt, [
                 O(a.$slots, "plot-comment", {
                   plot: { ...n, color: t.color }
                 }, void 0, !0)
               ])
-            ], 8, Yt)) : o("", !0)
+            ], 8, Et)) : o("", !0)
           ]))), 128)),
-          Object.hasOwn(t, "useProgression") && t.useProgression === !0 && !isNaN(e.calcLinearProgression(t.plots).trend) ? (l(), r("g", qt, [
+          Object.hasOwn(t, "useProgression") && t.useProgression === !0 && !isNaN(e.calcLinearProgression(t.plots).trend) ? (l(), r("g", Yt, [
             u("defs", null, [
               u("marker", {
-                id: `plot_arrow_${h}`,
+                id: `plot_arrow_${c}`,
                 markerWidth: 7,
                 markerHeight: 7,
                 refX: "0",
@@ -1589,8 +1584,8 @@ function qa(a, s, c, f, i, e) {
                 u("polygon", {
                   points: `0 0, 7 ${7 / 2}, 0 7`,
                   fill: t.color
-                }, null, 8, Ut)
-              ], 8, Zt)
+                }, null, 8, qt)
+              ], 8, Xt)
             ]),
             t.plots.length > 1 ? (l(), r("line", {
               key: 0,
@@ -1601,8 +1596,8 @@ function qa(a, s, c, f, i, e) {
               "stroke-width": 1,
               stroke: t.color,
               "stroke-dasharray": 2,
-              "marker-end": `url(#plot_arrow_${h})`
-            }, null, 8, Jt)) : o("", !0),
+              "marker-end": `url(#plot_arrow_${c})`
+            }, null, 8, Zt)) : o("", !0),
             t.plots.length > 1 ? (l(), r("text", {
               key: 1,
               "text-anchor": "middle",
@@ -1614,13 +1609,13 @@ function qa(a, s, c, f, i, e) {
               v: e.calcLinearProgression(t.plots).trend * 100,
               s: "%",
               r: 2
-            })), 9, Qt)) : o("", !0)
+            })), 9, Ut)) : o("", !0)
           ])) : o("", !0)
         ], 6))), 128)),
-        (l(!0), r(N, null, I(e.lineSet, (t, h) => (l(), r("g", {
-          key: `serie_line_${h}`,
-          class: M(`serie_line_${h}`),
-          style: C(`opacity:${i.selectedScale ? i.selectedScale === t.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
+        (l(!0), r(m, null, I(e.lineSet, (t, c) => (l(), r("g", {
+          key: `serie_line_${c}`,
+          class: M(`serie_line_${c}`),
+          style: A(`opacity:${i.selectedScale ? i.selectedScale === t.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
         }, [
           t.smooth && t.plots.length > 1 ? (l(), r("path", {
             key: 0,
@@ -1629,9 +1624,9 @@ function qa(a, s, c, f, i, e) {
             "stroke-width": e.FINAL_CONFIG.line.strokeWidth + 1,
             "stroke-dasharray": t.dashed ? e.FINAL_CONFIG.line.strokeWidth * 2 : 0,
             fill: "none"
-          }, null, 8, Kt)) : t.plots.length > 1 ? (l(), r("g", jt, [
-            (l(!0), r(N, null, I(t.plots, (n, g) => (l(), r("g", {
-              key: `line_${h}_${g}`
+          }, null, 8, Jt)) : t.plots.length > 1 ? (l(), r("g", Qt, [
+            (l(!0), r(m, null, I(t.plots, (n, g) => (l(), r("g", {
+              key: `line_${c}_${g}`
             }, [
               n && g < t.plots.length - 1 && t.plots[g + 1] && e.canShowValue(n.value) && e.canShowValue(t.plots[g + 1].value) ? (l(), r("line", {
                 key: 0,
@@ -1644,25 +1639,25 @@ function qa(a, s, c, f, i, e) {
                 "stroke-dasharray": t.dashed ? e.FINAL_CONFIG.line.strokeWidth * 2 : 0,
                 "stroke-linejoin": "round",
                 "stroke-linecap": "round"
-              }, null, 8, $t)) : o("", !0)
+              }, null, 8, Kt)) : o("", !0)
             ]))), 128))
           ])) : o("", !0)
         ], 6))), 128)),
-        (l(!0), r(N, null, I(e.lineSet, (t, h) => (l(), r("g", {
-          key: `serie_line_${h}`,
-          class: M(`serie_line_${h}`),
-          style: C(`opacity:${i.selectedScale ? i.selectedScale === t.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
+        (l(!0), r(m, null, I(e.lineSet, (t, c) => (l(), r("g", {
+          key: `serie_line_${c}`,
+          class: M(`serie_line_${c}`),
+          style: A(`opacity:${i.selectedScale ? i.selectedScale === t.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
         }, [
-          t.useArea && t.plots.length > 1 ? (l(), r("g", ea, [
+          t.useArea && t.plots.length > 1 ? (l(), r("g", jt, [
             t.smooth ? (l(), r("path", {
               key: 0,
-              d: `M ${t.plots[0] ? t.plots[0].x : Math.min(...t.plots.filter((n) => !!n).map((n) => n.x))},${i.mutableConfig.isStacked ? e.drawingArea.bottom - t.yOffset : e.drawingArea.bottom} ${t.curve} L ${t.plots.at(-1) ? t.plots.at(-1).x : e.drawingArea.left + e.slot.line * h + e.slot.line / 2},${i.mutableConfig.isStacked ? e.drawingArea.bottom - t.yOffset : e.drawingArea.bottom} Z`,
-              fill: e.FINAL_CONFIG.line.area.useGradient ? `url(#areaGradient_${h}_${i.uniqueId})` : e.setOpacity(t.color, e.FINAL_CONFIG.line.area.opacity)
-            }, null, 8, ta)) : (l(), r("path", {
+              d: `M ${t.plots[0] ? t.plots[0].x : Math.min(...t.plots.filter((n) => !!n).map((n) => n.x))},${i.mutableConfig.isStacked ? e.drawingArea.bottom - t.yOffset : e.drawingArea.bottom} ${t.curve} L ${t.plots.at(-1) ? t.plots.at(-1).x : e.drawingArea.left + e.slot.line * c + e.slot.line / 2},${i.mutableConfig.isStacked ? e.drawingArea.bottom - t.yOffset : e.drawingArea.bottom} Z`,
+              fill: e.FINAL_CONFIG.line.area.useGradient ? `url(#areaGradient_${c}_${i.uniqueId})` : e.setOpacity(t.color, e.FINAL_CONFIG.line.area.opacity)
+            }, null, 8, $t)) : (l(), r("path", {
               key: 1,
               d: `M${t.area}Z`,
-              fill: e.FINAL_CONFIG.line.area.useGradient ? `url(#areaGradient_${h}_${i.uniqueId})` : e.setOpacity(t.color, e.FINAL_CONFIG.line.area.opacity)
-            }, null, 8, aa))
+              fill: e.FINAL_CONFIG.line.area.useGradient ? `url(#areaGradient_${c}_${i.uniqueId})` : e.setOpacity(t.color, e.FINAL_CONFIG.line.area.opacity)
+            }, null, 8, ea))
           ])) : o("", !0),
           t.smooth && t.plots.length > 1 ? (l(), r("path", {
             key: 1,
@@ -1671,9 +1666,9 @@ function qa(a, s, c, f, i, e) {
             "stroke-width": e.FINAL_CONFIG.line.strokeWidth,
             "stroke-dasharray": t.dashed ? e.FINAL_CONFIG.line.strokeWidth * 2 : 0,
             fill: "none"
-          }, null, 8, ia)) : t.plots.length > 1 ? (l(), r("g", la, [
-            (l(!0), r(N, null, I(t.plots, (n, g) => (l(), r("g", {
-              key: `line_${h}_${g}`
+          }, null, 8, ta)) : t.plots.length > 1 ? (l(), r("g", aa, [
+            (l(!0), r(m, null, I(t.plots, (n, g) => (l(), r("g", {
+              key: `line_${c}_${g}`
             }, [
               n && g < t.plots.length - 1 && t.plots[g + 1] && e.canShowValue(n.value) && e.canShowValue(t.plots[g + 1].value) ? (l(), r("line", {
                 key: 0,
@@ -1686,16 +1681,16 @@ function qa(a, s, c, f, i, e) {
                 "stroke-dasharray": t.dashed ? e.FINAL_CONFIG.line.strokeWidth * 2 : 0,
                 "stroke-linejoin": "round",
                 "stroke-linecap": "round"
-              }, null, 8, ra)) : o("", !0)
+              }, null, 8, ia)) : o("", !0)
             ]))), 128))
           ])) : o("", !0),
-          (l(!0), r(N, null, I(t.plots, (n, g) => (l(), r("g", {
-            key: `circle_line_${h}_${g}`
+          (l(!0), r(m, null, I(t.plots, (n, g) => (l(), r("g", {
+            key: `circle_line_${c}_${g}`
           }, [
-            n && e.canShowValue(n.value) ? (l(), V(A, {
+            n && e.canShowValue(n.value) ? (l(), V(L, {
               key: 0,
               shape: ["triangle", "square", "diamond", "pentagon", "hexagon", "star"].includes(t.shape) ? t.shape : "circle",
-              color: e.FINAL_CONFIG.line.useGradient ? `url(#lineGradient_${h}_${i.uniqueId})` : t.color,
+              color: e.FINAL_CONFIG.line.useGradient ? `url(#lineGradient_${c}_${i.uniqueId})` : t.color,
               plot: { x: e.checkNaN(n.x), y: e.checkNaN(n.y) },
               radius: i.selectedSerieIndex !== null && i.selectedSerieIndex === g || i.selectedMinimapIndex !== null && i.selectedMinimapIndex === g ? (i.plotRadii.line || 6) * 1.5 : i.plotRadii.line || 6,
               stroke: e.FINAL_CONFIG.chart.backgroundColor,
@@ -1709,17 +1704,17 @@ function qa(a, s, c, f, i, e) {
               x: n.x - e.FINAL_CONFIG.chart.comments.width / 2 + e.FINAL_CONFIG.chart.comments.offsetX,
               y: n.y + e.FINAL_CONFIG.chart.comments.offsetY + 6
             }, [
-              u("div", na, [
+              u("div", ra, [
                 O(a.$slots, "plot-comment", {
                   plot: { ...n, color: t.color }
                 }, void 0, !0)
               ])
-            ], 8, sa)) : o("", !0)
+            ], 8, la)) : o("", !0)
           ]))), 128)),
-          Object.hasOwn(t, "useProgression") && t.useProgression === !0 && !isNaN(e.calcLinearProgression(t.plots).trend) ? (l(), r("g", ha, [
+          Object.hasOwn(t, "useProgression") && t.useProgression === !0 && !isNaN(e.calcLinearProgression(t.plots).trend) ? (l(), r("g", sa, [
             u("defs", null, [
               u("marker", {
-                id: `line_arrow_${h}`,
+                id: `line_arrow_${c}`,
                 markerWidth: 7,
                 markerHeight: 7,
                 refX: "0",
@@ -1729,8 +1724,8 @@ function qa(a, s, c, f, i, e) {
                 u("polygon", {
                   points: `0 0, 7 ${7 / 2}, 0 7`,
                   fill: t.color
-                }, null, 8, oa)
-              ], 8, ca)
+                }, null, 8, ca)
+              ], 8, na)
             ]),
             t.plots.length > 1 ? (l(), r("line", {
               key: 0,
@@ -1741,8 +1736,8 @@ function qa(a, s, c, f, i, e) {
               "stroke-width": 1,
               stroke: t.color,
               "stroke-dasharray": 2,
-              "marker-end": `url(#line_arrow_${h})`
-            }, null, 8, da)) : o("", !0),
+              "marker-end": `url(#line_arrow_${c})`
+            }, null, 8, ha)) : o("", !0),
             t.plots.length > 1 ? (l(), r("text", {
               key: 1,
               "text-anchor": "middle",
@@ -1754,17 +1749,17 @@ function qa(a, s, c, f, i, e) {
               v: e.calcLinearProgression(t.plots).trend * 100,
               s: "%",
               r: 2
-            })), 9, ua)) : o("", !0)
+            })), 9, oa)) : o("", !0)
           ])) : o("", !0)
         ], 6))), 128)),
-        (e.FINAL_CONFIG.bar.labels.show || e.FINAL_CONFIG.bar.serieName.show) && i.mutableConfig.dataLabels.show ? (l(), r("g", ga, [
-          (l(!0), r(N, null, I(e.barSet, (t, h) => (l(), r("g", {
-            key: `xLabel_bar_${h}`,
-            class: M(`xLabel_bar_${h}`),
-            style: C(`opacity:${i.selectedScale ? i.selectedScale === t.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
+        (e.FINAL_CONFIG.bar.labels.show || e.FINAL_CONFIG.bar.serieName.show) && i.mutableConfig.dataLabels.show ? (l(), r("g", da, [
+          (l(!0), r(m, null, I(e.barSet, (t, c) => (l(), r("g", {
+            key: `xLabel_bar_${c}`,
+            class: M(`xLabel_bar_${c}`),
+            style: A(`opacity:${i.selectedScale ? i.selectedScale === t.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
           }, [
-            (l(!0), r(N, null, I(t.plots, (n, g) => (l(), r("g", {
-              key: `xLabel_bar_${h}_${g}`
+            (l(!0), r(m, null, I(t.plots, (n, g) => (l(), r("g", {
+              key: `xLabel_bar_${c}_${g}`
             }, [
               n && (!Object.hasOwn(t, "dataLabels") || t.dataLabels === !0) && e.FINAL_CONFIG.bar.labels.show ? (l(), r("text", {
                 key: 0,
@@ -1786,7 +1781,7 @@ function qa(a, s, c, f, i, e) {
                   datapoint: n,
                   serie: t
                 }
-              ) : ""), 9, fa)) : o("", !0),
+              ) : ""), 9, ua)) : o("", !0),
               n && e.FINAL_CONFIG.bar.serieName.show ? (l(), r("text", {
                 key: 1,
                 x: i.mutableConfig.useIndividualScale && i.mutableConfig.isStacked ? n.x + e.slot.line / 2 : n.x + e.calcRectWidth() * 1.1,
@@ -1795,18 +1790,18 @@ function qa(a, s, c, f, i, e) {
                 "font-size": i.fontSizes.plotLabels,
                 fill: e.FINAL_CONFIG.bar.serieName.useSerieColor ? t.color : e.FINAL_CONFIG.bar.serieName.color,
                 "font-weight": e.FINAL_CONFIG.bar.serieName.bold ? "bold" : "normal"
-              }, S(e.FINAL_CONFIG.bar.serieName.useAbbreviation ? e.abbreviate({ source: t.name, length: e.FINAL_CONFIG.bar.serieName.abbreviationSize }) : t.name), 9, Na)) : o("", !0)
+              }, S(e.FINAL_CONFIG.bar.serieName.useAbbreviation ? e.abbreviate({ source: t.name, length: e.FINAL_CONFIG.bar.serieName.abbreviationSize }) : t.name), 9, ga)) : o("", !0)
             ]))), 128))
           ], 6))), 128))
         ])) : o("", !0),
-        e.FINAL_CONFIG.plot.labels.show && i.mutableConfig.dataLabels.show ? (l(), r("g", ma, [
-          (l(!0), r(N, null, I(e.plotSet, (t, h) => (l(), r("g", {
-            key: `xLabel_plot_${h}`,
-            class: M(`xLabel_plot_${h}`),
-            style: C(`opacity:${i.selectedScale ? i.selectedScale === t.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
+        e.FINAL_CONFIG.plot.labels.show && i.mutableConfig.dataLabels.show ? (l(), r("g", fa, [
+          (l(!0), r(m, null, I(e.plotSet, (t, c) => (l(), r("g", {
+            key: `xLabel_plot_${c}`,
+            class: M(`xLabel_plot_${c}`),
+            style: A(`opacity:${i.selectedScale ? i.selectedScale === t.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
           }, [
-            (l(!0), r(N, null, I(t.plots, (n, g) => (l(), r("g", {
-              key: `xLabel_plot_${h}_${g}`
+            (l(!0), r(m, null, I(t.plots, (n, g) => (l(), r("g", {
+              key: `xLabel_plot_${c}_${g}`
             }, [
               n && !Object.hasOwn(t, "dataLabels") || t.dataLabels === !0 ? (l(), r("text", {
                 key: 0,
@@ -1828,7 +1823,7 @@ function qa(a, s, c, f, i, e) {
                   datapoint: n,
                   serie: t
                 }
-              ) : ""), 9, Ia)) : o("", !0),
+              ) : ""), 9, ma)) : o("", !0),
               n && g === 0 && t.useTag && t.useTag === "start" ? (l(), r("foreignObject", {
                 key: 1,
                 x: n.x,
@@ -1838,9 +1833,9 @@ function qa(a, s, c, f, i, e) {
                 style: { overflow: "visible" }
               }, [
                 u("div", {
-                  style: C(`padding: 3px; background:${e.setOpacity(t.color, 80)};color:${e.adaptColorToBackground(t.color)};width:fit-content;font-size:${i.fontSizes.plotLabels}px;border-radius: 2px;`)
+                  style: A(`padding: 3px; background:${e.setOpacity(t.color, 80)};color:${e.adaptColorToBackground(t.color)};width:fit-content;font-size:${i.fontSizes.plotLabels}px;border-radius: 2px;`)
                 }, S(t.name), 5)
-              ], 8, xa)) : o("", !0),
+              ], 8, Na)) : o("", !0),
               n && g === t.plots.length - 1 && t.useTag && t.useTag === "end" ? (l(), r("foreignObject", {
                 key: 2,
                 x: n.x - t.name.length * (i.fontSizes.plotLabels / 2),
@@ -1850,20 +1845,20 @@ function qa(a, s, c, f, i, e) {
                 style: { overflow: "visible" }
               }, [
                 u("div", {
-                  style: C(`padding: 3px; background:${e.setOpacity(t.color, 80)};color:${e.adaptColorToBackground(t.color)};width:fit-content;font-size:${i.fontSizes.plotLabels}px;border-radius: 2px;`)
+                  style: A(`padding: 3px; background:${e.setOpacity(t.color, 80)};color:${e.adaptColorToBackground(t.color)};width:fit-content;font-size:${i.fontSizes.plotLabels}px;border-radius: 2px;`)
                 }, S(t.name), 5)
-              ], 8, ba)) : o("", !0)
+              ], 8, Ia)) : o("", !0)
             ]))), 128))
           ], 6))), 128))
         ])) : o("", !0),
-        e.FINAL_CONFIG.line.labels.show && i.mutableConfig.dataLabels.show ? (l(), r("g", Fa, [
-          (l(!0), r(N, null, I(e.lineSet, (t, h) => (l(), r("g", {
-            key: `xLabel_line_${h}`,
-            class: M(`xLabel_line_${h}`),
-            style: C(`opacity:${i.selectedScale ? i.selectedScale === t.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
+        e.FINAL_CONFIG.line.labels.show && i.mutableConfig.dataLabels.show ? (l(), r("g", xa, [
+          (l(!0), r(m, null, I(e.lineSet, (t, c) => (l(), r("g", {
+            key: `xLabel_line_${c}`,
+            class: M(`xLabel_line_${c}`),
+            style: A(`opacity:${i.selectedScale ? i.selectedScale === t.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
           }, [
-            (l(!0), r(N, null, I(t.plots, (n, g) => (l(), r("g", {
-              key: `xLabel_line_${h}_${g}`
+            (l(!0), r(m, null, I(t.plots, (n, g) => (l(), r("g", {
+              key: `xLabel_line_${c}_${g}`
             }, [
               n && !Object.hasOwn(t, "dataLabels") || t.dataLabels === !0 ? (l(), r("text", {
                 key: 0,
@@ -1885,7 +1880,7 @@ function qa(a, s, c, f, i, e) {
                   datapoint: n,
                   serie: t
                 }
-              ) : ""), 9, _a)) : o("", !0),
+              ) : ""), 9, ba)) : o("", !0),
               n && g === 0 && t.useTag && t.useTag === "start" ? (l(), r("foreignObject", {
                 key: 1,
                 x: n.x,
@@ -1895,9 +1890,9 @@ function qa(a, s, c, f, i, e) {
                 style: { overflow: "visible" }
               }, [
                 u("div", {
-                  style: C(`padding: 3px; background:${e.setOpacity(t.color, 80)};color:${e.adaptColorToBackground(t.color)};width:fit-content;font-size:${i.fontSizes.plotLabels}px;border-radius: 2px;`)
+                  style: A(`padding: 3px; background:${e.setOpacity(t.color, 80)};color:${e.adaptColorToBackground(t.color)};width:fit-content;font-size:${i.fontSizes.plotLabels}px;border-radius: 2px;`)
                 }, S(t.name), 5)
-              ], 8, ya)) : o("", !0),
+              ], 8, Fa)) : o("", !0),
               n && g === t.plots.length - 1 && t.useTag && t.useTag === "end" ? (l(), r("foreignObject", {
                 key: 2,
                 x: n.x - t.name.length * (i.fontSizes.plotLabels / 2),
@@ -1907,19 +1902,19 @@ function qa(a, s, c, f, i, e) {
                 style: { overflow: "visible" }
               }, [
                 u("div", {
-                  style: C(`padding: 3px; background:${e.setOpacity(t.color, 80)};color:${e.adaptColorToBackground(t.color)};width:fit-content;font-size:${i.fontSizes.plotLabels}px;border-radius: 2px;`)
+                  style: A(`padding: 3px; background:${e.setOpacity(t.color, 80)};color:${e.adaptColorToBackground(t.color)};width:fit-content;font-size:${i.fontSizes.plotLabels}px;border-radius: 2px;`)
                 }, S(t.name), 5)
-              ], 8, Aa)) : o("", !0)
+              ], 8, _a)) : o("", !0)
             ]))), 128))
           ], 6))), 128))
         ])) : o("", !0),
-        (l(!0), r(N, null, I(e.lineSet, (t, h) => (l(), r("g", {
-          key: `xLabel_line_${h}`,
-          class: M(`xLabel_line_${h}`),
-          style: C(`opacity:${i.selectedScale ? i.selectedScale === t.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
+        (l(!0), r(m, null, I(e.lineSet, (t, c) => (l(), r("g", {
+          key: `xLabel_line_${c}`,
+          class: M(`xLabel_line_${c}`),
+          style: A(`opacity:${i.selectedScale ? i.selectedScale === t.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
         }, [
-          (l(!0), r(N, null, I(t.plots, (n, g) => (l(), r("g", {
-            key: `xLabel_line_${h}_${g}`
+          (l(!0), r(m, null, I(t.plots, (n, g) => (l(), r("g", {
+            key: `xLabel_line_${c}_${g}`
           }, [
             n && g === 0 && t.showSerieName && t.showSerieName === "start" ? (l(), r("text", {
               key: 0,
@@ -1936,7 +1931,7 @@ function qa(a, s, c, f, i, e) {
                 y: n.y,
                 maxWords: 2
               })
-            }, null, 8, La)) : o("", !0),
+            }, null, 8, ya)) : o("", !0),
             n && g === t.plots.length - 1 && t.showSerieName && t.showSerieName === "end" ? (l(), r("text", {
               key: 1,
               x: n.x + i.fontSizes.plotLabels,
@@ -1952,16 +1947,16 @@ function qa(a, s, c, f, i, e) {
                 y: n.y,
                 maxWords: 2
               })
-            }, null, 8, Ca)) : o("", !0)
+            }, null, 8, Aa)) : o("", !0)
           ]))), 128))
         ], 6))), 128)),
-        (l(!0), r(N, null, I(e.plotSet, (t, h) => (l(), r("g", {
-          key: `xLabel_plot_${h}`,
-          class: M(`xLabel_plot_${h}`),
-          style: C(`opacity:${i.selectedScale ? i.selectedScale === t.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
+        (l(!0), r(m, null, I(e.plotSet, (t, c) => (l(), r("g", {
+          key: `xLabel_plot_${c}`,
+          class: M(`xLabel_plot_${c}`),
+          style: A(`opacity:${i.selectedScale ? i.selectedScale === t.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
         }, [
-          (l(!0), r(N, null, I(t.plots, (n, g) => (l(), r("g", {
-            key: `xLabel_plot_${h}_${g}`
+          (l(!0), r(m, null, I(t.plots, (n, g) => (l(), r("g", {
+            key: `xLabel_plot_${c}_${g}`
           }, [
             n && g === 0 && t.showSerieName && t.showSerieName === "start" ? (l(), r("text", {
               key: 0,
@@ -1978,7 +1973,7 @@ function qa(a, s, c, f, i, e) {
                 y: n.y,
                 maxWords: 2
               })
-            }, null, 8, Sa)) : o("", !0),
+            }, null, 8, La)) : o("", !0),
             n && g === t.plots.length - 1 && t.showSerieName && t.showSerieName === "end" ? (l(), r("text", {
               key: 1,
               x: n.x + i.fontSizes.plotLabels,
@@ -1994,18 +1989,18 @@ function qa(a, s, c, f, i, e) {
                 y: n.y,
                 maxWords: 2
               })
-            }, null, 8, ka)) : o("", !0)
+            }, null, 8, Ca)) : o("", !0)
           ]))), 128))
         ], 6))), 128)),
-        i.mutableConfig.useIndividualScale && !i.mutableConfig.isStacked ? (l(!0), r(N, { key: 8 }, I(e.allScales, (t) => (l(), r("rect", {
+        i.mutableConfig.useIndividualScale && !i.mutableConfig.isStacked ? (l(!0), r(m, { key: 8 }, I(e.allScales, (t) => (l(), r("rect", {
           x: t.x - e.FINAL_CONFIG.chart.grid.labels.yAxis.labelWidth,
           y: e.drawingArea.top,
           width: e.FINAL_CONFIG.chart.grid.labels.yAxis.labelWidth,
           height: e.drawingArea.height < 0 ? 10 : e.drawingArea.height,
           fill: i.selectedScale === t.id ? e.setOpacity(t.color, 20) : "transparent",
-          onMouseenter: (h) => i.selectedScale = t.id,
-          onMouseleave: s[0] || (s[0] = (h) => i.selectedScale = null)
-        }, null, 40, wa))), 256)) : o("", !0),
+          onMouseenter: (c) => i.selectedScale = t.id,
+          onMouseleave: s[0] || (s[0] = (c) => i.selectedScale = null)
+        }, null, 40, Sa))), 256)) : o("", !0),
         u("g", null, [
           e.FINAL_CONFIG.chart.grid.labels.axis.yLabel && !i.mutableConfig.useIndividualScale ? (l(), r("text", {
             key: 0,
@@ -2014,7 +2009,7 @@ function qa(a, s, c, f, i, e) {
             transform: `translate(${i.fontSizes.yAxis + e.FINAL_CONFIG.chart.grid.labels.axis.yLabelOffsetX}, ${e.drawingArea.top + e.drawingArea.height / 2}) rotate(-90)`,
             "text-anchor": "middle",
             style: { transition: "none" }
-          }, S(e.FINAL_CONFIG.chart.grid.labels.axis.yLabel), 9, Oa)) : o("", !0),
+          }, S(e.FINAL_CONFIG.chart.grid.labels.axis.yLabel), 9, ka)) : o("", !0),
           e.FINAL_CONFIG.chart.grid.labels.axis.xLabel ? (l(), r("text", {
             key: 1,
             "text-anchor": "middle",
@@ -2022,39 +2017,39 @@ function qa(a, s, c, f, i, e) {
             y: e.drawingArea.bottom + i.fontSizes.yAxis + i.fontSizes.xAxis * 1.3 + e.FINAL_CONFIG.chart.grid.labels.axis.xLabelOffsetY,
             "font-size": i.fontSizes.yAxis,
             fill: e.FINAL_CONFIG.chart.grid.labels.color
-          }, S(e.FINAL_CONFIG.chart.grid.labels.axis.xLabel), 9, va)) : o("", !0)
+          }, S(e.FINAL_CONFIG.chart.grid.labels.axis.xLabel), 9, wa)) : o("", !0)
         ]),
-        e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.show ? (l(), r("g", Ga, [
-          (l(!0), r(N, null, I(e.timeLabels, (t, h) => (l(), r("g", {
-            key: `time_label_${h}`
+        e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.show ? (l(), r("g", Oa, [
+          (l(!0), r(m, null, I(e.timeLabels, (t, c) => (l(), r("g", {
+            key: `time_label_${c}`
           }, [
-            t && !e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && !e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyAtModulo || t && e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && (h === 0 || h === e.timeLabels.length - 1) && !e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyAtModulo || t && e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && i.selectedSerieIndex === h && !e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyAtModulo || t && !e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyAtModulo && h % Math.floor((this.slicer.end - this.slicer.start) / e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.modulo) === 0 ? (l(), r("text", {
+            t && !e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && !e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyAtModulo || t && e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && (c === 0 || c === e.timeLabels.length - 1) && !e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyAtModulo || t && e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && i.selectedSerieIndex === c && !e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyAtModulo || t && !e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyAtModulo && c % Math.floor((this.slicer.end - this.slicer.start) / e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.modulo) === 0 ? (l(), r("text", {
               key: 0,
               "text-anchor": e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.rotation > 0 ? "start" : e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.rotation < 0 ? "end" : "middle",
               "font-size": i.fontSizes.xAxis,
               fill: e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.color,
-              transform: `translate(${e.drawingArea.left + e.drawingArea.width / e.maxSeries * h + e.drawingArea.width / e.maxSeries / 2}, ${e.drawingArea.bottom + i.fontSizes.xAxis * 1.3 + e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.yOffset}), rotate(${e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.rotation})`
-            }, S(t || ""), 9, pa)) : o("", !0)
+              transform: `translate(${e.drawingArea.left + e.drawingArea.width / e.maxSeries * c + e.drawingArea.width / e.maxSeries / 2}, ${e.drawingArea.bottom + i.fontSizes.xAxis * 1.3 + e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.yOffset}), rotate(${e.FINAL_CONFIG.chart.grid.labels.xAxisLabels.rotation})`
+            }, S(t || ""), 9, va)) : o("", !0)
           ]))), 128))
         ])) : o("", !0),
         u("g", null, [
-          (l(!0), r(N, null, I(e.maxSeries, (t, h) => (l(), r("g", {
-            key: `tooltip_trap_${h}`
+          (l(!0), r(m, null, I(e.maxSeries, (t, c) => (l(), r("g", {
+            key: `tooltip_trap_${c}`
           }, [
             u("rect", {
               "data-cy-trap": "",
-              x: e.drawingArea.left + e.drawingArea.width / e.maxSeries * h,
+              x: e.drawingArea.left + e.drawingArea.width / e.maxSeries * c,
               y: e.drawingArea.top,
               height: e.drawingArea.height < 0 ? 10 : e.drawingArea.height,
               width: e.drawingArea.width / e.maxSeries < 0 ? 1e-5 : e.drawingArea.width / e.maxSeries,
               fill: "transparent",
-              onMouseenter: (n) => e.toggleTooltipVisibility(!0, h),
+              onMouseenter: (n) => e.toggleTooltipVisibility(!0, c),
               onMouseleave: s[1] || (s[1] = (n) => e.toggleTooltipVisibility(!1)),
-              onClick: (n) => e.selectX(h)
-            }, null, 40, za)
+              onClick: (n) => e.selectX(c)
+            }, null, 40, Ga)
           ]))), 128))
         ]),
-        e.FINAL_CONFIG.chart.timeTag.show && ![null, void 0].includes(i.selectedSerieIndex) ? (l(), r("g", Ma, [
+        e.FINAL_CONFIG.chart.timeTag.show && ![null, void 0].includes(i.selectedSerieIndex) ? (l(), r("g", pa, [
           (l(), r("foreignObject", {
             x: e.drawingArea.left + e.drawingArea.width / e.maxSeries * i.selectedSerieIndex - 100 + e.drawingArea.width / e.maxSeries / 2,
             y: e.drawingArea.bottom,
@@ -2064,23 +2059,23 @@ function qa(a, s, c, f, i, e) {
           }, [
             u("div", {
               class: "vue-ui-xy-time-tag",
-              style: C(`width: fit-content;margin: 0 auto;text-align:center;padding:3px 12px;background:${e.FINAL_CONFIG.chart.timeTag.backgroundColor};color:${e.FINAL_CONFIG.chart.timeTag.color};font-size:${e.FINAL_CONFIG.chart.timeTag.fontSize}px`)
+              style: A(`width: fit-content;margin: 0 auto;text-align:center;padding:3px 12px;background:${e.FINAL_CONFIG.chart.timeTag.backgroundColor};color:${e.FINAL_CONFIG.chart.timeTag.color};font-size:${e.FINAL_CONFIG.chart.timeTag.fontSize}px`)
             }, S(e.timeLabels[i.selectedSerieIndex] || i.selectedSerieIndex), 5)
-          ], 8, Pa)),
+          ], 8, za)),
           u("circle", {
             cx: e.drawingArea.left + e.drawingArea.width / e.maxSeries * i.selectedSerieIndex + e.drawingArea.width / e.maxSeries / 2,
             cy: e.drawingArea.bottom,
             r: e.FINAL_CONFIG.chart.timeTag.circleMarker.radius,
             fill: e.FINAL_CONFIG.chart.timeTag.circleMarker.color
-          }, null, 8, Ta)
+          }, null, 8, Ma)
         ])) : o("", !0)
       ])) : o("", !0),
       O(a.$slots, "svg", { svg: e.svg }, void 0, !0)
     ], 14, Ze)) : o("", !0),
-    a.$slots.watermark ? (l(), r("div", Va, [
+    a.$slots.watermark ? (l(), r("div", Ta, [
       O(a.$slots, "watermark", B(Y({ isPrinting: i.isPrinting || i.isImaging })), void 0, !0)
     ])) : o("", !0),
-    e.isDataset ? o("", !0) : (l(), V(m, {
+    e.isDataset ? o("", !0) : (l(), V(N, {
       key: 4,
       config: {
         type: "line",
@@ -2098,7 +2093,7 @@ function qa(a, s, c, f, i, e) {
         }
       }
     }, null, 8, ["config"])),
-    e.FINAL_CONFIG.chart.zoom.show && i.maxX > 6 && e.isDataset ? (l(), V(L, {
+    e.FINAL_CONFIG.chart.zoom.show && i.maxX > 6 && e.isDataset ? (l(), V(C, {
       ref: "chartSlicer",
       key: `slicer_${i.slicerStep}`,
       background: e.FINAL_CONFIG.chart.zoom.color,
@@ -2138,14 +2133,14 @@ function qa(a, s, c, f, i, e) {
       key: 6,
       ref: "chartLegend",
       class: "vue-ui-xy-legend",
-      style: C(`font-size:${e.FINAL_CONFIG.chart.legend.fontSize}px`)
+      style: A(`font-size:${e.FINAL_CONFIG.chart.legend.fontSize}px`)
     }, [
-      (l(!0), r(N, null, I(e.absoluteDataset, (t, h) => (l(), r("div", {
-        key: `div_legend_item_${h}`,
+      (l(!0), r(m, null, I(e.absoluteDataset, (t, c) => (l(), r("div", {
+        key: `div_legend_item_${c}`,
         onClick: (n) => e.segregate(t),
         class: M({ "vue-ui-xy-legend-item": !0, "vue-ui-xy-legend-item-segregated": i.segregatedSeries.includes(t.id) })
       }, [
-        i.icons[t.type] === "line" ? (l(), r("svg", Da, [
+        i.icons[t.type] === "line" ? (l(), r("svg", Va, [
           u("rect", {
             x: "0",
             y: "7",
@@ -2154,8 +2149,8 @@ function qa(a, s, c, f, i, e) {
             height: "4",
             width: "20",
             fill: t.color
-          }, null, 8, Ha),
-          q(A, {
+          }, null, 8, Ra),
+          q(L, {
             plot: { x: 10, y: 9 },
             radius: 4,
             color: t.color,
@@ -2163,7 +2158,7 @@ function qa(a, s, c, f, i, e) {
             stroke: e.FINAL_CONFIG.chart.backgroundColor,
             strokeWidth: 1
           }, null, 8, ["color", "shape", "stroke"])
-        ])) : (l(), r("svg", Wa, [
+        ])) : (l(), r("svg", Da, [
           i.icons[t.type] === "bar" ? (l(), r("rect", {
             key: 0,
             x: "0",
@@ -2173,7 +2168,7 @@ function qa(a, s, c, f, i, e) {
             width: "12",
             stroke: "none",
             fill: t.color
-          }, null, 8, Ea)) : (l(), V(A, {
+          }, null, 8, Ha)) : (l(), V(L, {
             key: 1,
             plot: { x: 6, y: 6 },
             radius: 5,
@@ -2182,10 +2177,10 @@ function qa(a, s, c, f, i, e) {
           }, null, 8, ["color", "shape"]))
         ])),
         u("span", {
-          style: C(`color:${e.FINAL_CONFIG.chart.legend.color}`)
+          style: A(`color:${e.FINAL_CONFIG.chart.legend.color}`)
         }, S(t.name), 5)
-      ], 10, Ra))), 128))
-    ], 4)) : (l(), r("div", Ba, [
+      ], 10, Pa))), 128))
+    ], 4)) : (l(), r("div", Wa, [
       O(a.$slots, "legend", { legend: e.absoluteDataset }, void 0, !0)
     ], 512)),
     q(z, {
@@ -2229,9 +2224,9 @@ function qa(a, s, c, f, i, e) {
     }, {
       content: p(() => [
         u("div", {
-          style: C(`${i.isPrinting ? "" : "max-height:400px"};overflow:auto;width:100%;margin-top:48px`)
+          style: A(`${i.isPrinting ? "" : "max-height:400px"};overflow:auto;width:100%;margin-top:48px`)
         }, [
-          u("div", Ya, [
+          u("div", Ea, [
             He(u("input", {
               type: "checkbox",
               "onUpdate:modelValue": s[4] || (s[4] = (t) => i.showSparklineTable = t)
@@ -2263,7 +2258,7 @@ function qa(a, s, c, f, i, e) {
             onClose: s[6] || (s[6] = (t) => i.mutableConfig.showTable = !1)
           }, {
             th: p(({ th: t }) => [
-              u("div", { innerHTML: t }, null, 8, Xa)
+              u("div", { innerHTML: t }, null, 8, Ba)
             ]),
             td: p(({ td: t }) => [
               Ee(S(isNaN(Number(t)) ? t : e.dataLabel({
@@ -2281,7 +2276,7 @@ function qa(a, s, c, f, i, e) {
     }, 8, ["config"])) : o("", !0)
   ], 14, qe);
 }
-const hi = /* @__PURE__ */ Be(Xe, [["render", qa], ["__scopeId", "data-v-7fe10bbc"]]);
+const si = /* @__PURE__ */ Be(Xe, [["render", Ya], ["__scopeId", "data-v-a70a56aa"]]);
 export {
-  hi as default
+  si as default
 };