vue-chrts 0.2.5-test.3 → 1.0.0-test.1

package/dist/components/AreaChart/AreaChart.js

@@ -1,5 +1,5 @@
-import { defineComponent as W, useSlots as x, useTemplateRef as E, ref as M, computed as u, createElementBlock as c, openBlock as s, normalizeClass as w, normalizeStyle as g, createVNode as m, createCommentVNode as d, createElementVNode as X, unref as a, withCtx as z, createBlock as y, Fragment as v, renderList as R, mergeProps as h, renderSlot as T } from "vue";
-import { Position as L, CurveType as C } from "@unovis/ts";
+import { defineComponent as N, useSlots as W, useTemplateRef as E, ref as M, computed as u, createElementBlock as y, openBlock as s, normalizeClass as w, normalizeStyle as k, createVNode as m, createCommentVNode as d, createElementVNode as X, unref as n, withCtx as z, createBlock as c, Fragment as h, renderList as R, mergeProps as f, renderSlot as T } from "vue";
+import { Position as C, CurveType as L } from "@unovis/ts";
 import { createMarkers as Y, getFirstPropertyValue as U } from "../../utils.js";
 import H from "../Tooltip.js";
 import { VisXYContainer as q, VisTooltip as J, VisArea as K, VisLine as Q, VisAxis as A, VisCrosshair as Z, VisBulletLegend as I } from "@unovis/vue";
