vue-chrts 0.2.3 → 0.2.5

package/dist/components/AreaChart/AreaChart.js

@@ -1,13 +1,13 @@
-import { defineComponent as U, useSlots as j, useTemplateRef as w, ref as R, computed as u, createElementBlock as m, openBlock as r, normalizeClass as S, normalizeStyle as T, createVNode as p, createCommentVNode as d, createElementVNode as X, unref as i, withCtx as z, createBlock as c, Fragment as L, renderList as I, mergeProps as C, renderSlot as A } from "vue";
-import { Position as D, CurveType as b } from "@unovis/ts";
-import { createMarkers as Y, getFirstPropertyValue as x } from "../../utils.js";
+import { defineComponent as U, useSlots as j, useTemplateRef as w, ref as R, computed as p, createElementBlock as u, openBlock as a, normalizeClass as S, normalizeStyle as T, createVNode as m, createCommentVNode as d, createElementVNode as X, unref as t, withCtx as x, createBlock as c, Fragment as L, renderList as z, mergeProps as C, renderSlot as D } from "vue";
+import { Position as A, CurveType as b } from "@unovis/ts";
+import { createMarkers as I, getFirstPropertyValue as Y } from "../../utils.js";
 import H from "../Tooltip.js";
 import { VisXYContainer as K, VisTooltip as q, VisArea as J, VisLine as Q, VisAxis as B, VisCrosshair as Z, VisBulletLegend as _ } from "@unovis/vue";
 import { LegendPosition as ee } from "../../types.js";
