vue-data-ui 2.1.9 → 2.1.10

package/dist/{index-7109548b.js → index-cae1d486.js}

@@ -12820,7 +12820,7 @@ function(e) {
  */
 function(e) {
   function t() {
-    return (Ct.canvg ? Promise.resolve(Ct.canvg) : import("./index.es-aeb25a88.js")).catch(function(l) {
+    return (Ct.canvg ? Promise.resolve(Ct.canvg) : import("./index.es-ff88d729.js")).catch(function(l) {
       return Promise.reject(new Error("Could not load canvg: " + l));
     }).then(function(l) {
       return l.default ? l.default : l;
@@ -43175,7 +43175,7 @@ function Sf(e) {
     e.hasOwnProperty(l) && (t[l.toUpperCase()] = e[l]);
   return t;
 }
-const u1 = (e) => (ja("data-v-eb784c24"), e = e(), Ga(), e), oK = ["id"], rK = ["xmlns", "viewBox"], nK = ["id"], sK = ["id"], iK = /* @__PURE__ */ u1(() => /* @__PURE__ */ y("feColorMatrix", {
+const u1 = (e) => (ja("data-v-e5cc2621"), e = e(), Ga(), e), oK = ["id"], rK = ["xmlns", "viewBox"], nK = ["id"], sK = ["id"], iK = /* @__PURE__ */ u1(() => /* @__PURE__ */ y("feColorMatrix", {
   type: "saturate",
   values: "0"
 }, null, -1)), AK = {
@@ -43610,529 +43610,521 @@ const u1 = (e) => (ja("data-v-eb784c24"), e = e(), Ga(), e), oK = ["id"], rK = [
     return t({
       generatePdf: ee,
       generateImage: me
-    }), (j, K) => (c(), h(we, null, [
-      x.value ? (c(), h("div", {
-        key: 0,
-        id: `${S.value}_${a.value}`,
-        ref_key: "quickChart",
-        ref: o,
-        class: "vue-ui-quick-chart",
-        style: z(`background:${i.value.backgroundColor};color:${i.value.color};font-family:${i.value.fontFamily}; position: relative`)
+    }), (j, K) => x.value ? (c(), h("div", {
+      key: 0,
+      id: `${S.value}_${a.value}`,
+      ref_key: "quickChart",
+      ref: o,
+      class: Pe({ "vue-ui-quick-chart": !0, "vue-data-ui-wrapper-fullscreen": Fe.value }),
+      style: z(`background:${i.value.backgroundColor};color:${i.value.color};font-family:${i.value.fontFamily}; position: relative`)
+    }, [
+      i.value.showUserOptions ? (c(), Re(ol, {
+        ref: "details",
+        key: `user_option_${d.value}`,
+        backgroundColor: i.value.backgroundColor,
+        color: i.value.color,
+        isPrinting: p.value,
+        isImaging: w.value,
+        title: i.value.title,
+        uid: a.value,
+        hasImg: "",
+        hasFullscreen: "",
+        hasXls: !1,
+        isFullscreen: Fe.value,
+        chartElement: o.value,
+        onToggleFullscreen: Ae,
+        onGeneratePdf: ee,
+        onGenerateImage: me
+      }, null, 8, ["backgroundColor", "color", "isPrinting", "isImaging", "title", "uid", "isFullscreen", "chartElement"])) : F("", !0),
+      i.value.title ? (c(), h("div", {
+        key: 1,
+        class: "vue-ui-quick-chart-title",
+        style: z(`background:${i.value.backgroundColor};color:${i.value.color};font-size:${i.value.titleFontSize}px;font-weight:${i.value.titleBold ? "bold" : "normal"};text-align:${i.value.titleTextAlign}`)
+      }, D(i.value.title), 5)) : F("", !0),
+      (c(), h("svg", {
+        xmlns: ce(lt),
+        viewBox: V.value,
+        style: z(`max-width:100%;overflow:visible;background:${i.value.backgroundColor};color:${i.value.color}`)
       }, [
-        i.value.showUserOptions ? (c(), Re(ol, {
-          ref: "details",
-          key: `user_option_${d.value}`,
-          backgroundColor: i.value.backgroundColor,
-          color: i.value.color,
-          isPrinting: p.value,
-          isImaging: w.value,
-          title: i.value.title,
-          uid: a.value,
-          hasImg: "",
-          hasFullscreen: "",
-          hasXls: !1,
-          isFullscreen: Fe.value,
-          chartElement: o.value,
-          onToggleFullscreen: Ae,
-          onGeneratePdf: ee,
-          onGenerateImage: me
-        }, null, 8, ["backgroundColor", "color", "isPrinting", "isImaging", "title", "uid", "isFullscreen", "chartElement"])) : F("", !0),
-        i.value.title ? (c(), h("div", {
-          key: 1,
-          class: "vue-ui-quick-chart-title",
-          style: z(`background:${i.value.backgroundColor};color:${i.value.color};font-size:${i.value.titleFontSize}px;font-weight:${i.value.titleBold ? "bold" : "normal"};text-align:${i.value.titleTextAlign}`)
-        }, D(i.value.title), 5)) : F("", !0),
-        (c(), h("svg", {
-          xmlns: ce(lt),
-          viewBox: V.value,
-          style: z(`max-width:100%;overflow:visible;background:${i.value.backgroundColor};color:${i.value.color}`)
-        }, [
-          y("defs", null, [
-            y("filter", {
-              id: `blur_${a.value}`,
-              x: "-50%",
-              y: "-50%",
-              width: "200%",
-              height: "200%"
-            }, [
-              y("feGaussianBlur", {
-                in: "SourceGraphic",
-                stdDeviation: 2,
-                id: `blur_std_${a.value}`
-              }, null, 8, sK),
-              iK
-            ], 8, nK)
+        y("defs", null, [
+          y("filter", {
+            id: `blur_${a.value}`,
+            x: "-50%",
+            y: "-50%",
+            width: "200%",
+            height: "200%"
+          }, [
+            y("feGaussianBlur", {
+              in: "SourceGraphic",
+              stdDeviation: 2,
+              id: `blur_std_${a.value}`
+            }, null, 8, sK),
+            iK
+          ], 8, nK)
+        ]),
+        S.value === la.DONUT ? (c(), h(we, { key: 0 }, [
+          i.value.showDataLabels ? (c(), h("g", AK, [
+            (c(!0), h(we, null, _e(Z.value.chart, (E, J) => (c(), h(we, null, [
+              Z.value.isArcBigEnough(E) ? (c(), h("path", {
+                key: 0,
+                class: "quick-animation",
+                d: ce(Jr)(E, { x: (i.value.width || C.value.donut.width) / 2, y: (i.value.height || C.value.donut.height) / 2 }, 16, 16, !1, !1, i.value.donutLabelMarkerStrokeWidth),
+                stroke: E.color,
+                "stroke-width": i.value.donutLabelMarkerStrokeWidth,
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                fill: "none",
+                filter: oe(E.id)
+              }, null, 8, uK)) : F("", !0)
+            ], 64))), 256))
+          ])) : F("", !0),
+          y("circle", {
+            class: "donut-hollow",
+            cx: (i.value.width || C.value.donut.width) / 2,
+            cy: (i.value.height || C.value.donut.height) / 2,
+            r: (i.value.height || C.value.donut.height) * i.value.donutRadiusRatio,
+            fill: i.value.backgroundColor
+          }, null, 8, cK),
+          y("g", dK, [
+            (c(!0), h(we, null, _e(Z.value.chart, (E, J) => (c(), h("path", {
+              class: "quick-animation",
+              d: E.arcSlice,
+              fill: E.color,
+              stroke: i.value.backgroundColor,
+              "stroke-width": i.value.donutStrokeWidth,
+              filter: oe(E.id)
+            }, null, 8, hK))), 256)),
+            (c(!0), h(we, null, _e(Z.value.chart, (E, J) => (c(), h("path", {
+              class: "quick-animation",
+              d: E.arcSlice,
+              fill: "transparent",
+              onMouseenter: (B) => Z.value.useTooltip({ datapoint: E, seriesIndex: J }),
+              onMouseout: K[0] || (K[0] = (B) => Z.value.killTooltip()),
+              onClick: (B) => l("selectDatapoint", E)
+            }, null, 40, fK))), 256))
           ]),
-          S.value === la.DONUT ? (c(), h(we, { key: 0 }, [
-            i.value.showDataLabels ? (c(), h("g", AK, [
-              (c(!0), h(we, null, _e(Z.value.chart, (E, J) => (c(), h(we, null, [
-                Z.value.isArcBigEnough(E) ? (c(), h("path", {
-                  key: 0,
-                  class: "quick-animation",
-                  d: ce(Jr)(E, { x: (i.value.width || C.value.donut.width) / 2, y: (i.value.height || C.value.donut.height) / 2 }, 16, 16, !1, !1, i.value.donutLabelMarkerStrokeWidth),
-                  stroke: E.color,
-                  "stroke-width": i.value.donutLabelMarkerStrokeWidth,
-                  "stroke-linecap": "round",
-                  "stroke-linejoin": "round",
-                  fill: "none",
-                  filter: oe(E.id)
-                }, null, 8, uK)) : F("", !0)
-              ], 64))), 256))
-            ])) : F("", !0),
-            y("circle", {
-              class: "donut-hollow",
-              cx: (i.value.width || C.value.donut.width) / 2,
-              cy: (i.value.height || C.value.donut.height) / 2,
-              r: (i.value.height || C.value.donut.height) * i.value.donutRadiusRatio,
-              fill: i.value.backgroundColor
-            }, null, 8, cK),
-            y("g", dK, [
-              (c(!0), h(we, null, _e(Z.value.chart, (E, J) => (c(), h("path", {
+          i.value.showDataLabels ? (c(), h("g", vK, [
+            (c(!0), h(we, null, _e(Z.value.chart, (E, J) => (c(), h(we, null, [
+              Z.value.isArcBigEnough(E) ? (c(), h("circle", {
+                key: 0,
                 class: "quick-animation",
-                d: E.arcSlice,
+                cx: ce(kt)(E).x,
+                cy: ce(dl)(E) - 3.7,
                 fill: E.color,
-                stroke: i.value.backgroundColor,
-                "stroke-width": i.value.donutStrokeWidth,
+                r: 3,
                 filter: oe(E.id)
-              }, null, 8, hK))), 256)),
-              (c(!0), h(we, null, _e(Z.value.chart, (E, J) => (c(), h("path", {
-                class: "quick-animation",
-                d: E.arcSlice,
-                fill: "transparent",
-                onMouseenter: (B) => Z.value.useTooltip({ datapoint: E, seriesIndex: J }),
-                onMouseout: K[0] || (K[0] = (B) => Z.value.killTooltip()),
-                onClick: (B) => l("selectDatapoint", E)
-              }, null, 40, fK))), 256))
-            ]),
-            i.value.showDataLabels ? (c(), h("g", vK, [
-              (c(!0), h(we, null, _e(Z.value.chart, (E, J) => (c(), h(we, null, [
-                Z.value.isArcBigEnough(E) ? (c(), h("circle", {
-                  key: 0,
-                  class: "quick-animation",
-                  cx: ce(kt)(E).x,
-                  cy: ce(dl)(E) - 3.7,
-                  fill: E.color,
-                  r: 3,
-                  filter: oe(E.id)
-                }, null, 8, gK)) : F("", !0),
-                Z.value.isArcBigEnough(E) ? (c(), h("text", {
-                  key: 1,
-                  "text-anchor": ce(kt)(E, !0, 20).anchor,
-                  x: ce(kt)(E, !0).x,
-                  y: ce(dl)(E),
-                  fill: i.value.color,
-                  "font-size": i.value.dataLabelFontSize,
-                  filter: oe(E.id)
-                }, D(Z.value.displayArcPercentage(E, Z.value.chart)) + " (" + D(ce(ht)({
-                  p: i.value.valuePrefix,
-                  v: E.value,
-                  s: i.value.valueSuffix,
-                  r: i.value.dataLabelRoundingValue
-                })) + ") ", 9, yK)) : F("", !0),
-                Z.value.isArcBigEnough(E, !0, 20) ? (c(), h("text", {
-                  key: 2,
-                  "text-anchor": ce(kt)(E).anchor,
-                  x: ce(kt)(E, !0).x,
-                  y: ce(dl)(E) + i.value.dataLabelFontSize,
-                  fill: i.value.color,
-                  "font-size": i.value.dataLabelFontSize,
-                  filter: oe(E.id)
-                }, D(E.name), 9, pK)) : F("", !0)
-              ], 64))), 256))
-            ])) : F("", !0),
-            i.value.donutShowTotal ? (c(), h("g", bK, [
-              y("text", {
-                "text-anchor": "middle",
-                x: Z.value.drawingArea.centerX,
-                y: Z.value.drawingArea.centerY - i.value.donutTotalLabelFontSize / 2,
-                "font-size": i.value.donutTotalLabelFontSize,
-                fill: i.value.color
-              }, D(i.value.donutTotalLabelText), 9, wK),
-              y("text", {
-                "text-anchor": "middle",
-                x: Z.value.drawingArea.centerX,
-                y: Z.value.drawingArea.centerY + i.value.donutTotalLabelFontSize,
-                "font-size": i.value.donutTotalLabelFontSize,
-                fill: i.value.color
-              }, D(ce(ht)({
+              }, null, 8, gK)) : F("", !0),
+              Z.value.isArcBigEnough(E) ? (c(), h("text", {
+                key: 1,
+                "text-anchor": ce(kt)(E, !0, 20).anchor,
+                x: ce(kt)(E, !0).x,
+                y: ce(dl)(E),
+                fill: i.value.color,
+                "font-size": i.value.dataLabelFontSize,
+                filter: oe(E.id)
+              }, D(Z.value.displayArcPercentage(E, Z.value.chart)) + " (" + D(ce(ht)({
                 p: i.value.valuePrefix,
-                v: Z.value.total,
+                v: E.value,
                 s: i.value.valueSuffix,
                 r: i.value.dataLabelRoundingValue
-              })), 9, mK)
-            ])) : F("", !0)
-          ], 64)) : F("", !0),
-          S.value === la.LINE ? (c(), h(we, { key: 1 }, [
-            i.value.xyShowGrid ? (c(), h("g", xK, [
-              (c(!0), h(we, null, _e(de.value.yLabels, (E) => (c(), h(we, null, [
-                E.y <= de.value.drawingArea.bottom ? (c(), h("line", {
-                  key: 0,
-                  x1: de.value.drawingArea.left,
-                  x2: de.value.drawingArea.right,
-                  y1: E.y,
-                  y2: E.y,
-                  stroke: i.value.xyGridStroke,
-                  "stroke-width": i.value.xyGridStrokeWidth,
-                  "stroke-linecap": "round"
-                }, null, 8, CK)) : F("", !0)
-              ], 64))), 256)),
-              (c(!0), h(we, null, _e(de.value.extremes.maxSeries + 1, (E, J) => (c(), h("line", {
-                x1: de.value.drawingArea.left + de.value.slotSize * J,
-                x2: de.value.drawingArea.left + de.value.slotSize * J,
-                y1: de.value.drawingArea.top,
-                y2: de.value.drawingArea.bottom,
-                stroke: i.value.xyGridStroke,
-                "stroke-width": i.value.xyGridStrokeWidth,
-                "stroke-linecap": "round"
-              }, null, 8, kK))), 256))
-            ])) : F("", !0),
-            i.value.xyShowAxis ? (c(), h("g", BK, [
-              y("line", {
-                x1: de.value.drawingArea.left,
-                x2: de.value.drawingArea.left,
-                y1: de.value.drawingArea.top,
-                y2: de.value.drawingArea.bottom,
-                stroke: i.value.xyAxisStroke,
-                "stroke-width": i.value.xyAxisStrokeWidth,
-                "stroke-linecap": "round"
-              }, null, 8, _K),
-              y("line", {
+              })) + ") ", 9, yK)) : F("", !0),
+              Z.value.isArcBigEnough(E, !0, 20) ? (c(), h("text", {
+                key: 2,
+                "text-anchor": ce(kt)(E).anchor,
+                x: ce(kt)(E, !0).x,
+                y: ce(dl)(E) + i.value.dataLabelFontSize,
+                fill: i.value.color,
+                "font-size": i.value.dataLabelFontSize,
+                filter: oe(E.id)
+              }, D(E.name), 9, pK)) : F("", !0)
+            ], 64))), 256))
+          ])) : F("", !0),
+          i.value.donutShowTotal ? (c(), h("g", bK, [
+            y("text", {
+              "text-anchor": "middle",
+              x: Z.value.drawingArea.centerX,
+              y: Z.value.drawingArea.centerY - i.value.donutTotalLabelFontSize / 2,
+              "font-size": i.value.donutTotalLabelFontSize,
+              fill: i.value.color
+            }, D(i.value.donutTotalLabelText), 9, wK),
+            y("text", {
+              "text-anchor": "middle",
+              x: Z.value.drawingArea.centerX,
+              y: Z.value.drawingArea.centerY + i.value.donutTotalLabelFontSize,
+              "font-size": i.value.donutTotalLabelFontSize,
+              fill: i.value.color
+            }, D(ce(ht)({
+              p: i.value.valuePrefix,
+              v: Z.value.total,
+              s: i.value.valueSuffix,
+              r: i.value.dataLabelRoundingValue
+            })), 9, mK)
+          ])) : F("", !0)
+        ], 64)) : F("", !0),
+        S.value === la.LINE ? (c(), h(we, { key: 1 }, [
+          i.value.xyShowGrid ? (c(), h("g", xK, [
+            (c(!0), h(we, null, _e(de.value.yLabels, (E) => (c(), h(we, null, [
+              E.y <= de.value.drawingArea.bottom ? (c(), h("line", {
+                key: 0,
                 x1: de.value.drawingArea.left,
                 x2: de.value.drawingArea.right,
-                y1: de.value.absoluteZero,
-                y2: de.value.absoluteZero,
-                stroke: i.value.xyAxisStroke,
-                "stroke-width": i.value.xyAxisStrokeWidth,
-                "stroke-linecap": "round"
-              }, null, 8, FK)
-            ])) : F("", !0),
-            i.value.xyShowScale ? (c(), h("g", SK, [
-              (c(!0), h(we, null, _e(de.value.yLabels, (E) => (c(), h(we, null, [
-                E.y <= de.value.drawingArea.bottom ? (c(), h("line", {
-                  key: 0,
-                  x1: E.x + 4,
-                  x2: de.value.drawingArea.left,
-                  y1: E.y,
-                  y2: E.y,
-                  stroke: i.value.xyAxisStroke,
-                  "stroke-width": i.value.xyAxisStrokeWidth,
-                  "stroke-linecap": "round"
-                }, null, 8, LK)) : F("", !0),
-                E.y <= de.value.drawingArea.bottom ? (c(), h("text", {
-                  key: 1,
-                  x: E.x,
-                  y: E.y + i.value.xyLabelsYFontSize / 3,
-                  "text-anchor": "end",
-                  "font-size": i.value.xyLabelsYFontSize,
-                  fill: i.value.color
-                }, D(E.value), 9, $K)) : F("", !0)
-              ], 64))), 256))
-            ])) : F("", !0),
-            i.value.xyShowScale && i.value.xyPeriods.length ? (c(), h("g", UK, [
-              (c(!0), h(we, null, _e(de.value.extremes.maxSeries, (E, J) => (c(), h("line", {
-                x1: de.value.drawingArea.left + de.value.slotSize * (J + 1) - de.value.slotSize / 2,
-                x2: de.value.drawingArea.left + de.value.slotSize * (J + 1) - de.value.slotSize / 2,
-                y1: de.value.drawingArea.bottom,
-                y2: de.value.drawingArea.bottom + 4,
-                stroke: i.value.xyAxisStroke,
-                "stroke-width": i.value.xyAxisStrokeWidth,
-                "stroke-linecap": "round"
-              }, null, 8, QK))), 256)),
-              (c(!0), h(we, null, _e(de.value.extremes.maxSeries, (E, J) => (c(), h("text", {
-                "font-size": i.value.xyLabelsXFontSize,
-                "text-anchor": i.value.xyPeriodLabelsRotation ? "end" : "middle",
-                fill: i.value.color,
-                transform: `translate(${de.value.drawingArea.left + de.value.slotSize * (J + 1) - de.value.slotSize / 2}, ${de.value.drawingArea.bottom + i.value.xyLabelsXFontSize + 6}), rotate(${i.value.xyPeriodLabelsRotation})`
-              }, D(i.value.xyPeriods[J]), 9, MK))), 256))
-            ])) : F("", !0),
-            y("g", EK, [
-              (c(!0), h(we, null, _e(de.value.dataset, (E, J) => (c(), h("g", IK, [
-                i.value.lineSmooth ? (c(), h("path", {
-                  key: 0,
-                  d: `M ${ce(WA)(E.coordinates)}`,
-                  stroke: E.color,
-                  "stroke-width": i.value.lineStrokeWidth,
-                  "stroke-linecap": "round",
-                  fill: "none",
-                  class: "quick-animation",
-                  style: { transition: "all 0.3s ease-in-out" }
-                }, null, 8, NK)) : (c(), h("path", {
-                  key: 1,
-                  d: `M ${E.linePath}`,
-                  stroke: E.color,
-                  "stroke-width": i.value.lineStrokeWidth,
-                  "stroke-linecap": "round",
-                  fill: "none",
-                  class: "quick-animation",
-                  style: { transition: "all 0.3s ease-in-out" }
-                }, null, 8, TK)),
-                (c(!0), h(we, null, _e(E.coordinates, (B, M) => (c(), h("circle", {
-                  cx: B.x,
-                  cy: B.y,
-                  r: 3,
-                  fill: E.color,
-                  stroke: i.value.backgroundColor,
-                  "stroke-width": "0.5",
-                  class: "quick-animation",
-                  style: { transition: "all 0.3s ease-in-out" }
-                }, null, 8, DK))), 256))
-              ]))), 256))
-            ]),
-            i.value.showDataLabels ? (c(), h("g", HK, [
-              (c(!0), h(we, null, _e(de.value.dataset, (E, J) => (c(), h(we, null, [
-                (c(!0), h(we, null, _e(E.coordinates, (B, M) => (c(), h("text", {
-                  "text-anchor": "middle",
-                  "font-size": i.value.dataLabelFontSize,
-                  fill: E.color,
-                  x: B.x,
-                  y: B.y - i.value.dataLabelFontSize / 2,
-                  class: "quick-animation",
-                  style: { transition: "all 0.3s ease-in-out" }
-                }, D(ce(ht)({
-                  p: i.value.valuePrefix,
-                  v: B.value,
-                  s: i.value.valueSuffix,
-                  r: i.value.dataLabelRoundingValue
-                })), 9, PK))), 256))
-              ], 64))), 256))
-            ])) : F("", !0),
-            y("g", zK, [
-              (c(!0), h(we, null, _e(de.value.extremes.maxSeries, (E, J) => (c(), h("rect", {
-                x: de.value.drawingArea.left + J * de.value.slotSize,
-                y: de.value.drawingArea.top,
-                height: de.value.drawingArea.height,
-                width: de.value.slotSize,
-                fill: v.value === J ? i.value.xyHighlighterColor : "transparent",
-                style: z(`opacity:${i.value.xyHighlighterOpacity}`),
-                onMouseenter: (B) => de.value.useTooltip(J),
-                onMouseleave: K[1] || (K[1] = (B) => de.value.killTooltip()),
-                onClick: (B) => l("selectDatapoint", de.value.dataset.map((M) => ({
-                  ...M,
-                  value: M.values[J]
-                })))
-              }, null, 44, OK))), 256))
-            ])
-          ], 64)) : F("", !0),
-          S.value === la.BAR ? (c(), h(we, { key: 2 }, [
-            i.value.xyShowGrid ? (c(), h("g", RK, [
-              (c(!0), h(we, null, _e(se.value.yLabels, (E) => (c(), h(we, null, [
-                E.y <= se.value.drawingArea.bottom ? (c(), h("line", {
-                  key: 0,
-                  x1: se.value.drawingArea.left,
-                  x2: se.value.drawingArea.right,
-                  y1: E.y,
-                  y2: E.y,
-                  stroke: i.value.xyGridStroke,
-                  "stroke-width": i.value.xyGridStrokeWidth,
-                  "stroke-linecap": "round"
-                }, null, 8, VK)) : F("", !0)
-              ], 64))), 256)),
-              (c(!0), h(we, null, _e(se.value.extremes.maxSeries + 1, (E, J) => (c(), h("line", {
-                x1: se.value.drawingArea.left + se.value.slotSize * J,
-                x2: se.value.drawingArea.left + se.value.slotSize * J,
-                y1: se.value.drawingArea.top,
-                y2: se.value.drawingArea.bottom,
+                y1: E.y,
+                y2: E.y,
                 stroke: i.value.xyGridStroke,
                 "stroke-width": i.value.xyGridStrokeWidth,
                 "stroke-linecap": "round"
-              }, null, 8, KK))), 256))
-            ])) : F("", !0),
-            i.value.xyShowAxis ? (c(), h("g", WK, [
-              y("line", {
-                x1: se.value.drawingArea.left,
-                x2: se.value.drawingArea.left,
-                y1: se.value.drawingArea.top,
-                y2: se.value.drawingArea.bottom,
+              }, null, 8, CK)) : F("", !0)
+            ], 64))), 256)),
+            (c(!0), h(we, null, _e(de.value.extremes.maxSeries + 1, (E, J) => (c(), h("line", {
+              x1: de.value.drawingArea.left + de.value.slotSize * J,
+              x2: de.value.drawingArea.left + de.value.slotSize * J,
+              y1: de.value.drawingArea.top,
+              y2: de.value.drawingArea.bottom,
+              stroke: i.value.xyGridStroke,
+              "stroke-width": i.value.xyGridStrokeWidth,
+              "stroke-linecap": "round"
+            }, null, 8, kK))), 256))
+          ])) : F("", !0),
+          i.value.xyShowAxis ? (c(), h("g", BK, [
+            y("line", {
+              x1: de.value.drawingArea.left,
+              x2: de.value.drawingArea.left,
+              y1: de.value.drawingArea.top,
+              y2: de.value.drawingArea.bottom,
+              stroke: i.value.xyAxisStroke,
+              "stroke-width": i.value.xyAxisStrokeWidth,
+              "stroke-linecap": "round"
+            }, null, 8, _K),
+            y("line", {
+              x1: de.value.drawingArea.left,
+              x2: de.value.drawingArea.right,
+              y1: de.value.absoluteZero,
+              y2: de.value.absoluteZero,
+              stroke: i.value.xyAxisStroke,
+              "stroke-width": i.value.xyAxisStrokeWidth,
+              "stroke-linecap": "round"
+            }, null, 8, FK)
+          ])) : F("", !0),
+          i.value.xyShowScale ? (c(), h("g", SK, [
+            (c(!0), h(we, null, _e(de.value.yLabels, (E) => (c(), h(we, null, [
+              E.y <= de.value.drawingArea.bottom ? (c(), h("line", {
+                key: 0,
+                x1: E.x + 4,
+                x2: de.value.drawingArea.left,
+                y1: E.y,
+                y2: E.y,
                 stroke: i.value.xyAxisStroke,
                 "stroke-width": i.value.xyAxisStrokeWidth,
                 "stroke-linecap": "round"
-              }, null, 8, jK),
-              y("line", {
+              }, null, 8, LK)) : F("", !0),
+              E.y <= de.value.drawingArea.bottom ? (c(), h("text", {
+                key: 1,
+                x: E.x,
+                y: E.y + i.value.xyLabelsYFontSize / 3,
+                "text-anchor": "end",
+                "font-size": i.value.xyLabelsYFontSize,
+                fill: i.value.color
+              }, D(E.value), 9, $K)) : F("", !0)
+            ], 64))), 256))
+          ])) : F("", !0),
+          i.value.xyShowScale && i.value.xyPeriods.length ? (c(), h("g", UK, [
+            (c(!0), h(we, null, _e(de.value.extremes.maxSeries, (E, J) => (c(), h("line", {
+              x1: de.value.drawingArea.left + de.value.slotSize * (J + 1) - de.value.slotSize / 2,
+              x2: de.value.drawingArea.left + de.value.slotSize * (J + 1) - de.value.slotSize / 2,
+              y1: de.value.drawingArea.bottom,
+              y2: de.value.drawingArea.bottom + 4,
+              stroke: i.value.xyAxisStroke,
+              "stroke-width": i.value.xyAxisStrokeWidth,
+              "stroke-linecap": "round"
+            }, null, 8, QK))), 256)),
+            (c(!0), h(we, null, _e(de.value.extremes.maxSeries, (E, J) => (c(), h("text", {
+              "font-size": i.value.xyLabelsXFontSize,
+              "text-anchor": i.value.xyPeriodLabelsRotation ? "end" : "middle",
+              fill: i.value.color,
+              transform: `translate(${de.value.drawingArea.left + de.value.slotSize * (J + 1) - de.value.slotSize / 2}, ${de.value.drawingArea.bottom + i.value.xyLabelsXFontSize + 6}), rotate(${i.value.xyPeriodLabelsRotation})`
+            }, D(i.value.xyPeriods[J]), 9, MK))), 256))
+          ])) : F("", !0),
+          y("g", EK, [
+            (c(!0), h(we, null, _e(de.value.dataset, (E, J) => (c(), h("g", IK, [
+              i.value.lineSmooth ? (c(), h("path", {
+                key: 0,
+                d: `M ${ce(WA)(E.coordinates)}`,
+                stroke: E.color,
+                "stroke-width": i.value.lineStrokeWidth,
+                "stroke-linecap": "round",
+                fill: "none",
+                class: "quick-animation",
+                style: { transition: "all 0.3s ease-in-out" }
+              }, null, 8, NK)) : (c(), h("path", {
+                key: 1,
+                d: `M ${E.linePath}`,
+                stroke: E.color,
+                "stroke-width": i.value.lineStrokeWidth,
+                "stroke-linecap": "round",
+                fill: "none",
+                class: "quick-animation",
+                style: { transition: "all 0.3s ease-in-out" }
+              }, null, 8, TK)),
+              (c(!0), h(we, null, _e(E.coordinates, (B, M) => (c(), h("circle", {
+                cx: B.x,
+                cy: B.y,
+                r: 3,
+                fill: E.color,
+                stroke: i.value.backgroundColor,
+                "stroke-width": "0.5",
+                class: "quick-animation",
+                style: { transition: "all 0.3s ease-in-out" }
+              }, null, 8, DK))), 256))
+            ]))), 256))
+          ]),
+          i.value.showDataLabels ? (c(), h("g", HK, [
+            (c(!0), h(we, null, _e(de.value.dataset, (E, J) => (c(), h(we, null, [
+              (c(!0), h(we, null, _e(E.coordinates, (B, M) => (c(), h("text", {
+                "text-anchor": "middle",
+                "font-size": i.value.dataLabelFontSize,
+                fill: E.color,
+                x: B.x,
+                y: B.y - i.value.dataLabelFontSize / 2,
+                class: "quick-animation",
+                style: { transition: "all 0.3s ease-in-out" }
+              }, D(ce(ht)({
+                p: i.value.valuePrefix,
+                v: B.value,
+                s: i.value.valueSuffix,
+                r: i.value.dataLabelRoundingValue
+              })), 9, PK))), 256))
+            ], 64))), 256))
+          ])) : F("", !0),
+          y("g", zK, [
+            (c(!0), h(we, null, _e(de.value.extremes.maxSeries, (E, J) => (c(), h("rect", {
+              x: de.value.drawingArea.left + J * de.value.slotSize,
+              y: de.value.drawingArea.top,
+              height: de.value.drawingArea.height,
+              width: de.value.slotSize,
+              fill: v.value === J ? i.value.xyHighlighterColor : "transparent",
+              style: z(`opacity:${i.value.xyHighlighterOpacity}`),
+              onMouseenter: (B) => de.value.useTooltip(J),
+              onMouseleave: K[1] || (K[1] = (B) => de.value.killTooltip()),
+              onClick: (B) => l("selectDatapoint", de.value.dataset.map((M) => ({
+                ...M,
+                value: M.values[J]
+              })))
+            }, null, 44, OK))), 256))
+          ])
+        ], 64)) : F("", !0),
+        S.value === la.BAR ? (c(), h(we, { key: 2 }, [
+          i.value.xyShowGrid ? (c(), h("g", RK, [
+            (c(!0), h(we, null, _e(se.value.yLabels, (E) => (c(), h(we, null, [
+              E.y <= se.value.drawingArea.bottom ? (c(), h("line", {
+                key: 0,
                 x1: se.value.drawingArea.left,
                 x2: se.value.drawingArea.right,
-                y1: se.value.absoluteZero,
-                y2: se.value.absoluteZero,
-                stroke: i.value.xyAxisStroke,
-                "stroke-width": i.value.xyAxisStrokeWidth,
+                y1: E.y,
+                y2: E.y,
+                stroke: i.value.xyGridStroke,
+                "stroke-width": i.value.xyGridStrokeWidth,
                 "stroke-linecap": "round"
-              }, null, 8, GK)
-            ])) : F("", !0),
-            i.value.xyShowScale ? (c(), h("g", XK, [
-              (c(!0), h(we, null, _e(se.value.yLabels, (E) => (c(), h(we, null, [
-                E.y <= se.value.drawingArea.bottom ? (c(), h("line", {
-                  key: 0,
-                  x1: E.x + 4,
-                  x2: se.value.drawingArea.left,
-                  y1: E.y,
-                  y2: E.y,
-                  stroke: i.value.xyAxisStroke,
-                  "stroke-width": i.value.xyAxisStrokeWidth,
-                  "stroke-linecap": "round"
-                }, null, 8, qK)) : F("", !0),
-                E.y <= se.value.drawingArea.bottom ? (c(), h("text", {
-                  key: 1,
-                  x: E.x,
-                  y: E.y + i.value.xyLabelsYFontSize / 3,
-                  "text-anchor": "end",
-                  "font-size": i.value.xyLabelsYFontSize,
-                  fill: i.value.color
-                }, D(E.value), 9, YK)) : F("", !0)
-              ], 64))), 256))
-            ])) : F("", !0),
-            i.value.xyShowScale && i.value.xyPeriods.length ? (c(), h("g", JK, [
-              (c(!0), h(we, null, _e(se.value.extremes.maxSeries, (E, J) => (c(), h("line", {
-                x1: se.value.drawingArea.left + se.value.slotSize * (J + 1) - se.value.slotSize / 2,
-                x2: se.value.drawingArea.left + se.value.slotSize * (J + 1) - se.value.slotSize / 2,
-                y1: se.value.drawingArea.bottom,
-                y2: se.value.drawingArea.bottom + 4,
+              }, null, 8, VK)) : F("", !0)
+            ], 64))), 256)),
+            (c(!0), h(we, null, _e(se.value.extremes.maxSeries + 1, (E, J) => (c(), h("line", {
+              x1: se.value.drawingArea.left + se.value.slotSize * J,
+              x2: se.value.drawingArea.left + se.value.slotSize * J,
+              y1: se.value.drawingArea.top,
+              y2: se.value.drawingArea.bottom,
+              stroke: i.value.xyGridStroke,
+              "stroke-width": i.value.xyGridStrokeWidth,
+              "stroke-linecap": "round"
+            }, null, 8, KK))), 256))
+          ])) : F("", !0),
+          i.value.xyShowAxis ? (c(), h("g", WK, [
+            y("line", {
+              x1: se.value.drawingArea.left,
+              x2: se.value.drawingArea.left,
+              y1: se.value.drawingArea.top,
+              y2: se.value.drawingArea.bottom,
+              stroke: i.value.xyAxisStroke,
+              "stroke-width": i.value.xyAxisStrokeWidth,
+              "stroke-linecap": "round"
+            }, null, 8, jK),
+            y("line", {
+              x1: se.value.drawingArea.left,
+              x2: se.value.drawingArea.right,
+              y1: se.value.absoluteZero,
+              y2: se.value.absoluteZero,
+              stroke: i.value.xyAxisStroke,
+              "stroke-width": i.value.xyAxisStrokeWidth,
+              "stroke-linecap": "round"
+            }, null, 8, GK)
+          ])) : F("", !0),
+          i.value.xyShowScale ? (c(), h("g", XK, [
+            (c(!0), h(we, null, _e(se.value.yLabels, (E) => (c(), h(we, null, [
+              E.y <= se.value.drawingArea.bottom ? (c(), h("line", {
+                key: 0,
+                x1: E.x + 4,
+                x2: se.value.drawingArea.left,
+                y1: E.y,
+                y2: E.y,
                 stroke: i.value.xyAxisStroke,
                 "stroke-width": i.value.xyAxisStrokeWidth,
                 "stroke-linecap": "round"
-              }, null, 8, ZK))), 256)),
-              (c(!0), h(we, null, _e(se.value.extremes.maxSeries, (E, J) => (c(), h("text", {
-                "font-size": i.value.xyLabelsXFontSize,
-                "text-anchor": i.value.xyPeriodLabelsRotation ? "end" : "middle",
-                transform: `translate(${se.value.drawingArea.left + se.value.slotSize * (J + 1) - se.value.slotSize / 2}, ${se.value.drawingArea.bottom + i.value.xyLabelsXFontSize + 6}) rotate(${i.value.xyPeriodLabelsRotation})`,
+              }, null, 8, qK)) : F("", !0),
+              E.y <= se.value.drawingArea.bottom ? (c(), h("text", {
+                key: 1,
+                x: E.x,
+                y: E.y + i.value.xyLabelsYFontSize / 3,
+                "text-anchor": "end",
+                "font-size": i.value.xyLabelsYFontSize,
                 fill: i.value.color
-              }, D(i.value.xyPeriods[J]), 9, eW))), 256))
-            ])) : F("", !0),
-            y("g", tW, [
-              (c(!0), h(we, null, _e(se.value.dataset, (E, J) => (c(), h(we, null, [
-                (c(!0), h(we, null, _e(E.coordinates, (B, M) => (c(), h("rect", {
-                  x: B.x,
-                  y: B.y,
-                  width: B.width,
-                  height: B.height,
-                  fill: E.color,
-                  stroke: i.value.backgroundColor,
-                  "stroke-width": i.value.barStrokeWidth,
-                  "stroke-linecap": "round",
-                  class: "quick-animation",
-                  style: { transition: "all 0.3s ease-in-out" }
-                }, null, 8, lW))), 256))
-              ], 64))), 256))
-            ]),
-            i.value.showDataLabels ? (c(), h("g", aW, [
-              (c(!0), h(we, null, _e(se.value.dataset, (E, J) => (c(), h(we, null, [
-                (c(!0), h(we, null, _e(E.coordinates, (B, M) => (c(), h("text", {
-                  x: B.x + B.width / 2,
-                  y: B.y - i.value.dataLabelFontSize / 2,
-                  "text-anchor": "middle",
-                  "font-size": i.value.dataLabelFontSize,
-                  fill: E.color,
-                  class: "quick-animation"
-                }, D(ce(ht)({
-                  p: i.value.valuePrefix,
-                  v: B.value,
-                  s: i.value.valueSuffix,
-                  r: i.value.dataLabelRoundingValue
-                })), 9, oW))), 256))
-              ], 64))), 256))
-            ])) : F("", !0),
-            y("g", rW, [
-              (c(!0), h(we, null, _e(se.value.extremes.maxSeries, (E, J) => (c(), h("rect", {
-                x: se.value.drawingArea.left + J * se.value.slotSize,
-                y: se.value.drawingArea.top,
-                height: se.value.drawingArea.height,
-                width: se.value.slotSize,
-                fill: v.value === J ? i.value.xyHighlighterColor : "transparent",
-                style: z(`opacity:${i.value.xyHighlighterOpacity}`),
-                onMouseenter: (B) => se.value.useTooltip(J),
-                onMouseleave: K[2] || (K[2] = (B) => se.value.killTooltip()),
-                onClick: (B) => l("selectDatapoint", se.value.dataset.map((M) => ({
-                  ...M,
-                  value: M.values[J]
-                })))
-              }, null, 44, nW))), 256))
-            ])
-          ], 64)) : F("", !0)
-        ], 12, rK)),
-        i.value.showLegend ? (c(), h("div", {
-          key: 2,
-          class: "vue-ui-quick-chart-legend",
-          style: z(`background:${i.value.backgroundColor};color:${i.value.color}`)
-        }, [
-          S.value === la.DONUT ? (c(!0), h(we, { key: 0 }, _e(Z.value.legend, (E, J) => (c(), h("div", {
-            class: "vue-ui-quick-chart-legend-item",
-            onClick: (B) => {
-              ie(E.id, Z.value.legend.length - 1), l("selectLegend", E);
-            },
-            style: z(`cursor: ${Z.value.legend.length > 1 ? "pointer" : "default"}; opacity:${b.value.includes(E.id) ? "0.5" : "1"}`)
-          }, [
-            i.value.useCustomLegend ? $e(j.$slots, "legend", Ze(Vn({ key: 0 }, { legend: E })), void 0, !0) : (c(), h(we, { key: 1 }, [
-              rt(Jt, {
-                name: i.value.legendIcon,
-                stroke: E.color,
-                size: i.value.legendIconSize
-              }, null, 8, ["name", "stroke", "size"]),
-              y("span", {
-                style: z(`font-size:${i.value.legendFontSize}px`)
-              }, D(E.name), 5),
-              y("span", {
-                style: z(`font-size:${i.value.legendFontSize}px`)
+              }, D(E.value), 9, YK)) : F("", !0)
+            ], 64))), 256))
+          ])) : F("", !0),
+          i.value.xyShowScale && i.value.xyPeriods.length ? (c(), h("g", JK, [
+            (c(!0), h(we, null, _e(se.value.extremes.maxSeries, (E, J) => (c(), h("line", {
+              x1: se.value.drawingArea.left + se.value.slotSize * (J + 1) - se.value.slotSize / 2,
+              x2: se.value.drawingArea.left + se.value.slotSize * (J + 1) - se.value.slotSize / 2,
+              y1: se.value.drawingArea.bottom,
+              y2: se.value.drawingArea.bottom + 4,
+              stroke: i.value.xyAxisStroke,
+              "stroke-width": i.value.xyAxisStrokeWidth,
+              "stroke-linecap": "round"
+            }, null, 8, ZK))), 256)),
+            (c(!0), h(we, null, _e(se.value.extremes.maxSeries, (E, J) => (c(), h("text", {
+              "font-size": i.value.xyLabelsXFontSize,
+              "text-anchor": i.value.xyPeriodLabelsRotation ? "end" : "middle",
+              transform: `translate(${se.value.drawingArea.left + se.value.slotSize * (J + 1) - se.value.slotSize / 2}, ${se.value.drawingArea.bottom + i.value.xyLabelsXFontSize + 6}) rotate(${i.value.xyPeriodLabelsRotation})`,
+              fill: i.value.color
+            }, D(i.value.xyPeriods[J]), 9, eW))), 256))
+          ])) : F("", !0),
+          y("g", tW, [
+            (c(!0), h(we, null, _e(se.value.dataset, (E, J) => (c(), h(we, null, [
+              (c(!0), h(we, null, _e(E.coordinates, (B, M) => (c(), h("rect", {
+                x: B.x,
+                y: B.y,
+                width: B.width,
+                height: B.height,
+                fill: E.color,
+                stroke: i.value.backgroundColor,
+                "stroke-width": i.value.barStrokeWidth,
+                "stroke-linecap": "round",
+                class: "quick-animation",
+                style: { transition: "all 0.3s ease-in-out" }
+              }, null, 8, lW))), 256))
+            ], 64))), 256))
+          ]),
+          i.value.showDataLabels ? (c(), h("g", aW, [
+            (c(!0), h(we, null, _e(se.value.dataset, (E, J) => (c(), h(we, null, [
+              (c(!0), h(we, null, _e(E.coordinates, (B, M) => (c(), h("text", {
+                x: B.x + B.width / 2,
+                y: B.y - i.value.dataLabelFontSize / 2,
+                "text-anchor": "middle",
+                "font-size": i.value.dataLabelFontSize,
+                fill: E.color,
+                class: "quick-animation"
               }, D(ce(ht)({
                 p: i.value.valuePrefix,
-                v: E.value,
+                v: B.value,
                 s: i.value.valueSuffix,
                 r: i.value.dataLabelRoundingValue
-              })), 5),
-              b.value.includes(E.id) ? (c(), h("span", {
-                key: 0,
-                style: z(`font-size:${i.value.legendFontSize}px`)
-              }, " ( - % ) ", 4)) : (c(), h("span", {
-                key: 1,
-                style: z(`font-size:${i.value.legendFontSize}px`)
-              }, " (" + D(ce(ht)({
-                v: E.value / Z.value.total * 100,
-                s: "%",
-                r: i.value.dataLabelRoundingPercentage
-              })) + ") ", 5))
-            ], 64))
-          ], 12, sW))), 256)) : F("", !0),
-          S.value === la.LINE ? (c(!0), h(we, { key: 1 }, _e(de.value.legend, (E, J) => (c(), h("div", {
-            class: "vue-ui-quick-chart-legend-item",
-            onClick: (B) => {
-              ie(E.id, de.value.legend.length - 1), l("selectLegend", E);
-            },
-            style: z(`cursor: ${de.value.legend.length > 1 ? "pointer" : "default"}; opacity:${b.value.includes(E.id) ? "0.5" : "1"}`)
-          }, [
-            i.value.useCustomLegend ? $e(j.$slots, "legend", Ze(Vn({ key: 0 }, { legend: E })), void 0, !0) : (c(), h(we, { key: 1 }, [
-              rt(Jt, {
-                name: i.value.legendIcon,
-                stroke: E.color,
-                size: i.value.legendIconSize
-              }, null, 8, ["name", "stroke", "size"]),
-              y("span", {
-                style: z(`font-size:${i.value.legendFontSize}px`)
-              }, D(E.name), 5)
-            ], 64))
-          ], 12, iW))), 256)) : F("", !0),
-          S.value === la.BAR ? (c(!0), h(we, { key: 2 }, _e(se.value.legend, (E, J) => (c(), h("div", {
-            class: "vue-ui-quick-chart-legend-item",
-            onClick: (B) => {
-              ie(E.id, se.value.legend.length - 1), l("selectLegend", E);
-            },
-            style: z(`cursor: ${se.value.legend.length > 1 ? "pointer" : "default"}; opacity:${b.value.includes(E.id) ? "0.5" : "1"}`)
-          }, [
-            i.value.useCustomLegend ? $e(j.$slots, "legend", Ze(Vn({ key: 0 }, { legend: E })), void 0, !0) : (c(), h(we, { key: 1 }, [
-              rt(Jt, {
-                name: i.value.legendIcon,
-                stroke: E.color,
-                size: i.value.legendIconSize
-              }, null, 8, ["name", "stroke", "size"]),
-              y("span", {
-                style: z(`font-size:${i.value.legendFontSize}px`)
-              }, D(E.name), 5)
-            ], 64))
-          ], 12, AW))), 256)) : F("", !0)
-        ], 4)) : F("", !0)
-      ], 12, oK)) : (c(), h("div", uW, [
-        rt(Jt, {
-          name: "circleCancel",
-          stroke: "red"
-        }),
-        cW
-      ])),
+              })), 9, oW))), 256))
+            ], 64))), 256))
+          ])) : F("", !0),
+          y("g", rW, [
+            (c(!0), h(we, null, _e(se.value.extremes.maxSeries, (E, J) => (c(), h("rect", {
+              x: se.value.drawingArea.left + J * se.value.slotSize,
+              y: se.value.drawingArea.top,
+              height: se.value.drawingArea.height,
+              width: se.value.slotSize,
+              fill: v.value === J ? i.value.xyHighlighterColor : "transparent",
+              style: z(`opacity:${i.value.xyHighlighterOpacity}`),
+              onMouseenter: (B) => se.value.useTooltip(J),
+              onMouseleave: K[2] || (K[2] = (B) => se.value.killTooltip()),
+              onClick: (B) => l("selectDatapoint", se.value.dataset.map((M) => ({
+                ...M,
+                value: M.values[J]
+              })))
+            }, null, 44, nW))), 256))
+          ])
+        ], 64)) : F("", !0)
+      ], 12, rK)),
+      i.value.showLegend ? (c(), h("div", {
+        key: 2,
+        class: "vue-ui-quick-chart-legend",
+        style: z(`background:${i.value.backgroundColor};color:${i.value.color}`)
+      }, [
+        S.value === la.DONUT ? (c(!0), h(we, { key: 0 }, _e(Z.value.legend, (E, J) => (c(), h("div", {
+          class: "vue-ui-quick-chart-legend-item",
+          onClick: (B) => {
+            ie(E.id, Z.value.legend.length - 1), l("selectLegend", E);
+          },
+          style: z(`cursor: ${Z.value.legend.length > 1 ? "pointer" : "default"}; opacity:${b.value.includes(E.id) ? "0.5" : "1"}`)
+        }, [
+          i.value.useCustomLegend ? $e(j.$slots, "legend", Ze(Vn({ key: 0 }, { legend: E })), void 0, !0) : (c(), h(we, { key: 1 }, [
+            rt(Jt, {
+              name: i.value.legendIcon,
+              stroke: E.color,
+              size: i.value.legendIconSize
+            }, null, 8, ["name", "stroke", "size"]),
+            y("span", {
+              style: z(`font-size:${i.value.legendFontSize}px`)
+            }, D(E.name), 5),
+            y("span", {
+              style: z(`font-size:${i.value.legendFontSize}px`)
+            }, D(ce(ht)({
+              p: i.value.valuePrefix,
+              v: E.value,
+              s: i.value.valueSuffix,
+              r: i.value.dataLabelRoundingValue
+            })), 5),
+            b.value.includes(E.id) ? (c(), h("span", {
+              key: 0,
+              style: z(`font-size:${i.value.legendFontSize}px`)
+            }, " ( - % ) ", 4)) : (c(), h("span", {
+              key: 1,
+              style: z(`font-size:${i.value.legendFontSize}px`)
+            }, " (" + D(ce(ht)({
+              v: E.value / Z.value.total * 100,
+              s: "%",
+              r: i.value.dataLabelRoundingPercentage
+            })) + ") ", 5))
+          ], 64))
+        ], 12, sW))), 256)) : F("", !0),
+        S.value === la.LINE ? (c(!0), h(we, { key: 1 }, _e(de.value.legend, (E, J) => (c(), h("div", {
+          class: "vue-ui-quick-chart-legend-item",
+          onClick: (B) => {
+            ie(E.id, de.value.legend.length - 1), l("selectLegend", E);
+          },
+          style: z(`cursor: ${de.value.legend.length > 1 ? "pointer" : "default"}; opacity:${b.value.includes(E.id) ? "0.5" : "1"}`)
+        }, [
+          i.value.useCustomLegend ? $e(j.$slots, "legend", Ze(Vn({ key: 0 }, { legend: E })), void 0, !0) : (c(), h(we, { key: 1 }, [
+            rt(Jt, {
+              name: i.value.legendIcon,
+              stroke: E.color,
+              size: i.value.legendIconSize
+            }, null, 8, ["name", "stroke", "size"]),
+            y("span", {
+              style: z(`font-size:${i.value.legendFontSize}px`)
+            }, D(E.name), 5)
+          ], 64))
+        ], 12, iW))), 256)) : F("", !0),
+        S.value === la.BAR ? (c(!0), h(we, { key: 2 }, _e(se.value.legend, (E, J) => (c(), h("div", {
+          class: "vue-ui-quick-chart-legend-item",
+          onClick: (B) => {
+            ie(E.id, se.value.legend.length - 1), l("selectLegend", E);
+          },
+          style: z(`cursor: ${se.value.legend.length > 1 ? "pointer" : "default"}; opacity:${b.value.includes(E.id) ? "0.5" : "1"}`)
+        }, [
+          i.value.useCustomLegend ? $e(j.$slots, "legend", Ze(Vn({ key: 0 }, { legend: E })), void 0, !0) : (c(), h(we, { key: 1 }, [
+            rt(Jt, {
+              name: i.value.legendIcon,
+              stroke: E.color,
+              size: i.value.legendIconSize
+            }, null, 8, ["name", "stroke", "size"]),
+            y("span", {
+              style: z(`font-size:${i.value.legendFontSize}px`)
+            }, D(E.name), 5)
+          ], 64))
+        ], 12, AW))), 256)) : F("", !0)
+      ], 4)) : F("", !0),
       rt(na, {
         show: i.value.showTooltip && n.value,
         backgroundColor: i.value.backgroundColor,
@@ -44149,9 +44141,15 @@ const u1 = (e) => (ja("data-v-eb784c24"), e = e(), Ga(), e), oK = ["id"], rK = [
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "parent", "content", "isCustom"])
-    ], 64));
+    ], 14, oK)) : (c(), h("div", uW, [
+      rt(Jt, {
+        name: "circleCancel",
+        stroke: "red"
+      }),
+      cW
+    ]));
   }
-}, hW = /* @__PURE__ */ Qt(dW, [["__scopeId", "data-v-eb784c24"]]), fW = {
+}, hW = /* @__PURE__ */ Qt(dW, [["__scopeId", "data-v-e5cc2621"]]), fW = {
   key: 0,
   style: { width: "100%", display: "flex", gap: "6px", "align-items": "center", color: "#FF0000" }
 }, vW = { style: { width: "36px" } }, wW = {