@@ -7,7 +7,7 @@ import { LegendPosition as _ } from "../../types.js";
 const ee = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, ie = 0.5, $ = "#3b82f6", se = /* @__PURE__ */ W({
+}, ie = 0.5, $ = "#3b82f6", se = /* @__PURE__ */ N({
   __name: "AreaChart",
   props: {
     data: {},
@@ -46,19 +46,21 @@ const ee = {
     crosshairConfig: { default: () => ({
       color: "#666"
     }) },
+    xAxisConfig: {},
+    yAxisConfig: {},
     yDomain: {},
     xDomain: {}
   },
   emits: ["click"],
   setup(D, { emit: b }) {
-    const B = b, t = D, O = x(), k = E("slotWrapper"), p = M(), f = u(() => {
+    const B = b, t = D, O = W(), v = E("slotWrapper"), p = M(), g = u(() => {
       const e = Object.values(t.categories).map(
-        (n, i) => `var(--vis-color${i})`
+        (a, i) => `var(--vis-color${i})`
       );
       return Object.values(t.categories).map(
-        (n, i) => n.color ?? e[i]
+        (a, i) => a.color ?? e[i]
       );
-    }), V = u(() => t.markerConfig ? Y(t.markerConfig) : ""), F = u(() => t.legendPosition.startsWith("top")), G = u(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center"), P = u(() => {
+    }), V = u(() => t.markerConfig ? Y(t.markerConfig) : ""), x = u(() => t.legendPosition.startsWith("top")), F = u(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center"), G = u(() => {
       const e = (i, o) => {
         var r;
         return `
@@ -69,7 +71,7 @@ const ee = {
       <stop offset="100%" stop-color="${o}" stop-opacity="0" />
     </linearGradient>
   `;
-      }, n = (i, o) => {
+      }, a = (i, o) => {
         var r;
         return `
     <linearGradient id="gradient${i}-${o}" gradientTransform="rotate(90)">
@@ -82,65 +84,64 @@ const ee = {
     </linearGradient>
   `;
       };
-      return f.value.map(
-        (i, o) => i != null && i.includes("#") ? e(o, i) : n(o, i ?? $)
+      return g.value.map(
+        (i, o) => i != null && i.includes("#") ? e(o, i) : a(o, i ?? $)
       ).join("");
     });
-    function S(e) {
-      var n;
+    function P(e) {
+      var a;
       return {
         y: (i) => Number(i[e]),
-        color: ((n = t.categories[e]) == null ? void 0 : n.color) ?? $
+        color: ((a = t.categories[e]) == null ? void 0 : a.color) ?? $
       };
     }
-    function j(e) {
-      return typeof window > "u" ? "" : k.value ? k.value.innerHTML : "";
+    function S(e) {
+      return typeof window > "u" ? "" : v.value ? v.value.innerHTML : "";
     }
-    function N(e) {
-      return p.value = e, j();
+    function j(e) {
+      return p.value = e, S();
     }
-    return (e, n) => (s(), c("div", {
-      style: g({
+    return (e, a) => (s(), y("div", {
+      style: k({
         display: "flex",
-        flexDirection: F.value ? "column-reverse" : "column",
+        flexDirection: x.value ? "column-reverse" : "column",
         gap: "var(--vis-legend-spacing)"
       }),
       class: w({ markers: !!t.markerConfig }),
-      onClick: n[0] || (n[0] = (i) => B("click", i, p.value))
+      onClick: a[0] || (a[0] = (i) => B("click", i, p.value))
     }, [
-      m(a(q), {
+      m(n(q), {
         data: e.data,
         height: e.height,
         padding: e.padding,
-        "svg-defs": P.value + V.value,
+        "svg-defs": G.value + V.value,
         "y-domain": e.yDomain,
         "x-domain": e.xDomain
       }, {
         default: z(() => [
-          e.hideTooltip ? d("", !0) : (s(), y(a(J), {
+          e.hideTooltip ? d("", !0) : (s(), c(n(J), {
             key: 0,
-            "horizontal-placement": a(L).Right,
-            "vertical-placement": a(L).Top
+            "horizontal-placement": n(C).Right,
+            "vertical-placement": n(C).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"])),
-          (s(!0), c(v, null, R(Object.keys(t.categories), (i, o) => (s(), c(v, { key: i }, [
-            m(a(K), h({
-              x: (r, l) => l,
-              ref_for: !0
-            }, S(i), {
-              color: `url(#gradient${o}-${f.value[o]})`,
+          (s(!0), y(h, null, R(Object.keys(t.categories), (i, o) => (s(), y(h, { key: i }, [
+            m(n(K), f({
+              x: (r, l) => l
+            }, { ref_for: !0 }, P(i), {
+              color: `url(#gradient${o}-${g.value[o]})`,
               opacity: e.hideArea ? 0 : ie,
-              "curve-type": e.curveType ?? a(C).MonotoneX
+              "curve-type": e.curveType ?? n(L).MonotoneX
             }), null, 16, ["x", "color", "opacity", "curve-type"]),
-            m(a(Q), {
+            m(n(Q), {
               x: (r, l) => l,
               y: (r) => r[i],
-              color: f.value[o],
-              "curve-type": e.curveType ?? a(C).MonotoneX,
+              color: g.value[o],
+              "curve-type": e.curveType ?? n(L).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) : (s(), y(a(A), {
+          e.hideXAxis ? d("", !0) : (s(), c(n(A), f({
             key: 1,
             type: "x",
             label: e.xLabel,
@@ -152,8 +153,8 @@ const ee = {
             "domain-line": e.xDomainLine,
             "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) : (s(), y(a(A), {
+          }, e.xAxisConfig), null, 16, ["label", "num-ticks", "tick-format", "tick-values", "grid-line", "domain-line", "tick-line", "min-max-ticks-only"])),
+          e.hideYAxis ? d("", !0) : (s(), c(n(A), f({
             key: 2,
             type: "y",
             label: e.yLabel,
@@ -162,20 +163,20 @@ const ee = {
             "grid-line": e.yGridLine,
             "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) : (s(), y(a(Z), h({ key: 3 }, e.crosshairConfig, { template: N }), null, 16))
+          }, e.yAxisConfig), null, 16, ["label", "num-ticks", "tick-format", "grid-line", "domain-line", "tick-line"])),
+          e.hideTooltip ? d("", !0) : (s(), c(n(Z), f({ key: 3 }, e.crosshairConfig, { template: j }), null, 16))
         ]),
         _: 1
       }, 8, ["data", "height", "padding", "svg-defs", "y-domain", "x-domain"]),
-      t.hideLegend ? d("", !0) : (s(), c("div", {
+      t.hideLegend ? d("", !0) : (s(), y("div", {
         key: 0,
-        style: g({
+        style: k({
           display: "flex",
-          justifyContent: G.value
+          justifyContent: F.value
         })
       }, [
-        m(a(I), {
-          style: g([
+        m(n(I), {
+          style: k([
             t.legendStyle,
             "display: flex; gap: var(--vis-legend-spacing);"
           ]),
@@ -186,14 +187,14 @@ const ee = {
         }, null, 8, ["style", "items"])
       ], 4)),
       X("div", ee, [
-        a(O).tooltip ? T(e.$slots, "tooltip", {
+        n(O).tooltip ? T(e.$slots, "tooltip", {
           key: 0,
           values: p.value
         }) : p.value ? T(e.$slots, "fallback", { key: 1 }, () => [
           m(H, {
             data: p.value,
             categories: e.categories,
-            toolTipTitle: a(U)(p.value) ?? "",
+            toolTipTitle: n(U)(p.value) ?? "",
             yFormatter: t.yFormatter
           }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
         ]) : d("", !0)

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

@@ -1,4 +1,4 @@
-import { axisFormatter, CrosshairConfig, LegendPosition, MarkerConfig } from '../../types';
+import { axisFormatter, CrosshairConfig, LegendPosition, MarkerConfig, AxisConfig } from '../../types';
 import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
 export interface AreaChartProps<T> {
     /**
@@ -39,17 +39,11 @@ export interface AreaChartProps<T> {
      */
     markerConfig?: Record<string, MarkerConfig>;
     /**
-     * @param {number|Date} tick - The value of the tick. This can be a number or a Date object depending on the scale of the x-axis.
-     * @param {number} i - The index of the tick in the `ticks` array.
-     * @param {(number[]|Date[])} ticks - An array of all tick values for the x-axis.
-     * @returns {string} The formatted string representation of the tick.
+     * A function that formats the x-axis tick labels.
      */
     xFormatter?: axisFormatter;
     /**
-     * @param {number|Date} tick - The value of the tick. This can be a number or a Date object depending on the scale of the y-axis.
-     * @param {number} i - The index of the tick in the `ticks` array.
-     * @param {(number[]|Date[])} ticks - An array of all tick values for the y-axis.
-     * @returns {string} The formatted string representation of the tick.
+     * A function that formats the y-axis tick labels.
      */
     yFormatter?: axisFormatter;
     /**
@@ -145,6 +139,14 @@ export interface AreaChartProps<T> {
      * Crosshair configuration object for customizing the appearance of the crosshair line.
      */
     crosshairConfig?: CrosshairConfig;
+    /**
+     * Axis configuration object for customizing the appearance of the axes.
+     */
+    xAxisConfig?: AxisConfig;
+    /**
+     * Axis configuration object for customizing the appearance of the axes.
+     */
+    yAxisConfig?: AxisConfig;
     /**
      * The domain for the y-axis, specified as a tuple of two values.
      */

package/dist/components/BarChart/BarChart.js

@@ -1,11 +1,11 @@
-import { defineComponent as W, useSlots as X, useTemplateRef as Y, ref as j, computed as f, createElementBlock as v, openBlock as n, normalizeStyle as L, createVNode as k, createCommentVNode as y, createElementVNode as H, unref as i, withCtx as $, createBlock as u, Fragment as q, renderList as I, renderSlot as P } from "vue";
+import { defineComponent as W, useSlots as X, useTemplateRef as H, ref as Y, computed as f, createElementBlock as v, openBlock as l, normalizeStyle as L, createVNode as k, createCommentVNode as y, createElementVNode as j, unref as i, withCtx as $, createBlock as u, Fragment as q, renderList as I, mergeProps as P, renderSlot as C } from "vue";
 import { Orientation as p, StackedBar as U, GroupedBar as J } from "@unovis/ts";
 import { getFirstPropertyValue as K } from "../../utils.js";
 import { useStackedGrouped as Q } from "./stackedGroupedUtils.js";
-import { VisXYContainer as Z, VisXYLabels as _, VisTooltip as ee, VisStackedBar as C, VisGroupedBar as ae, VisAxis as F, VisBulletLegend as ie } from "@unovis/vue";
+import { VisXYContainer as Z, VisXYLabels as _, VisTooltip as ee, VisStackedBar as F, VisGroupedBar as ae, VisAxis as V, VisBulletLegend as ie } from "@unovis/vue";
 import oe from "../Tooltip.js";
 import { LegendPosition as re } from "../../types.js";
-const te = {
+const ne = {
   ref: "slotWrapper",
   style: { display: "none" }
 }, ge = /* @__PURE__ */ W({
@@ -47,22 +47,24 @@ const te = {
     hideXAxis: { type: Boolean },
     hideYAxis: { type: Boolean },
     stackedGroupedSpacing: { default: 0.1 },
+    xAxisConfig: {},
+    yAxisConfig: {},
     stackAndGrouped: { type: Boolean },
     valueLabel: {},
     xAxis: {}
   },
   emits: ["click"],
-  setup(V, { emit: G }) {
-    const S = G, a = V, O = X(), h = Y("slotWrapper"), s = j();
+  setup(G, { emit: S }) {
+    const O = S, a = G, D = X(), x = H("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 x = f(() => a.yAxis.map((e) => (r) => r[e])), A = (e, r) => {
-      var o;
-      return (o = Object.values(a.categories)[r]) == null ? void 0 : o.color;
+    const h = f(() => a.yAxis.map((e) => (t) => t[e])), A = (e, t) => {
+      var r;
+      return (r = Object.values(a.categories)[t]) == null ? void 0 : r.color;
     }, c = f(
       () => Q({
         data: a.data,
@@ -71,92 +73,95 @@ const te = {
         xAxis: a.xAxis,
         spacing: a.stackedGroupedSpacing
       }).value
-    ), w = f(() => a.legendPosition.startsWith("top")), D = f(() => a.legendPosition.includes("left") ? "flex-start" : a.legendPosition.includes("right") ? "flex-end" : "center");
+    ), E = f(() => a.legendPosition.startsWith("top")), N = f(() => a.legendPosition.includes("left") ? "flex-start" : a.legendPosition.includes("right") ? "flex-end" : "center");
     function B(e) {
-      return s.value = e, E();
+      s.value = e;
     }
-    function E(e) {
-      return typeof window > "u" ? "" : h.value ? h.value.innerHTML : "";
-    }
-    const T = a.yAxis.map((e) => (r) => r[e]), N = T.length, z = a.data.flatMap(
-      (e, r) => T.map((o, d) => ({
-        x: r,
-        y: Number(o(e) ?? 0),
+    const T = a.yAxis.map((e) => (t) => t[e]), M = T.length, w = a.data.flatMap(
+      (e, t) => T.map((r, d) => ({
+        x: t,
+        y: Number(r(e) ?? 0),
         itemIndex: d
       }))
-    ), M = (e) => {
+    ), z = (e) => {
       if (a.stacked || a.stackAndGrouped) return e.x;
-      const r = N;
-      if (r <= 1) return e.x;
-      const d = 1 - (a.groupPadding ?? 0), g = d / r, m = -d / 2, t = g * e.itemIndex + g / 2, b = 1 - (a.barPadding ?? 0), R = (m + t) * b;
+      const t = M;
+      if (t <= 1) return e.x;
+      const d = 1 - (a.groupPadding ?? 0), g = d / t, m = -d / 2, o = g * e.itemIndex + g / 2, b = 1 - (a.barPadding ?? 0), R = (m + o) * b;
       return e.x + R;
     };
-    return (e, r) => (n(), v("div", {
+    return (e, t) => (l(), v("div", {
       style: L({
         display: "flex",
-        flexDirection: w.value ? "column-reverse" : "column",
+        flexDirection: E.value ? "column-reverse" : "column",
         gap: "var(--vis-legend-spacing)"
       }),
-      onClick: r[0] || (r[0] = (o) => S("click", o, s.value))
+      onClick: t[0] || (t[0] = (r) => O("click", r, s.value))
     }, [
       k(i(Z), {
         padding: e.padding,
         height: e.height
       }, {
         default: $(() => {
-          var o, d, g, m;
+          var r, d, g, m;
           return [
-            e.valueLabel ? (n(), u(i(_), {
+            e.valueLabel ? (l(), u(i(_), {
               key: 0,
-              data: i(z),
-              x: M,
-              y: (t) => {
-                var l;
-                return t.y + (((l = a.valueLabel) == null ? void 0 : l.labelSpacing) ?? 0);
+              data: i(w),
+              x: z,
+              y: (o) => {
+                var n;
+                return o.y + (((n = a.valueLabel) == null ? void 0 : n.labelSpacing) ?? 0);
               },
-              label: (o = a.valueLabel) == null ? void 0 : o.label,
+              label: (r = a.valueLabel) == null ? void 0 : r.label,
               backgroundColor: ((d = a.valueLabel) == null ? void 0 : d.backgroundColor) ?? "transparent",
               color: ((g = a.valueLabel) == null ? void 0 : g.color) ?? "red",
               labelFontSize: (m = a.valueLabel) == null ? void 0 : m.labelFontSize
             }, null, 8, ["data", "y", "label", "backgroundColor", "color", "labelFontSize"])) : y("", !0),
             k(i(ee), {
               triggers: {
-                [i(J).selectors.bar]: B,
-                [i(U).selectors.bar]: B
+                [i(J).selectors.bar]: (o) => {
+                  var n;
+                  return B(o), o ? (n = x.value) == null ? void 0 : n.innerHTML : "";
+                },
+                [i(U).selectors.bar]: (o) => {
+                  var n;
+                  return B(o), o ? (n = x.value) == null ? void 0 : n.innerHTML : "";
+                }
               }
             }, null, 8, ["triggers"]),
-            e.stackAndGrouped ? (n(!0), v(q, { key: 1 }, I(c.value.states, (t) => (n(), u(i(C), {
-              key: t,
+            e.stackAndGrouped ? (l(!0), v(q, { key: 1 }, I(c.value.states, (o) => (l(), u(i(F), {
+              key: o,
               data: c.value.chartData,
-              x: (l, b) => b + c.value.positions[t],
-              y: c.value.bars[t],
-              color: c.value.colorFunctions[t],
+              x: (n, b) => b + c.value.positions[o],
+              y: c.value.bars[o],
+              color: c.value.colorFunctions[o],
               "rounded-corners": e.radius ?? 0,
               "group-padding": e.groupPadding ?? 0,
               "bar-padding": e.barPadding,
               orientation: e.orientation ?? i(p).Vertical
-            }, null, 8, ["data", "x", "y", "color", "rounded-corners", "group-padding", "bar-padding", "orientation"]))), 128)) : e.stacked ? (n(), u(i(C), {
+            }, null, 8, ["data", "x", "y", "color", "rounded-corners", "group-padding", "bar-padding", "orientation"]))), 128)) : e.stacked ? (l(), u(i(F), {
               key: 3,
               data: e.data,
-              x: (t, l) => l,
-              y: x.value,
+              x: (o, n) => n,
+              y: h.value,
               color: A,
               "rounded-corners": e.radius ?? 0,
               "group-padding": e.groupPadding ?? 0,
               "bar-padding": e.barPadding ?? 0.2,
               orientation: e.orientation ?? i(p).Vertical
-            }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (n(), u(i(ae), {
+            }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (l(), u(i(ae), {
               key: 2,
               data: e.data,
-              x: (t, l) => l,
-              y: x.value,
+              x: (o, n) => n,
+              y: h.value,
               color: A,
               "rounded-corners": e.radius ?? 0,
               "group-padding": e.groupPadding ?? 0,
               "bar-padding": e.barPadding ?? 0.2,
               orientation: e.orientation ?? i(p).Vertical
             }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
-            e.hideXAxis ? y("", !0) : (n(), u(i(F), {
+            e.hideXAxis ? y("", !0) : (l(), u(i(V), P({
               key: 4,
               type: "x",
               "tick-format": e.xFormatter,
@@ -167,8 +172,8 @@ const te = {
               "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 ? y("", !0) : (n(), u(i(F), {
+            }, e.xAxisConfig), null, 16, ["tick-format", "label", "grid-line", "domain-line", "tick-line", "num-ticks", "tick-values", "minMaxTicksOnly"])),
+            e.hideYAxis ? y("", !0) : (l(), u(i(V), P({
               key: 5,
               type: "y",
               label: e.yLabel,
@@ -177,16 +182,16 @@ const te = {
               "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"]))
+            }, e.yAxisConfig), null, 16, ["label", "grid-line", "domain-line", "tick-format", "num-ticks", "tick-line"]))
           ];
         }),
         _: 1
       }, 8, ["padding", "height"]),
-      a.hideLegend ? y("", !0) : (n(), v("div", {
+      a.hideLegend ? y("", !0) : (l(), v("div", {
         key: 0,
         style: L({
           display: "flex",
-          justifyContent: D.value
+          justifyContent: N.value
         })
       }, [
         k(i(ie), {
@@ -194,17 +199,17 @@ const te = {
             a.legendStyle,
             "display: flex; gap: var(--vis-legend-spacing);"
           ]),
-          items: Object.values(a.categories).map((o) => ({
-            ...o,
-            color: Array.isArray(o.color) ? o.color[0] : o.color
+          items: Object.values(a.categories).map((r) => ({
+            ...r,
+            color: Array.isArray(r.color) ? r.color[0] : r.color
           }))
         }, null, 8, ["style", "items"])
       ], 4)),
-      H("div", te, [
-        i(O).tooltip ? P(e.$slots, "tooltip", {
+      j("div", ne, [
+        i(D).tooltip ? C(e.$slots, "tooltip", {
           key: 0,
           values: s.value
-        }) : s.value ? P(e.$slots, "fallback", { key: 1 }, () => [
+        }) : s.value ? C(e.$slots, "fallback", { key: 1 }, () => [
           k(oe, {
             data: s.value,
             categories: a.categories,

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

@@ -1,9 +1,8 @@
 import { ComputedRef } from 'vue';
+import { BulletLegendItemInterface } from '../../types';
 export interface StackedGroupedConfig<T> {
     data: T[];
-    categories: Record<string, {
-        color?: string | Array<string>;
-    }>;
+    categories: Record<string, BulletLegendItemInterface>;
     stackAndGrouped: boolean;
     xAxis?: keyof T;
     spacing?: number;

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

@@ -1,4 +1,4 @@
-import { BulletLegendItemInterface, Orientation, LegendPosition, axisFormatter } from '../../types';
+import { BulletLegendItemInterface, Orientation, LegendPosition, axisFormatter, AxisConfig } from '../../types';
 type BarChartPropsBase<T> = {
     /**
      * The data to be displayed in the bar chart.
@@ -142,6 +142,14 @@ type BarChartPropsBase<T> = {
      * Only applicable if `stackAndGrouped` is `true`.
      */
     stackedGroupedSpacing?: number;
+    /**
+     * Axis configuration object for customizing the appearance of the axes.
+     */
+    xAxisConfig?: AxisConfig;
+    /**
+     * Axis configuration object for customizing the appearance of the axes.
+     */
+    yAxisConfig?: AxisConfig;
 };
 export type BarChartProps<T> = BarChartPropsBase<T> & {
     /**