-const te = {
+const ie = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, y = 24, V = 4, ie = 0.5, F = "#3b82f6", de = /* @__PURE__ */ U({
+}, y = 24, V = 4, te = 0.5, F = "#3b82f6", de = /* @__PURE__ */ U({
   __name: "AreaChart",
   props: {
     data: {},
@@ -22,10 +22,10 @@ const te = {
     curveType: {},
     lineWidth: { default: 2 },
     lineDashArray: {},
-    xNumTicks: { default: (a) => a.data.length > y ? y / V : a.data.length - 1 },
+    xNumTicks: { default: (r) => r.data.length > y ? y / V : r.data.length - 1 },
     xExplicitTicks: {},
     minMaxTicksOnly: { type: Boolean },
-    yNumTicks: { default: (a) => a.data.length > y ? y / V : a.data.length - 1 },
+    yNumTicks: { default: (r) => r.data.length > y ? y / V : r.data.length - 1 },
     hideLegend: { type: Boolean },
     hideTooltip: { type: Boolean },
     legendPosition: {},
@@ -39,32 +39,34 @@ const te = {
     hideYAxis: { type: Boolean },
     crosshairConfig: { default: () => ({
       color: "#666"
-    }) }
+    }) },
+    yDomain: {},
+    xDomain: {}
   },
   emits: ["click"],
-  setup(a, { emit: $ }) {
-    const G = $, n = a, O = j(), h = w("slotWrapper"), s = R(), f = u(
+  setup(r, { emit: $ }) {
+    const G = $, n = r, O = j(), h = w("slotWrapper"), s = R(), f = p(
       () => Object.values(n.categories).map((e) => e.color)
-    ), N = u(() => n.markerConfig ? Y(n.markerConfig) : ""), g = u(() => n.legendPosition === ee.Top), E = u(() => {
-      const e = (t, o) => `
-    <linearGradient id="gradient${t}-${o}" gradientTransform="rotate(90)">
+    ), N = p(() => n.markerConfig ? I(n.markerConfig) : ""), g = p(() => n.legendPosition === ee.Top), E = p(() => {
+      const e = (i, o) => `
+    <linearGradient id="gradient${i}-${o}" gradientTransform="rotate(90)">
       <stop offset="0%" stop-color="${o}" stop-opacity="1" />
       <stop offset="100%" stop-color="${o}" stop-opacity="0" />
     </linearGradient>
-  `, l = (t, o) => `
-    <linearGradient id="gradient${t}-${o}" gradientTransform="rotate(90)">
+  `, l = (i, o) => `
+    <linearGradient id="gradient${i}-${o}" gradientTransform="rotate(90)">
       <stop offset="0%" style="stop-color:var(--vis-color0);stop-opacity:1" />
       <stop offset="100%" style="stop-color:var(--vis-color0);stop-opacity:0" />
     </linearGradient>
   `;
       return f.value.map(
-        (t, o) => t != null && t.includes("#") ? e(o, t) : l(o, t ?? F)
+        (i, o) => i != null && i.includes("#") ? e(o, i) : l(o, i ?? F)
       ).join("");
     });
     function P(e) {
       var l;
       return {
-        y: (t) => Number(t[e]),
+        y: (i) => Number(i[e]),
         color: ((l = n.categories[e]) == null ? void 0 : l.color) ?? F
       };
     }
@@ -74,44 +76,46 @@ const te = {
     function M(e) {
       return s.value = e, W();
     }
-    return (e, l) => (r(), m("div", {
+    return (e, l) => (a(), u("div", {
       style: T({
         display: "flex",
         flexDirection: g.value ? "column-reverse" : "column"
       }),
       class: S({ markers: !!n.markerConfig }),
-      onClick: l[0] || (l[0] = (t) => G("click", t, s.value))
+      onClick: l[0] || (l[0] = (i) => G("click", i, s.value))
     }, [
-      p(i(K), {
+      m(t(K), {
         data: e.data,
         height: e.height,
         padding: e.padding,
-        "svg-defs": E.value + N.value
+        "svg-defs": E.value + N.value,
+        "y-domain": e.yDomain,
+        "x-domain": e.xDomain
       }, {
-        default: z(() => [
-          e.hideTooltip ? d("", !0) : (r(), c(i(q), {
+        default: x(() => [
+          e.hideTooltip ? d("", !0) : (a(), c(t(q), {
             key: 0,
-            "horizontal-placement": i(D).Right,
-            "vertical-placement": i(D).Top
+            "horizontal-placement": t(A).Right,
+            "vertical-placement": t(A).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"])),
-          (r(!0), m(L, null, I(Object.keys(n.categories), (t, o) => (r(), m(L, { key: t }, [
-            p(i(J), C({
+          (a(!0), u(L, null, z(Object.keys(n.categories), (i, o) => (a(), u(L, { key: i }, [
+            m(t(J), C({
               x: (k, v) => v
-            }, { ref_for: !0 }, P(t), {
+            }, { ref_for: !0 }, P(i), {
               color: `url(#gradient${o}-${f.value[o]})`,
-              opacity: ie,
-              "curve-type": e.curveType ?? i(b).MonotoneX
+              opacity: te,
+              "curve-type": e.curveType ?? t(b).MonotoneX
             }), null, 16, ["x", "color", "curve-type"]),
-            p(i(Q), {
+            m(t(Q), {
               x: (k, v) => v,
-              y: (k) => k[t],
+              y: (k) => k[i],
               color: f.value[o],
-              "curve-type": e.curveType ?? i(b).MonotoneX,
+              "curve-type": e.curveType ?? t(b).MonotoneX,
               "line-width": e.lineWidth,
               lineDashArray: e.lineDashArray ? e.lineDashArray[o] : void 0
             }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"])
           ], 64))), 128)),
-          e.hideXAxis ? d("", !0) : (r(), c(i(B), {
+          e.hideXAxis ? d("", !0) : (a(), c(t(B), {
             key: 1,
             type: "x",
             label: e.xLabel,
@@ -124,7 +128,7 @@ const te = {
             "tick-line": e.xTickLine,
             "min-max-ticks-only": e.minMaxTicksOnly
           }, null, 8, ["label", "num-ticks", "tick-format", "tick-values", "grid-line", "domain-line", "tick-line", "min-max-ticks-only"])),
-          e.hideYAxis ? d("", !0) : (r(), c(i(B), {
+          e.hideYAxis ? d("", !0) : (a(), c(t(B), {
             key: 2,
             type: "y",
             label: e.yLabel,
@@ -134,11 +138,11 @@ const te = {
             "domain-line": e.yDomainLine,
             "tick-line": e.yTickLine
           }, null, 8, ["label", "num-ticks", "tick-format", "grid-line", "domain-line", "tick-line"])),
-          e.hideTooltip ? d("", !0) : (r(), c(i(Z), C({ key: 3 }, e.crosshairConfig, { template: M }), null, 16))
+          e.hideTooltip ? d("", !0) : (a(), c(t(Z), C({ key: 3 }, e.crosshairConfig, { template: M }), null, 16))
         ]),
         _: 1
-      }, 8, ["data", "height", "padding", "svg-defs"]),
-      e.hideLegend ? d("", !0) : (r(), m("div", {
+      }, 8, ["data", "height", "padding", "svg-defs", "y-domain", "x-domain"]),
+      e.hideLegend ? d("", !0) : (a(), u("div", {
         key: 0,
         style: T({
           display: "flex",
@@ -148,19 +152,19 @@ const te = {
           paddingTop: g.value ? void 0 : "1rem"
         })
       }, [
-        p(i(_), {
+        m(t(_), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
       ], 4)),
-      X("div", te, [
-        i(O).tooltip ? A(e.$slots, "tooltip", {
+      X("div", ie, [
+        t(O).tooltip ? D(e.$slots, "tooltip", {
           key: 0,
           values: s.value
-        }) : s.value ? A(e.$slots, "fallback", { key: 1 }, () => [
-          p(H, {
+        }) : s.value ? D(e.$slots, "fallback", { key: 1 }, () => [
+          m(H, {
             data: s.value,
             categories: e.categories,
-            toolTipTitle: i(x)(s.value) ?? "",
+            toolTipTitle: t(Y)(s.value) ?? "",
             yFormatter: n.yFormatter
           }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
         ]) : d("", !0)

package/dist/components/AreaChart/types.d.ts

@@ -72,7 +72,7 @@ export interface AreaChartProps<T> {
     /**
      * Force specific ticks on the x-axis.
      */
-    xExplicitTicks?: number;
+    xExplicitTicks?: (number | string | Date)[];
     /**
      * Force only first and last ticks on the x-axis.
      */
@@ -130,4 +130,12 @@ export interface AreaChartProps<T> {
      * Crosshair configuration object for customizing the appearance of the crosshair line.
      */
     crosshairConfig?: CrosshairConfig;
+    /**
+     * The domain for the y-axis, specified as a tuple of two values.
+     */
+    yDomain?: [number | undefined, number | undefined];
+    /**
+     * The domain for the x-axis, specified as a tuple of two values.
+     */
+    xDomain?: [number | undefined, number | undefined];
 }

package/dist/components/BarChart/BarChart.js

@@ -1,14 +1,14 @@
-import { defineComponent as C, useSlots as S, useTemplateRef as D, ref as N, computed as c, createElementBlock as y, openBlock as n, normalizeStyle as T, createVNode as g, createCommentVNode as m, createElementVNode as O, unref as i, withCtx as w, createBlock as u, Fragment as E, renderList as M, renderSlot as B } from "vue";
-import { Orientation as l, StackedBar as j, GroupedBar as z } from "@unovis/ts";
-import { getFirstPropertyValue as H } from "../../utils.js";
-import { useStackedGrouped as W } from "./stackedGroupedUtils.js";
-import { VisXYContainer as X, VisTooltip as Y, VisStackedBar as L, VisGroupedBar as $, VisAxis as A, VisBulletLegend as R } from "@unovis/vue";
-import q from "../Tooltip.js";
-import { LegendPosition as I } from "../../types.js";
-const U = {
+import { defineComponent as R, useSlots as W, useTemplateRef as X, ref as Y, computed as b, createElementBlock as v, openBlock as t, normalizeStyle as P, createVNode as k, createCommentVNode as m, createElementVNode as j, unref as o, withCtx as H, createBlock as u, Fragment as $, renderList as q, renderSlot as C } from "vue";
+import { Orientation as p, StackedBar as I, GroupedBar as U } from "@unovis/ts";
+import { getFirstPropertyValue as J } from "../../utils.js";
+import { useStackedGrouped as K } from "./stackedGroupedUtils.js";
+import { VisXYContainer as Q, VisXYLabels as Z, VisTooltip as _, VisStackedBar as F, VisGroupedBar as ee, VisAxis as V, VisBulletLegend as ae } from "@unovis/vue";
+import oe from "../Tooltip.js";
+import { LegendPosition as ie } from "../../types.js";
+const re = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, ae = /* @__PURE__ */ C({
+}, ce = /* @__PURE__ */ R({
   __name: "BarChart",
   props: {
     data: {},
@@ -25,17 +25,17 @@ const U = {
     categories: {},
     xFormatter: {},
     yFormatter: {},
-    yNumTicks: { default: (t) => t.data.length > 24 ? 24 / 4 : t.data.length - 1 },
+    yNumTicks: {},
     minMaxTicksOnly: { type: Boolean },
-    xNumTicks: { default: (t) => t.data.length > 24 ? 24 / 4 : t.data.length - 1 },
+    xNumTicks: {},
     xExplicitTicks: {},
     yAxis: {},
-    groupPadding: {},
-    barPadding: {},
+    groupPadding: { default: 0 },
+    barPadding: { default: 0.2 },
     radius: {},
     hideLegend: { type: Boolean },
     hideTooltip: { type: Boolean, default: !1 },
-    orientation: { default: l.Vertical },
+    orientation: { default: p.Vertical },
     legendPosition: {},
     xDomainLine: { type: Boolean },
     yDomainLine: { type: Boolean },
@@ -47,131 +47,168 @@ const U = {
     hideYAxis: { type: Boolean },
     stackedGroupedSpacing: { default: 0.1 },
     stackAndGrouped: { type: Boolean },
+    valueLabel: {},
     xAxis: {}
   },
   emits: ["click"],
-  setup(t, { emit: V }) {
-    const x = V, a = t, G = S(), k = D("slotWrapper"), r = N();
+  setup(G, { emit: S }) {
+    const O = S, a = G, w = W(), L = X("slotWrapper"), s = Y();
+    if (a.valueLabel && !a.xAxis)
+      throw new Error(
+        "BarChart: 'xAxis' prop is required when 'valueLabel' is enabled. Please provide an 'xAxis' to display value labels."
+      );
     if (!a.yAxis || a.yAxis.length === 0)
       throw new Error("yAxis is required");
-    const f = c(() => a.yAxis.map((e) => (d) => d[e])), v = (e, d) => {
-      var o;
-      return (o = Object.values(a.categories)[d]) == null ? void 0 : o.color;
-    }, s = c(
-      () => W({
+    const h = b(() => a.yAxis.map((e) => (r) => r[e])), x = (e, r) => {
+      var i;
+      return (i = Object.values(a.categories)[r]) == null ? void 0 : i.color;
+    }, c = b(
+      () => K({
         data: a.data,
         categories: a.categories,
         stackAndGrouped: a.stackAndGrouped,
         xAxis: a.xAxis,
         spacing: a.stackedGroupedSpacing
       }).value
-    ), h = c(
-      () => a.legendPosition === I.Top
+    ), A = b(
+      () => a.legendPosition === ie.Top
     );
-    function b(e) {
-      return r.value = e, P();
+    function B(e) {
+      return s.value = e, D();
     }
-    function P(e) {
-      return typeof window > "u" ? "" : k.value ? k.value.innerHTML : "";
+    function D(e) {
+      return typeof window > "u" ? "" : L.value ? L.value.innerHTML : "";
     }
-    return (e, d) => (n(), y("div", {
-      style: T({
+    const T = a.yAxis.map((e) => (r) => r[e]), E = T.length, N = a.data.flatMap(
+      (e, r) => T.map((i, d) => ({
+        x: r,
+        y: Number(i(e) ?? 0),
+        itemIndex: d
+      }))
+    ), z = (e) => {
+      if (a.stacked || a.stackAndGrouped) return e.x;
+      const r = E;
+      if (r <= 1) return e.x;
+      const d = 1 - (a.groupPadding ?? 0), g = d / r, y = -d / 2, n = g * e.itemIndex + g / 2, f = 1 - (a.barPadding ?? 0), M = (y + n) * f;
+      return e.x + M;
+    };
+    return (e, r) => (t(), v("div", {
+      style: P({
         display: "flex",
-        flexDirection: h.value ? "column-reverse" : "column",
+        flexDirection: A.value ? "column-reverse" : "column",
         gap: "1rem"
       }),
-      onClick: d[0] || (d[0] = (o) => x("click", o, r.value))
+      onClick: r[0] || (r[0] = (i) => O("click", i, s.value))
     }, [
-      g(i(X), {
+      k(o(Q), {
         padding: e.padding,
         height: e.height
       }, {
-        default: w(() => [
-          g(i(Y), {
-            triggers: {
-              [i(z).selectors.bar]: b,
-              [i(j).selectors.bar]: b
-            }
-          }, null, 8, ["triggers"]),
-          e.stackAndGrouped ? (n(!0), y(E, { key: 0 }, M(s.value.states, (o) => (n(), u(i(L), {
-            key: o,
-            data: s.value.chartData,
-            x: (p, F) => F + s.value.positions[o],
-            y: s.value.bars[o],
-            color: s.value.colorFunctions[o],
-            "rounded-corners": e.radius ?? 0,
-            "group-padding": e.groupPadding ?? 0,
-            "bar-padding": e.barPadding,
-            orientation: e.orientation ?? i(l).Vertical
-          }, null, 8, ["data", "x", "y", "color", "rounded-corners", "group-padding", "bar-padding", "orientation"]))), 128)) : e.stacked ? (n(), u(i(L), {
-            key: 2,
-            data: e.data,
-            x: (o, p) => p,
-            y: f.value,
-            color: v,
-            "rounded-corners": e.radius ?? 0,
-            "group-padding": e.groupPadding ?? 0,
-            "bar-padding": e.barPadding ?? 0.2,
-            orientation: e.orientation ?? i(l).Vertical
-          }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (n(), u(i($), {
-            key: 1,
-            data: e.data,
-            x: (o, p) => p,
-            y: f.value,
-            color: v,
-            "rounded-corners": e.radius ?? 0,
-            "group-padding": e.groupPadding ?? 0,
-            "bar-padding": e.barPadding ?? 0.2,
-            orientation: e.orientation ?? i(l).Vertical
-          }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
-          e.hideXAxis ? m("", !0) : (n(), u(i(A), {
-            key: 3,
-            type: "x",
-            "tick-format": e.xFormatter,
-            label: e.xLabel,
-            "grid-line": e.xGridLine,
-            "domain-line": !!e.xDomainLine,
-            "tick-line": e.xTickLine,
-            "num-ticks": e.xNumTicks,
-            "tick-values": e.xExplicitTicks,
-            minMaxTicksOnly: e.minMaxTicksOnly
-          }, null, 8, ["tick-format", "label", "grid-line", "domain-line", "tick-line", "num-ticks", "tick-values", "minMaxTicksOnly"])),
-          e.hideYAxis ? m("", !0) : (n(), u(i(A), {
-            key: 4,
-            type: "y",
-            label: e.yLabel,
-            "grid-line": e.orientation !== i(l).Horizontal && e.yGridLine,
-            "domain-line": !!e.yDomainLine,
-            "tick-format": e.yFormatter,
-            "num-ticks": e.yNumTicks,
-            "tick-line": e.yTickLine
-          }, null, 8, ["label", "grid-line", "domain-line", "tick-format", "num-ticks", "tick-line"]))
-        ]),
+        default: H(() => {
+          var i, d, g, y;
+          return [
+            e.valueLabel ? (t(), u(o(Z), {
+              key: 0,
+              data: o(N),
+              x: z,
+              y: (n) => {
+                var l;
+                return n.y + (((l = a.valueLabel) == null ? void 0 : l.labelSpacing) ?? 0);
+              },
+              label: (i = a.valueLabel) == null ? void 0 : i.label,
+              backgroundColor: ((d = a.valueLabel) == null ? void 0 : d.backgroundColor) ?? "transparent",
+              color: ((g = a.valueLabel) == null ? void 0 : g.color) ?? "red",
+              labelFontSize: (y = a.valueLabel) == null ? void 0 : y.labelFontSize
+            }, null, 8, ["data", "y", "label", "backgroundColor", "color", "labelFontSize"])) : m("", !0),
+            k(o(_), {
+              triggers: {
+                [o(U).selectors.bar]: B,
+                [o(I).selectors.bar]: B
+              }
+            }, null, 8, ["triggers"]),
+            e.stackAndGrouped ? (t(!0), v($, { key: 1 }, q(c.value.states, (n) => (t(), u(o(F), {
+              key: n,
+              data: c.value.chartData,
+              x: (l, f) => f + c.value.positions[n],
+              y: c.value.bars[n],
+              color: c.value.colorFunctions[n],
+              "rounded-corners": e.radius ?? 0,
+              "group-padding": e.groupPadding ?? 0,
+              "bar-padding": e.barPadding,
+              orientation: e.orientation ?? o(p).Vertical
+            }, null, 8, ["data", "x", "y", "color", "rounded-corners", "group-padding", "bar-padding", "orientation"]))), 128)) : e.stacked ? (t(), u(o(F), {
+              key: 3,
+              data: e.data,
+              x: (n, l) => l,
+              y: h.value,
+              color: x,
+              "rounded-corners": e.radius ?? 0,
+              "group-padding": e.groupPadding ?? 0,
+              "bar-padding": e.barPadding ?? 0.2,
+              orientation: e.orientation ?? o(p).Vertical
+            }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (t(), u(o(ee), {
+              key: 2,
+              data: e.data,
+              x: (n, l) => l,
+              y: h.value,
+              color: x,
+              "rounded-corners": e.radius ?? 0,
+              "group-padding": e.groupPadding ?? 0,
+              "bar-padding": e.barPadding ?? 0.2,
+              orientation: e.orientation ?? o(p).Vertical
+            }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
+            e.hideXAxis ? m("", !0) : (t(), u(o(V), {
+              key: 4,
+              type: "x",
+              "tick-format": e.xFormatter,
+              label: e.xLabel,
+              "grid-line": e.xGridLine,
+              "domain-line": !!e.xDomainLine,
+              "tick-line": e.xTickLine,
+              "num-ticks": e.xNumTicks,
+              "tick-values": e.xExplicitTicks,
+              minMaxTicksOnly: e.minMaxTicksOnly
+            }, null, 8, ["tick-format", "label", "grid-line", "domain-line", "tick-line", "num-ticks", "tick-values", "minMaxTicksOnly"])),
+            e.hideYAxis ? m("", !0) : (t(), u(o(V), {
+              key: 5,
+              type: "y",
+              label: e.yLabel,
+              "grid-line": e.orientation !== o(p).Horizontal && e.yGridLine,
+              "domain-line": !!e.yDomainLine,
+              "tick-format": e.yFormatter,
+              "num-ticks": e.yNumTicks,
+              "tick-line": e.yTickLine
+            }, null, 8, ["label", "grid-line", "domain-line", "tick-format", "num-ticks", "tick-line"]))
+          ];
+        }),
         _: 1
       }, 8, ["padding", "height"]),
-      e.hideLegend ? m("", !0) : (n(), y("div", {
+      e.hideLegend ? m("", !0) : (t(), v("div", {
         key: 0,
-        style: T({
+        style: P({
           display: "flex",
           alignItems: "center",
           justifyContent: "flex-end",
-          paddingBottom: h.value ? "1rem" : void 0
+          paddingBottom: A.value ? "1rem" : void 0
         })
       }, [
-        g(i(R), {
-          items: Object.values(a.categories)
+        k(o(ae), {
+          items: Object.values(a.categories).map((i) => ({
+            ...i,
+            color: Array.isArray(i.color) ? i.color[0] : i.color
+          }))
         }, null, 8, ["items"])
       ], 4)),
-      O("div", U, [
-        i(G).tooltip ? B(e.$slots, "tooltip", {
+      j("div", re, [
+        o(w).tooltip ? C(e.$slots, "tooltip", {
           key: 0,
-          values: r.value
-        }) : r.value ? B(e.$slots, "fallback", { key: 1 }, () => [
-          g(q, {
-            data: r.value,
+          values: s.value
+        }) : s.value ? C(e.$slots, "fallback", { key: 1 }, () => [
+          k(oe, {
+            data: s.value,
             categories: a.categories,
-            toolTipTitle: i(H)(r.value) ?? "",
-            yFormatter: a.orientation === i(l).Horizontal ? a.xFormatter : a.yFormatter
+            toolTipTitle: o(J)(s.value) ?? "",
+            yFormatter: a.orientation === o(p).Horizontal ? a.xFormatter : a.yFormatter
           }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
         ]) : m("", !0)
       ], 512)
@@ -179,5 +216,5 @@ const U = {
   }
 });
 export {
-  ae as default
+  ce as default
 };

package/dist/components/BarChart/BarChart.vue.d.ts

@@ -7,7 +7,7 @@ declare const _default: <T extends {}>(__VLS_props: NonNullable<Awaited<typeof _
     attrs: any;
     slots: {
         tooltip?(_: {
-            values: any;
+            values: T | undefined;
         }): any;
         fallback?(_: {}): any;
     };

package/dist/components/BarChart/stackedGroupedUtils.d.ts

@@ -2,7 +2,7 @@ import { ComputedRef } from 'vue';
 export interface StackedGroupedConfig<T> {
     data: T[];
     categories: Record<string, {
-        color?: string;
+        color?: string | Array<string>;
     }>;
     stackAndGrouped: boolean;
     xAxis?: keyof T;

package/dist/components/BarChart/stackedGroupedUtils.js

@@ -2,11 +2,11 @@ import { computed as u } from "vue";
 import { flattenData as i } from "../../utils.js";
 function g(t) {
   return u(() => {
-    const e = p(t.categories), o = f(t.categories, e), r = d(o, t.categories), c = l(o), n = m(r), s = h(e, t.spacing), a = t.stackAndGrouped ? i(t.data, t.xAxis) : t.data;
+    const r = f(t.categories), e = p(t.categories, r), o = l(e, t.categories), c = d(e), n = m(o), s = y(r, t.spacing), a = t.stackAndGrouped ? i(t.data, t.xAxis) : t.data;
     return {
-      states: e,
-      groupedByState: o,
-      colors: r,
+      states: r,
+      groupedByState: e,
+      colors: o,
       bars: c,
       colorFunctions: n,
       positions: s,
@@ -14,51 +14,52 @@ function g(t) {
     };
   });
 }
-function p(t) {
-  const e = /* @__PURE__ */ new Set();
-  return Object.keys(t).forEach((r) => {
-    const c = r.match(/([A-Z][a-z]+)$/);
-    c && e.add(c[1]);
-  }), Array.from(e);
+function f(t) {
+  const r = /* @__PURE__ */ new Set();
+  return Object.keys(t).forEach((o) => {
+    const c = o.match(/([A-Z][a-z]+)$/);
+    c && r.add(c[1]);
+  }), Array.from(r);
 }
-function f(t, e) {
-  const o = {};
-  return e.forEach((r) => {
-    o[r] = Object.keys(t).filter(
-      (c) => c.endsWith(r)
+function p(t, r) {
+  const e = {};
+  return r.forEach((o) => {
+    e[o] = Object.keys(t).filter(
+      (c) => c.endsWith(o)
     );
-  }), o;
-}
-function d(t, e) {
-  const o = {};
-  return Object.entries(t).forEach(([r, c]) => {
-    o[r] = c.map((n) => {
-      var s;
-      return ((s = e[n]) == null ? void 0 : s.color) ?? "#ccc";
-    });
-  }), o;
+  }), e;
 }
-function l(t) {
+function l(t, r) {
   const e = {};
-  return Object.entries(t).forEach(([o, r]) => {
-    e[o] = r.map((c) => {
-      const n = c.replace(o, "").toLowerCase();
-      return (s) => s[n + o];
+  return Object.entries(t).forEach(([o, c]) => {
+    e[o] = c.map((n) => {
+      var a;
+      const s = (a = r[n]) == null ? void 0 : a.color;
+      return Array.isArray(s) ? s[0] ?? "#ccc" : s ?? "#ccc";
     });
   }), e;
 }
+function d(t) {
+  const r = {};
+  return Object.entries(t).forEach(([e, o]) => {
+    r[e] = o.map((c) => {
+      const n = c.replace(e, "").toLowerCase();
+      return (s) => s[n + e];
+    });
+  }), r;
+}
 function m(t) {
-  const e = {};
-  return Object.entries(t).forEach(([o, r]) => {
-    e[o] = (c, n) => r[n] ?? "#ccc";
-  }), e;
+  const r = {};
+  return Object.entries(t).forEach(([e, o]) => {
+    r[e] = (c, n) => o[n] ?? "#ccc";
+  }), r;
 }
-function h(t, e = 0.4) {
-  const o = t.length, r = {};
+function y(t, r = 0.4) {
+  const e = t.length, o = {};
   return t.forEach((c, n) => {
-    const s = (n - (o - 1) / 2) * e;
-    r[c] = s;
-  }), r;
+    const s = (n - (e - 1) / 2) * r;
+    o[c] = s;
+  }), o;
 }
 export {
   g as useStackedGrouped

package/dist/components/BarChart/types.d.ts

@@ -66,7 +66,7 @@ type BarChartPropsBase<T> = {
     /**
      * Force specific ticks on the x-axis.
      */
-    xExplicitTicks?: number;
+    xExplicitTicks?: (number | string | Date)[];
     /**
      * An array of property keys from the data object type 'T' to be used for the y-axis values.
      */
@@ -133,23 +133,35 @@ type BarChartPropsBase<T> = {
      * If `true`, hide the y-axis.
      */
     hideYAxis?: boolean;
+    /**
+     * Specific spacing between stacked and grouped bars in pixels.
+     * Only applicable if `stackAndGrouped` is `true`.
+     */
     stackedGroupedSpacing?: number;
 };
-type BarChartPropsStackAndGrouped<T> = BarChartPropsBase<T> & {
-    stackAndGrouped: true;
+export type BarChartProps<T> = BarChartPropsBase<T> & {
     /**
-     * The key in the data object type 'T' to be used for the x-axis values.
-     * Required when stackAndGrouped is true.
+     * Whether the bars should be stacked and grouped.
+     * If true, `valueLabel` is optional and `xAxis` is required.
      */
-    xAxis: keyof T;
-};
-type BarChartPropsNormal<T> = BarChartPropsBase<T> & {
-    stackAndGrouped?: false;
+    stackAndGrouped?: boolean;
     /**
-     * The key in the data object type 'T' to be used for the x-axis values.
-     * Optional when stackAndGrouped is not true.
+     * Configuration for the value label display.
+     * Required if `stackAndGrouped` is false and `xAxis` is present.
+     * Optional otherwise.
+     */
+    valueLabel?: ValueLabel;
+    /**
+     * The data key for the X-axis.
+     * Required if `stackAndGrouped` is true, or if `stackAndGrouped` is false AND `valueLabel` is present.
      */
     xAxis?: keyof T;
 };
-export type BarChartProps<T> = BarChartPropsStackAndGrouped<T> | BarChartPropsNormal<T>;
+export type ValueLabel = {
+    label: (d: any, index: number) => string | number;
+    labelSpacing?: number;
+    backgroundColor?: string;
+    color?: string;
+    labelFontSize?: number;
+};
 export {};

package/dist/components/BubbleChart/BubbleChart.js

@@ -1,19 +1,16 @@
-import { defineComponent as z, useSlots as P, useTemplateRef as N, ref as O, computed as R, createElementBlock as c, openBlock as a, Fragment as j, createCommentVNode as r, createVNode as s, createElementVNode as w, unref as t, withCtx as D, createBlock as u, renderSlot as g } from "vue";
-import { Scatter as K, Position as M } from "@unovis/ts";
-import { VisBulletLegend as k, VisXYContainer as S, VisTooltip as E, VisScatter as G, VisAxis as x } from "@unovis/vue";
-import { LegendPosition as d } from "../../types.js";
-import { getFirstPropertyValue as $ } from "../../utils.js";
-import W from "../Tooltip.js";
-const X = {
+import { defineComponent as C, useSlots as z, useTemplateRef as P, ref as _, createElementBlock as m, openBlock as n, Fragment as N, createCommentVNode as l, createVNode as s, createElementVNode as O, unref as t, withCtx as R, createBlock as c, renderSlot as p } from "vue";
+import { Scatter as w, Position as D } from "@unovis/ts";
+import { VisBulletLegend as K, VisXYContainer as M, VisTooltip as S, VisScatter as E, VisAxis as f } from "@unovis/vue";
+import { LegendPosition as g } from "../../types.js";
+import { getFirstPropertyValue as G } from "../../utils.js";
+import $ from "../Tooltip.js";
+const j = {
   key: 0,
   class: "flex items-center justify-end pb-4"
-}, Y = {
-  key: 1,
-  class: "flex items-center justify-end pt-4"
-}, q = {
+}, W = {
   ref: "slotWrapper",
   class: "hidden"
-}, ee = /* @__PURE__ */ z({
+}, J = /* @__PURE__ */ C({
   __name: "BubbleChart",
   props: {
     xAccessor: {},
@@ -34,7 +31,7 @@ const X = {
     categoryKey: {},
     xFormatter: {},
     yFormatter: {},
-    legendPosition: { default: d.Bottom },
+    legendPosition: { default: g.Bottom },
     sizeOptions: {},
     xDomainLine: { type: Boolean, default: !0 },
     yDomainLine: { type: Boolean, default: !0 },
@@ -52,51 +49,60 @@ const X = {
     }) }
   },
   emits: ["click"],
-  setup(L, { emit: h }) {
-    const e = L, T = P(), m = N("slotWrapper"), o = O(), y = R(() => e.categories && typeof e.categories == "object" && !Array.isArray(e.categories) ? Object.values(e.categories) : Array.isArray(e.categories) ? e.categories : []), b = e.xAccessor, B = e.yAccessor, v = e.sizeAccessor || ((i) => typeof i.comments == "number" ? i.comments : 1), A = (i) => {
-      var p, f;
+  setup(k, { emit: x }) {
+    const e = k, L = z(), u = P("slotWrapper"), a = _(), T = e.xAccessor, h = e.yAccessor, b = e.sizeAccessor || ((o) => typeof o.comments == "number" ? o.comments : 1), B = (o) => {
+      var d, y;
       if (!e.categories || !e.categoryKey)
-        return console.warn("BubbleChart: categories and categoryKey are required for color mapping"), "#cccccc";
-      const n = String(i[e.categoryKey]);
-      let l = (p = e.categories[n]) == null ? void 0 : p.color;
-      return Object.keys(e.categories).length === 1 && (l = (f = e.categories[e.categoryKey]) == null ? void 0 : f.color), l || (console.warn(`BubbleChart: No color defined for category "${n}"`), "#cccccc");
-    }, F = h;
-    function V(i) {
-      return o.value = i, C();
+        return console.warn(
+          "BubbleChart: categories and categoryKey are required for color mapping"
+        ), "#cccccc";
+      const r = String(o[e.categoryKey]);
+      let i = (d = e.categories[r]) == null ? void 0 : d.color;
+      return Object.keys(e.categories).length === 1 && (i = (y = e.categories[e.categoryKey]) == null ? void 0 : y.color), i || (console.warn(
+        `BubbleChart: No color defined for category "${r}"`
+      ), "#cccccc");
+    }, v = x;
+    function A(o) {
+      return a.value = o, F();
     }
-    function C(i) {
-      return typeof window > "u" ? "" : m.value ? m.value.innerHTML : "";
+    function F(o) {
+      return typeof window > "u" ? "" : u.value ? u.value.innerHTML : "";
     }
-    const _ = {
-      [K.selectors.point]: V
+    const V = {
+      [w.selectors.point]: A
     };
-    return (i, n) => (a(), c(j, null, [
-      !e.hideLegend && e.legendPosition === t(d).Top ? (a(), c("div", X, [
-        s(t(k), { items: y.value }, null, 8, ["items"])
-      ])) : r("", !0),
-      s(t(S), {
+    return (o, r) => (n(), m(N, null, [
+      !e.hideLegend && e.legendPosition === t(g).Top ? (n(), m("div", j, [
+        s(t(K), {
+          items: Object.values(e.categories).map((i) => ({
+            ...i,
+            color: Array.isArray(i.color) ? i.color[0] : i.color
+          }))
+        }, null, 8, ["items"])
+      ])) : l("", !0),
+      s(t(M), {
         data: e.data,
         height: e.height || 600,
         padding: e.padding,
         scaleByDomain: !0,
-        onClick: n[0] || (n[0] = (l) => F("click", l, o.value))
+        onClick: r[0] || (r[0] = (i) => v("click", i, a.value))
       }, {
-        default: D(() => [
-          e.hideTooltip ? r("", !0) : (a(), u(t(E), {
+        default: R(() => [
+          e.hideTooltip ? l("", !0) : (n(), c(t(S), {
             key: 0,
-            triggers: _
+            triggers: V
           })),
-          s(t(G), {
-            x: t(b),
-            y: t(B),
-            color: A,
-            size: t(v),
-            labelPosition: e.labelPosition || t(M).Bottom,
+          s(t(E), {
+            x: t(T),
+            y: t(h),
+            color: B,
+            size: t(b),
+            labelPosition: e.labelPosition || t(D).Bottom,
             sizeRange: e.sizeRange || [1, 20],
             opacity: e.opacity,
             cursor: "pointer"
           }, null, 8, ["x", "y", "size", "labelPosition", "sizeRange", "opacity"]),
-          e.hideXAxis ? r("", !0) : (a(), u(t(x), {
+          e.hideXAxis ? l("", !0) : (n(), c(t(f), {
             key: 1,
             type: "x",
             label: e.xLabel,
@@ -108,7 +114,7 @@ const X = {
             tickValues: e.xExplicitTicks,
             minMaxTicksOnly: e.minMaxTicksOnly
           }, null, 8, ["label", "tickFormat", "gridLine", "domainLine", "tickLine", "numTicks", "tickValues", "minMaxTicksOnly"])),
-          e.hideYAxis ? r("", !0) : (a(), u(t(x), {
+          e.hideYAxis ? l("", !0) : (n(), c(t(f), {
             key: 2,
             type: "y",
             label: e.yLabel,
@@ -121,25 +127,22 @@ const X = {
         ]),
         _: 1
       }, 8, ["data", "height", "padding"]),
-      !e.hideLegend && e.legendPosition === t(d).Bottom ? (a(), c("div", Y, [
-        s(t(k), { items: y.value }, null, 8, ["items"])
-      ])) : r("", !0),
-      w("div", q, [
-        t(T).tooltip ? g(i.$slots, "tooltip", {
+      O("div", W, [
+        t(L).tooltip ? p(o.$slots, "tooltip", {
           key: 0,
-          values: o.value
-        }) : o.value ? g(i.$slots, "fallback", { key: 1 }, () => [
-          s(W, {
-            data: o.value,
+          values: a.value
+        }) : a.value ? p(o.$slots, "fallback", { key: 1 }, () => [
+          s($, {
+            data: a.value,
             categories: e.categories || {},
-            toolTipTitle: t($)(o.value) ?? "",
+            toolTipTitle: t(G)(a.value) ?? "",
             yFormatter: e.yFormatter
           }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
-        ]) : r("", !0)
+        ]) : l("", !0)
       ], 512)
     ], 64));
   }
 });
 export {
-  ee as default
+  J as default
 };

package/dist/components/LineChart/LineChart.js

@@ -1,4 +1,4 @@
-import { defineComponent as P, computed as f, useSlots as O, useTemplateRef as j, ref as w, createElementBlock as p, openBlock as n, normalizeClass as x, normalizeStyle as k, createVNode as s, createCommentVNode as a, createElementVNode as M, unref as i, withCtx as W, createBlock as m, Fragment as z, renderList as E, mergeProps as G, renderSlot as h } from "vue";
+import { defineComponent as N, computed as f, useSlots as P, useTemplateRef as O, ref as j, createElementBlock as p, openBlock as a, normalizeClass as w, normalizeStyle as k, createVNode as m, createCommentVNode as r, createElementVNode as M, unref as i, withCtx as W, createBlock as d, Fragment as z, renderList as E, mergeProps as G, renderSlot as h } from "vue";
 import { Position as v, CurveType as X } from "@unovis/ts";
 import { createMarkers as $, getFirstPropertyValue as R } from "../../utils.js";
 import S from "../Tooltip.js";
@@ -7,7 +7,7 @@ import { LegendPosition as J } from "../../types.js";
 const Q = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, oe = /* @__PURE__ */ P({
+}, te = /* @__PURE__ */ N({
   __name: "LineChart",
   props: {
     data: {},
@@ -27,10 +27,10 @@ const Q = {
     curveType: {},
     lineWidth: { default: 2 },
     lineDashArray: {},
-    xNumTicks: { default: (o) => o.data.length > 24 ? 24 / 4 : o.data.length - 1 },
+    xNumTicks: { default: (n) => n.data.length > 24 ? 24 / 4 : n.data.length - 1 },
     xExplicitTicks: {},
     minMaxTicksOnly: { type: Boolean },
-    yNumTicks: { default: (o) => o.data.length > 24 ? 24 / 4 : o.data.length - 1 },
+    yNumTicks: { default: (n) => n.data.length > 24 ? 24 / 4 : n.data.length - 1 },
     hideTooltip: { type: Boolean },
     hideLegend: { type: Boolean },
     legendPosition: {},
@@ -44,52 +44,56 @@ const Q = {
     hideYAxis: { type: Boolean },
     crosshairConfig: { default: () => ({
       color: "#666"
-    }) }
+    }) },
+    yDomain: {},
+    xDomain: {}
   },
   emits: ["click"],
-  setup(o, { emit: L }) {
-    const C = L, t = o, B = f(() => t.markerConfig ? $(t.markerConfig) : ""), b = O(), c = j("slotWrapper"), l = w();
-    function D(e) {
+  setup(n, { emit: L }) {
+    const D = L, o = n, C = f(() => o.markerConfig ? $(o.markerConfig) : ""), B = P(), c = O("slotWrapper"), l = j();
+    function b(e) {
       return typeof window > "u" ? "" : c.value ? c.value.innerHTML : "";
     }
-    function V(e) {
-      return l.value = e, D();
+    function A(e) {
+      return l.value = e, b();
     }
     const y = f(
-      () => t.legendPosition === J.Top
-    ), A = Object.values(t.categories).map(
-      (e, r) => `var(--vis-color${r})`
-    ), F = (e) => Object.values(t.categories)[e].color ?? A[e];
-    return (e, r) => (n(), p("div", {
+      () => o.legendPosition === J.Top
+    ), V = Object.values(o.categories).map(
+      (e, s) => `var(--vis-color${s})`
+    ), F = (e) => Object.values(o.categories)[e].color ?? V[e];
+    return (e, s) => (a(), p("div", {
       style: k({
         display: "flex",
         flexDirection: y.value ? "column-reverse" : "column",
         gap: "1rem"
       }),
-      class: x({ markers: !!t.markerConfig }),
-      onClick: r[0] || (r[0] = (d) => C("click", d, l.value))
+      class: w({ markers: !!o.markerConfig }),
+      onClick: s[0] || (s[0] = (t) => D("click", t, l.value))
     }, [
-      s(i(Y), {
+      m(i(Y), {
         data: e.data,
         padding: e.padding,
         height: e.height,
-        svgDefs: B.value
+        svgDefs: C.value,
+        yDomain: e.yDomain,
+        xDomain: e.xDomain
       }, {
         default: W(() => [
-          s(i(H), {
+          m(i(H), {
             "horizontal-placement": i(v).Right,
             "vertical-placement": i(v).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"]),
-          (n(!0), p(z, null, E(Object.keys(t.categories), (d, u) => (n(), m(i(I), {
+          (a(!0), p(z, null, E(Object.keys(o.categories), (t, u) => (a(), d(i(I), {
             key: u,
-            x: (g, N) => N,
-            y: (g) => g[d],
+            x: (g, x) => x,
+            y: (g) => g[t],
             color: F(u),
             "curve-type": e.curveType ?? i(X).MonotoneX,
             "line-width": e.lineWidth,
             lineDashArray: e.lineDashArray ? e.lineDashArray[u] : void 0
           }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"]))), 128)),
-          e.hideXAxis ? a("", !0) : (n(), m(i(T), {
+          e.hideXAxis ? r("", !0) : (a(), d(i(T), {
             key: 0,
             type: "x",
             "tick-format": e.xFormatter,
@@ -102,7 +106,7 @@ const Q = {
             "tick-values": e.xExplicitTicks,
             "min-max-ticks-only": e.minMaxTicksOnly
           }, null, 8, ["tick-format", "label", "domain-line", "grid-line", "tick-line", "num-ticks", "tick-values", "min-max-ticks-only"])),
-          e.hideYAxis ? a("", !0) : (n(), m(i(T), {
+          e.hideYAxis ? r("", !0) : (a(), d(i(T), {
             key: 1,
             type: "y",
             "tick-format": e.yFormatter,
@@ -112,11 +116,11 @@ const Q = {
             "grid-line": e.yGridLine,
             "tick-line": e.yTickLine
           }, null, 8, ["tick-format", "label", "num-ticks", "domain-line", "grid-line", "tick-line"])),
-          e.hideTooltip ? a("", !0) : (n(), m(i(U), G({ key: 2 }, e.crosshairConfig, { template: V }), null, 16))
+          e.hideTooltip ? r("", !0) : (a(), d(i(U), G({ key: 2 }, e.crosshairConfig, { template: A }), null, 16))
         ]),
         _: 1
-      }, 8, ["data", "padding", "height", "svgDefs"]),
-      e.hideLegend ? a("", !0) : (n(), p("div", {
+      }, 8, ["data", "padding", "height", "svgDefs", "yDomain", "xDomain"]),
+      e.hideLegend ? r("", !0) : (a(), p("div", {
         key: 0,
         style: k({
           display: "flex",
@@ -125,26 +129,29 @@ const Q = {
           paddingBottom: y.value ? "1rem" : void 0
         })
       }, [
-        s(i(q), {
-          items: Object.values(e.categories)
+        m(i(q), {
+          items: Object.values(o.categories).map((t) => ({
+            ...t,
+            color: Array.isArray(t.color) ? t.color[0] : t.color
+          }))
         }, null, 8, ["items"])
       ], 4)),
       M("div", Q, [
-        i(b).tooltip ? h(e.$slots, "tooltip", {
+        i(B).tooltip ? h(e.$slots, "tooltip", {
           key: 0,
           values: l.value
         }) : l.value ? h(e.$slots, "fallback", { key: 1 }, () => [
-          s(S, {
+          m(S, {
             data: l.value,
             categories: e.categories,
             toolTipTitle: i(R)(l.value) ?? "",
-            yFormatter: t.yFormatter
+            yFormatter: o.yFormatter
           }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
-        ]) : a("", !0)
+        ]) : r("", !0)
       ], 512)
     ], 6));
   }
 });
 export {
-  oe as default
+  te as default
 };

package/dist/components/LineChart/types.d.ts

@@ -71,7 +71,7 @@ export interface LineChartProps<T> {
     /**
      * Force specific ticks on the x-axis.
      */
-    xExplicitTicks?: number;
+    xExplicitTicks?: (number | string | Date)[];
     /**
      * Force only first and last ticks on the x-axis.
      */
@@ -129,4 +129,12 @@ export interface LineChartProps<T> {
      * Crosshair configuration object for customizing the appearance of the crosshair line.
      */
     crosshairConfig?: CrosshairConfig;
+    /**
+     * The domain for the y-axis, specified as a tuple of two values.
+     */
+    yDomain?: [number | undefined, number | undefined];
+    /**
+     * The domain for the x-axis, specified as a tuple of two values.
+     */
+    xDomain?: [number | undefined, number | undefined];
 }

package/dist/components/Tooltip.js

@@ -1,11 +1,11 @@
-import { defineComponent as v, computed as y, createElementBlock as r, openBlock as i, createElementVNode as e, toDisplayString as l, Fragment as h, renderList as b, normalizeStyle as n } from "vue";
-const f = { style: { padding: "10px 15px" } }, x = { style: {
+import { defineComponent as y, computed as f, createElementBlock as r, openBlock as i, createElementVNode as e, toDisplayString as l, Fragment as h, renderList as b, normalizeStyle as n } from "vue";
+const x = { style: { padding: "10px 15px" } }, _ = { style: {
   color: "var(--tooltip-value-color)",
   textTransform: "capitalize",
   borderBottom: "1px solid rgba(255, 255, 255, 0.05)",
   marginBottom: "0.25rem",
   paddingBottom: "0.25rem"
-} }, B = /* @__PURE__ */ v({
+} }, T = /* @__PURE__ */ y({
   __name: "Tooltip",
   props: {
     data: {},
@@ -13,21 +13,21 @@ const f = { style: { padding: "10px 15px" } }, x = { style: {
     toolTipTitle: {},
     yFormatter: { type: Function }
   },
-  setup(c) {
-    const a = c, d = ["_index", "_stacked", "_ending"], m = y(() => Object.entries(a.data ?? []).filter(
-      ([t, g]) => !d.includes(t) && Object.keys(a.categories).includes(t)
+  setup(d) {
+    const a = d, m = ["_index", "_stacked", "_ending"], g = f(() => Object.entries(a.data ?? []).filter(
+      ([t, u]) => !m.includes(t) && Object.keys(a.categories).includes(t)
     ));
-    return (t, g) => (i(), r("div", f, [
-      e("div", x, l(t.toolTipTitle), 1),
-      (i(!0), r(h, null, b(m.value, ([o, s], u) => {
-        var p;
+    return (t, u) => (i(), r("div", x, [
+      e("div", _, l(t.toolTipTitle), 1),
+      (i(!0), r(h, null, b(g.value, ([o, s], v) => {
+        var p, c;
         return i(), r("div", {
           key: o,
           style: { display: "flex", "align-items": "center", "margin-bottom": "4px" }
         }, [
           e("span", {
             style: n([{ width: "8px", height: "8px", "border-radius": "4px", "margin-right": "8px" }, {
-              backgroundColor: (p = t.categories[o]) != null && p.color ? t.categories[o].color : `var(--vis-color${u})`
+              backgroundColor: typeof ((p = t.categories[o]) == null ? void 0 : p.color) == "string" && ((c = t.categories[o]) != null && c.color) ? t.categories[o].color : `var(--vis-color${v})`
             }])
           }, null, 4),
           e("div", null, [
@@ -44,5 +44,5 @@ const f = { style: { padding: "10px 15px" } }, x = { style: {
   }
 });
 export {
-  B as default
+  T as default
 };

package/dist/types.d.ts

@@ -29,7 +29,7 @@ declare enum CurveType {
 }
 interface BulletLegendItemInterface {
     name: string | number;
-    color?: string;
+    color?: string | Array<string>;
     className?: string;
     shape?: any;
     inactive?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chrts",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "type": "module",
   "files": [
     "dist"
@@ -28,8 +28,8 @@
     "@tanstack/vue-table": "^8.21.2",
     "@types/node": "^22.13.11",
     "@types/rollup": "^0.54.0",
-    "@unovis/ts": "^1.5.2",
-    "@unovis/vue": "^1.5.2",
+    "@unovis/ts": "^1.6.1",
+    "@unovis/vue": "^1.6.1",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/tsconfig": "^0.7.0",
     "@vueuse/core": "^13.0.0",