@yamada-ui/charts 2.0.0-next-20240729113003 → 2.0.0-next-20240820160301

package/dist/index.js

@@ -23,6 +23,7 @@ var src_exports = {};
 __export(src_exports, {
   AreaChart: () => AreaChart,
   BarChart: () => BarChart,
+  ChartCell: () => import_recharts8.Cell,
   DonutChart: () => DonutChart,
   LineChart: () => LineChart,
   PieChart: () => PieChart,
@@ -601,20 +602,29 @@ var import_core4 = require("@yamada-ui/core");
 var import_utils4 = require("@yamada-ui/utils");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var ChartTooltip = (0, import_core4.forwardRef)(
-  ({ label, className, payload = [], valueFormatter, unit, ...rest }, ref) => {
+  ({
+    label,
+    className,
+    payload = [],
+    valueFormatter,
+    labelFormatter,
+    unit,
+    ...rest
+  }, ref) => {
+    var _a;
     const { styles } = useTooltip();
     const items = payload.map(
       ({ color: colorProp, name, value: valueProp, payload: payload2 } = {}, index) => {
-        var _a;
+        var _a2;
         const color = colorProp != null ? colorProp : payload2 == null ? void 0 : payload2.color;
         let value;
         if ((0, import_utils4.isArray)(valueProp)) {
           value = valueProp.map((value2) => {
-            var _a2;
-            return `${(_a2 = valueFormatter == null ? void 0 : valueFormatter(value2)) != null ? _a2 : value2}`;
+            var _a3;
+            return `${(_a3 = valueFormatter == null ? void 0 : valueFormatter(value2)) != null ? _a3 : value2}`;
           }).join(" - ");
         } else {
-          value = (_a = valueFormatter == null ? void 0 : valueFormatter(valueProp)) != null ? _a : valueProp;
+          value = (_a2 = valueFormatter == null ? void 0 : valueFormatter(valueProp)) != null ? _a2 : valueProp;
         }
         return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
           import_core4.ui.div,
@@ -663,7 +673,7 @@ var ChartTooltip = (0, import_core4.forwardRef)(
         __css: styles.tooltip,
         ...rest,
         children: [
-          label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core4.ui.p, { className: "ui-chart__tooltip-title", __css: styles.tooltipTitle, children: label }) : null,
+          label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core4.ui.p, { className: "ui-chart__tooltip-title", __css: styles.tooltipTitle, children: (_a = labelFormatter == null ? void 0 : labelFormatter(label)) != null ? _a : label }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core4.ui.div, { className: "ui-chart__tooltip-list", __css: styles.tooltipList, children: items })
         ]
       }
@@ -686,7 +696,8 @@ var useChartAxis = ({
   xAxisLabel: xAxisLabelProp,
   yAxisLabel: yAxisLabelProp,
   unit,
-  valueFormatter,
+  yAxisTickFormatter = type === "percent" && layoutType === "horizontal" ? valueToPercent : void 0,
+  xAxisTickFormatter = type === "percent" && layoutType === "vertical" ? valueToPercent : void 0,
   styles,
   ...rest
 }) => {
@@ -705,8 +716,6 @@ var useChartAxis = ({
   const getTickLine = (withTickLine) => withTickLine ? { stroke: "currentColor" } : false;
   const xTickLine = getTickLine(withXTickLine);
   const yTickLine = getTickLine(withYTickLine);
-  const yAxisTickFormatter = type === "percent" && layoutType !== "vertical" ? valueToPercent : valueFormatter;
-  const xAxisTickFormatter = type === "percent" && layoutType === "vertical" ? valueToPercent : valueFormatter;
   const xAxisLabel = layoutType === "vertical" ? yAxisLabelProp : xAxisLabelProp;
   const yAxisLabel = layoutType === "vertical" ? xAxisLabelProp : yAxisLabelProp;
   const [xAxisProps, xAxisClassName] = getComponentProps(
@@ -1220,7 +1229,10 @@ var LineChart = (0, import_core10.forwardRef)((props, ref) => {
     xAxisLabelProps,
     yAxisLabelProps,
     unit,
+    yAxisTickFormatter,
+    xAxisTickFormatter,
     valueFormatter,
+    labelFormatter,
     referenceLineProps,
     tooltipProps,
     tooltipAnimationDuration,
@@ -1279,7 +1291,8 @@ var LineChart = (0, import_core10.forwardRef)((props, ref) => {
     xAxisLabelProps,
     yAxisLabelProps,
     unit,
-    valueFormatter,
+    yAxisTickFormatter,
+    xAxisTickFormatter,
     styles
   });
   const { getReferenceLineProps } = useChartReferenceLine({
@@ -1387,6 +1400,7 @@ var LineChart = (0, import_core10.forwardRef)((props, ref) => {
                         label,
                         payload,
                         valueFormatter,
+                        labelFormatter,
                         unit,
                         ...computedTooltipProps
                       }
@@ -1409,12 +1423,14 @@ var LineChart = (0, import_core10.forwardRef)((props, ref) => {
 var import_core12 = require("@yamada-ui/core");
 var import_utils13 = require("@yamada-ui/utils");
 var import_react10 = require("react");
-var import_recharts2 = require("recharts");
+var import_recharts3 = require("recharts");
 
-// src/use-bar-chart.ts
+// src/use-bar-chart.tsx
 var import_core11 = require("@yamada-ui/core");
 var import_utils12 = require("@yamada-ui/utils");
 var import_react9 = require("react");
+var import_recharts2 = require("recharts");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var useBarChart = ({
   data,
   series,
@@ -1426,6 +1442,7 @@ var useBarChart = ({
   xAxisLabel,
   yAxisLabel,
   styles,
+  cell = defaultBarCell,
   ...rest
 }) => {
   var _a;
@@ -1582,6 +1599,22 @@ var useBarChart = ({
     },
     [barPropsList, stacked]
   );
+  const bars = (0, import_react9.useMemo)(() => {
+    const hasStack = series.some((entry) => entry.stackId);
+    return series.map((series2, index) => {
+      const { dataKey } = series2;
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_recharts2.Bar,
+        {
+          ...getBarProps({ index, className: "ui-bar-chart__bar" }),
+          children: data.map(
+            (data2, index2) => (0, import_utils12.runIfFunc)(cell, { series: series2, data: data2, index: index2, hasStack })
+          )
+        },
+        `bar-${dataKey}`
+      );
+    });
+  }, [series, getBarProps, cell, data]);
   const getBarChartProps = (0, import_react9.useCallback)(
     ({ className, ...props } = {}, ref = null) => ({
       ref,
@@ -1610,15 +1643,32 @@ var useBarChart = ({
     ]
   );
   return {
+    bars,
     barVars,
     getBarProps,
     getBarChartProps,
     setHighlightedArea
   };
 };
+var defaultBarCell = ({
+  hasStack,
+  series,
+  data,
+  index
+}) => {
+  const { dataKey } = series;
+  const key = `cell-${dataKey}-${index}`;
+  if (!hasStack) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts2.Cell, {}, key);
+  const keys = Object.keys(data);
+  const values = Object.values(data);
+  const currentIndex = keys.findIndex((key2) => key2 === dataKey);
+  const lastIndex = values.findLastIndex((value) => value !== 0);
+  if (currentIndex === lastIndex) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts2.Cell, {}, key);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts2.Cell, { radius: 0 }, key);
+};
 
 // src/bar-chart.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var BarChart = (0, import_core12.forwardRef)((props, ref) => {
   const [styles, mergedProps] = (0, import_core12.useMultiComponentStyle)("BarChart", props);
   const {
@@ -1642,7 +1692,10 @@ var BarChart = (0, import_core12.forwardRef)((props, ref) => {
     withLegend = false,
     containerProps,
     unit,
+    yAxisTickFormatter,
+    xAxisTickFormatter,
     valueFormatter,
+    labelFormatter,
     tooltipProps,
     tooltipAnimationDuration,
     legendProps,
@@ -1653,11 +1706,13 @@ var BarChart = (0, import_core12.forwardRef)((props, ref) => {
     fillOpacity,
     chartProps,
     syncId,
+    cell,
     ...rest
   } = (0, import_core12.omitThemeProps)(mergedProps);
-  const { getBarChartProps, getBarProps, barVars, setHighlightedArea } = useBarChart({
+  const { bars, barVars, getBarChartProps, setHighlightedArea } = useBarChart({
     data,
     series,
+    cell,
     type,
     layoutType,
     chartProps,
@@ -1690,7 +1745,8 @@ var BarChart = (0, import_core12.forwardRef)((props, ref) => {
     xAxisLabelProps,
     yAxisLabelProps,
     unit,
-    valueFormatter,
+    yAxisTickFormatter,
+    xAxisTickFormatter,
     styles
   });
   const { getReferenceLineProps } = useChartReferenceLine({
@@ -1711,21 +1767,9 @@ var BarChart = (0, import_core12.forwardRef)((props, ref) => {
   const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
     legendProps
   });
-  const bars = (0, import_react10.useMemo)(
-    () => series.map(({ dataKey: dataKey2 }, index) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        import_recharts2.Bar,
-        {
-          ...getBarProps({ index, className: "ui-bar-chart__bar" })
-        },
-        `bar-${dataKey2}`
-      );
-    }),
-    [getBarProps, series]
-  );
   const referenceLinesItems = (0, import_react10.useMemo)(
-    () => referenceLineProps.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      import_recharts2.ReferenceLine,
+    () => referenceLineProps.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_recharts3.ReferenceLine,
       {
         ...getReferenceLineProps({
           index,
@@ -1736,7 +1780,7 @@ var BarChart = (0, import_core12.forwardRef)((props, ref) => {
     )),
     [getReferenceLineProps, referenceLineProps]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_core12.ui.div,
     {
       ref,
@@ -1744,41 +1788,41 @@ var BarChart = (0, import_core12.forwardRef)((props, ref) => {
       var: barVars,
       __css: { ...styles.container },
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        import_recharts2.ResponsiveContainer,
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_recharts3.ResponsiveContainer,
         {
           ...getContainerProps({ className: "ui-bar-chart__container" }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-            import_recharts2.BarChart,
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            import_recharts3.BarChart,
             {
               ...getBarChartProps({ className: "ui-bar-chart__chart" }),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  import_recharts2.CartesianGrid,
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  import_recharts3.CartesianGrid,
                   {
                     ...getGridProps({ className: "ui-bar-chart__grid" })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts2.XAxis, { ...getXAxisProps({ className: "ui-bar-chart__x-axis" }), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  import_recharts2.Label,
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts3.XAxis, { ...getXAxisProps({ className: "ui-bar-chart__x-axis" }), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  import_recharts3.Label,
                   {
                     ...getXAxisLabelProps({
                       className: "ui-bar-chart__x-axis-label"
                     })
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts2.YAxis, { ...getYAxisProps({ className: "ui-bar-chart__y-axis" }), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  import_recharts2.Label,
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts3.YAxis, { ...getYAxisProps({ className: "ui-bar-chart__y-axis" }), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  import_recharts3.Label,
                   {
                     ...getYAxisLabelProps({
                       className: "ui-bar-chart__y-axis-label"
                     })
                   }
                 ) }),
-                withLegend ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  import_recharts2.Legend,
+                withLegend ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  import_recharts3.Legend,
                   {
-                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                       ChartLegend,
                       {
                         className: "ui-bar-chart__legend",
@@ -1790,16 +1834,17 @@ var BarChart = (0, import_core12.forwardRef)((props, ref) => {
                     ...getLegendProps()
                   }
                 ) : null,
-                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  import_recharts2.Tooltip,
+                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  import_recharts3.Tooltip,
                   {
-                    content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                       ChartTooltip,
                       {
                         className: "ui-bar-chart__tooltip",
                         label,
                         payload,
                         valueFormatter,
+                        labelFormatter,
                         unit,
                         ...computedTooltipProps
                       }
@@ -1822,10 +1867,10 @@ var BarChart = (0, import_core12.forwardRef)((props, ref) => {
 var import_core14 = require("@yamada-ui/core");
 var import_utils15 = require("@yamada-ui/utils");
 var import_react12 = require("react");
-var import_recharts3 = require("recharts");
+var import_recharts4 = require("recharts");
 
 // src/area-chart-gradient.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var AreaGradient = ({
   color,
   id,
@@ -1833,20 +1878,20 @@ var AreaGradient = ({
   fillOpacity
 }) => {
   if (withGradient) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("stop", { offset: "0%", stopColor: color, stopOpacity: fillOpacity }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("stop", { offset: "100%", stopColor: color, stopOpacity: 0.01 })
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("stop", { offset: "0%", stopColor: color, stopOpacity: fillOpacity }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("stop", { offset: "100%", stopColor: color, stopOpacity: 0.01 })
     ] });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("stop", { stopColor: color, stopOpacity: fillOpacity }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("stop", { stopColor: color, stopOpacity: fillOpacity }) });
   }
 };
 
 // src/area-chart-split.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var AreaSplit = ({ offset, id, fillOpacity }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "stop",
       {
         offset,
@@ -1854,7 +1899,7 @@ var AreaSplit = ({ offset, id, fillOpacity }) => {
         stopOpacity: fillOpacity != null ? fillOpacity : 0.4
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "stop",
       {
         offset,
@@ -2189,7 +2234,7 @@ var useAreaChart = ({
 };
 
 // src/area-chart.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var AreaChart = (0, import_core14.forwardRef)((props, ref) => {
   const [styles, mergedProps] = (0, import_core14.useMultiComponentStyle)("AreaChart", props);
   const {
@@ -2215,7 +2260,10 @@ var AreaChart = (0, import_core14.forwardRef)((props, ref) => {
     unit,
     gridProps,
     strokeDasharray,
+    yAxisTickFormatter,
+    xAxisTickFormatter,
     valueFormatter,
+    labelFormatter,
     tooltipProps,
     tooltipAnimationDuration,
     legendProps,
@@ -2284,7 +2332,8 @@ var AreaChart = (0, import_core14.forwardRef)((props, ref) => {
     xAxisLabelProps,
     yAxisLabelProps,
     unit,
-    valueFormatter,
+    yAxisTickFormatter,
+    xAxisTickFormatter,
     styles
   });
   const { getReferenceLineProps } = useChartReferenceLine({
@@ -2311,16 +2360,16 @@ var AreaChart = (0, import_core14.forwardRef)((props, ref) => {
         index,
         className: "ui-area-chart__area"
       });
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react12.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AreaGradient, { ...getAreaGradientProps({ id, color: stroke }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts3.Area, { id, stroke, ...rest2 })
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react12.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AreaGradient, { ...getAreaGradientProps({ id, color: stroke }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_recharts4.Area, { id, stroke, ...rest2 })
       ] }, `area-${dataKey2}`);
     }),
     [getAreaGradientProps, getAreaProps, series]
   );
   const referenceLinesItems = (0, import_react12.useMemo)(
-    () => referenceLineProps.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_recharts3.ReferenceLine,
+    () => referenceLineProps.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_recharts4.ReferenceLine,
       {
         ...getReferenceLineProps({
           index,
@@ -2331,7 +2380,7 @@ var AreaChart = (0, import_core14.forwardRef)((props, ref) => {
     )),
     [getReferenceLineProps, referenceLineProps]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     import_core14.ui.div,
     {
       ref,
@@ -2339,41 +2388,41 @@ var AreaChart = (0, import_core14.forwardRef)((props, ref) => {
       var: areaVars,
       __css: { ...styles.container },
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        import_recharts3.ResponsiveContainer,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        import_recharts4.ResponsiveContainer,
         {
           ...getContainerProps({ className: "ui-area-chart__container" }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-            import_recharts3.AreaChart,
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            import_recharts4.AreaChart,
             {
               ...getAreaChartProps({ className: "ui-area-chart__chart" }),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  import_recharts3.CartesianGrid,
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  import_recharts4.CartesianGrid,
                   {
                     ...getGridProps({ className: "ui-area-chart__grid" })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts3.XAxis, { ...getXAxisProps({ className: "ui-area-chart__x-axis" }), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  import_recharts3.Label,
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_recharts4.XAxis, { ...getXAxisProps({ className: "ui-area-chart__x-axis" }), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  import_recharts4.Label,
                   {
                     ...getXAxisLabelProps({
                       className: "ui-area-chart__x-axis-label"
                     })
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts3.YAxis, { ...getYAxisProps({ className: "ui-area-chart__y-axis" }), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  import_recharts3.Label,
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_recharts4.YAxis, { ...getYAxisProps({ className: "ui-area-chart__y-axis" }), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  import_recharts4.Label,
                   {
                     ...getYAxisLabelProps({
                       className: "ui-area-chart__y-axis-label"
                     })
                   }
                 ) }),
-                withLegend ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  import_recharts3.Legend,
+                withLegend ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  import_recharts4.Legend,
                   {
-                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                       ChartLegend,
                       {
                         className: "ui-area-chart__legend",
@@ -2385,16 +2434,17 @@ var AreaChart = (0, import_core14.forwardRef)((props, ref) => {
                     ...getLegendProps()
                   }
                 ) : null,
-                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  import_recharts3.Tooltip,
+                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  import_recharts4.Tooltip,
                   {
-                    content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                       ChartTooltip,
                       {
                         className: "ui-area-chart__tooltip",
                         label,
                         payload,
                         valueFormatter,
+                        labelFormatter,
                         unit,
                         ...computedTooltipProps
                       }
@@ -2402,7 +2452,7 @@ var AreaChart = (0, import_core14.forwardRef)((props, ref) => {
                     ...getTooltipProps()
                   }
                 ) : null,
-                type === "split" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AreaSplit, { ...getAreaSplitProps() }) }) : null,
+                type === "split" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AreaSplit, { ...getAreaSplitProps() }) }) : null,
                 areas,
                 referenceLinesItems
               ]
@@ -2418,7 +2468,7 @@ var AreaChart = (0, import_core14.forwardRef)((props, ref) => {
 var import_core16 = require("@yamada-ui/core");
 var import_utils17 = require("@yamada-ui/utils");
 var import_react14 = require("react");
-var import_recharts4 = require("recharts");
+var import_recharts5 = require("recharts");
 
 // src/use-radar-chart.ts
 var import_core15 = require("@yamada-ui/core");
@@ -2432,7 +2482,8 @@ var useRadarChart = ({
   withActiveDots = false,
   strokeWidth = 2,
   fillOpacity = 0.4,
-  valueFormatter,
+  polarAngleAxisTickFormatter,
+  polarRadiusAxisTickFormatter,
   strokeDasharray,
   styles,
   ...rest
@@ -2700,7 +2751,7 @@ var useRadarChart = ({
           polarAngleAxisTickClassName
         )
       },
-      tickFormatter: valueFormatter,
+      tickFormatter: polarAngleAxisTickFormatter,
       tickSize: 16,
       ...props,
       ...polarAngleAxisProps
@@ -2710,7 +2761,7 @@ var useRadarChart = ({
       polarAngleAxisClassName,
       polarAngleAxisProps,
       polarAngleAxisTickClassName,
-      valueFormatter
+      polarAngleAxisTickFormatter
     ]
   );
   const getPolarRadiusAxisProps = (0, import_react13.useCallback)(
@@ -2723,7 +2774,7 @@ var useRadarChart = ({
           polarRadiusAxisTickClassName
         )
       },
-      tickFormatter: valueFormatter,
+      tickFormatter: polarRadiusAxisTickFormatter,
       ...props,
       ...polarRadiusAxisProps
     }),
@@ -2731,7 +2782,7 @@ var useRadarChart = ({
       polarRadiusAxisClassName,
       polarRadiusAxisProps,
       polarRadiusAxisTickClassName,
-      valueFormatter
+      polarRadiusAxisTickFormatter
     ]
   );
   return {
@@ -2746,7 +2797,7 @@ var useRadarChart = ({
 };
 
 // src/radar-chart.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
   const [styles, mergedProps] = (0, import_core16.useMultiComponentStyle)("RadarChart", props);
   const {
@@ -2767,6 +2818,8 @@ var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
     tooltipAnimationDuration,
     unit,
     valueFormatter,
+    polarAngleAxisTickFormatter,
+    polarRadiusAxisTickFormatter,
     strokeDasharray,
     withDots,
     withActiveDots,
@@ -2802,7 +2855,8 @@ var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
     withActiveDots,
     strokeWidth,
     fillOpacity,
-    valueFormatter,
+    polarAngleAxisTickFormatter,
+    polarRadiusAxisTickFormatter,
     strokeDasharray,
     styles
   });
@@ -2816,8 +2870,8 @@ var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
     legendProps
   });
   const radars = (0, import_react14.useMemo)(
-    () => series.map(({ dataKey: dataKey2 }, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      import_recharts4.Radar,
+    () => series.map(({ dataKey: dataKey2 }, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_recharts5.Radar,
       {
         ...getRadarProps({ index, className: "ui-radar-chart__radar" })
       },
@@ -2825,7 +2879,7 @@ var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
     )),
     [getRadarProps, series]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     import_core16.ui.div,
     {
       ref,
@@ -2833,43 +2887,43 @@ var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
       var: radarVars,
       __css: { ...styles.container },
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        import_recharts4.ResponsiveContainer,
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        import_recharts5.ResponsiveContainer,
         {
           ...getContainerProps({ className: "ui-radar-chart__container" }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-            import_recharts4.RadarChart,
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            import_recharts5.RadarChart,
             {
               ...getRadarChartProps({ className: "ui-radar-chart__chart" }),
               children: [
-                withPolarGrid ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                  import_recharts4.PolarGrid,
+                withPolarGrid ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  import_recharts5.PolarGrid,
                   {
                     ...getPolarGridProps({
                       className: "ui-radar-chart__polar-grid"
                     })
                   }
                 ) : null,
-                withPolarAngleAxis ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                  import_recharts4.PolarAngleAxis,
+                withPolarAngleAxis ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  import_recharts5.PolarAngleAxis,
                   {
                     ...getPolarAngleAxisProps({
                       className: "ui-radar-chart__polar-angle-axis"
                     })
                   }
                 ) : null,
-                withPolarRadiusAxis ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                  import_recharts4.PolarRadiusAxis,
+                withPolarRadiusAxis ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  import_recharts5.PolarRadiusAxis,
                   {
                     ...getPolarRadiusAxisProps({
                       className: "ui-radar-chart__polar-radius-axis"
                     })
                   }
                 ) : null,
-                withLegend ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                  import_recharts4.Legend,
+                withLegend ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  import_recharts5.Legend,
                   {
-                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       ChartLegend,
                       {
                         className: "ui-area-chart__legend",
@@ -2881,10 +2935,10 @@ var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
                     ...getLegendProps()
                   }
                 ) : null,
-                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                  import_recharts4.Tooltip,
+                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  import_recharts5.Tooltip,
                   {
-                    content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       ChartTooltip,
                       {
                         className: "ui-line-chart__tooltip",
@@ -2912,7 +2966,7 @@ var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
 var import_core19 = require("@yamada-ui/core");
 var import_utils20 = require("@yamada-ui/utils");
 var import_react16 = require("react");
-var import_recharts5 = require("recharts");
+var import_recharts6 = require("recharts");
 
 // src/use-pie-chart.ts
 var import_core18 = require("@yamada-ui/core");
@@ -2922,7 +2976,7 @@ var import_react15 = require("react");
 // src/pie-chart-label.tsx
 var import_core17 = require("@yamada-ui/core");
 var import_utils18 = require("@yamada-ui/utils");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var RADIAN = Math.PI / 180;
 var DEFAULT_LABEL_OFFSET = 22;
 var pieChartLabel = ({
@@ -2938,7 +2992,7 @@ var pieChartLabel = ({
   labelOffset: labelOffsetProp,
   isPercent,
   labelProps,
-  valueFormatter,
+  labelFormatter,
   styles
 }) => {
   const labelOffset = labelOffsetProp != null ? labelOffsetProp : (outerRadius - innerRadius) * 0.5 + DEFAULT_LABEL_OFFSET;
@@ -2948,13 +3002,13 @@ var pieChartLabel = ({
   const displayLabel = () => {
     if (isPercent) {
       return parseFloat((percent * 100).toFixed(0)) > 0 && `${(percent * 100).toFixed(0)}%`;
-    } else if (!(0, import_utils18.isUndefined)(valueFormatter)) {
-      return valueFormatter(value);
+    } else if (!(0, import_utils18.isUndefined)(labelFormatter)) {
+      return labelFormatter(value);
     } else {
       return value;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     import_core17.ui.text,
     {
       className: (0, import_utils18.cx)(cellClassName, "ui-chart__label"),
@@ -2985,7 +3039,7 @@ var pieChartLabelLine = ({
   const x = cxProp + (middleRadius + labelOffset) * Math.cos(-midAngle * RADIAN);
   const y = cyProp + (middleRadius + labelOffset) * Math.sin(-midAngle * RADIAN);
   const d = `M ${points[0].x} ${points[0].y} L ${x} ${y}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     import_core17.ui.path,
     {
       className: (0, import_utils18.cx)(cellClassName, "ui-chart__label-line"),
@@ -3010,7 +3064,7 @@ var usePieChart = ({
   paddingAngle = 0,
   startAngle = 90,
   endAngle = -270,
-  valueFormatter,
+  labelFormatter,
   styles,
   ...rest
 }) => {
@@ -3090,11 +3144,11 @@ var usePieChart = ({
       labelOffset,
       isPercent,
       labelProps,
-      valueFormatter,
+      labelFormatter,
       styles: styles.label,
       ...props
     }),
-    [isPercent, labelOffset, labelProps, styles.label, valueFormatter]
+    [isPercent, labelOffset, labelProps, styles.label, labelFormatter]
   );
   const labelLine = (0, import_react15.useCallback)(
     (props) => {
@@ -3207,7 +3261,7 @@ var usePieChart = ({
 };
 
 // src/donut-chart.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var DonutChart = (0, import_core19.forwardRef)((props, ref) => {
   const [styles, mergedProps] = (0, import_core19.useMultiComponentStyle)("DonutChart", props);
   const {
@@ -3223,6 +3277,7 @@ var DonutChart = (0, import_core19.forwardRef)((props, ref) => {
     tooltipAnimationDuration,
     tooltipDataSource = "all",
     valueFormatter,
+    labelFormatter,
     unit,
     paddingAngle,
     startAngle,
@@ -3258,7 +3313,7 @@ var DonutChart = (0, import_core19.forwardRef)((props, ref) => {
     withLabelLines,
     labelOffset,
     isPercent,
-    valueFormatter,
+    labelFormatter,
     styles
   });
   const { getContainerProps } = useChart({ containerProps });
@@ -3271,8 +3326,8 @@ var DonutChart = (0, import_core19.forwardRef)((props, ref) => {
     legendProps
   });
   const cells = (0, import_react16.useMemo)(
-    () => data.map(({ name }, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_recharts5.Cell,
+    () => data.map(({ name }, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_recharts6.Cell,
       {
         ...getCellProps({ index, className: "ui-donut-chart__cell" })
       },
@@ -3280,7 +3335,7 @@ var DonutChart = (0, import_core19.forwardRef)((props, ref) => {
     )),
     [data, getCellProps]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     import_core19.ui.div,
     {
       ref,
@@ -3288,17 +3343,17 @@ var DonutChart = (0, import_core19.forwardRef)((props, ref) => {
       var: pieVars,
       __css: { ...styles.container },
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        import_recharts5.ResponsiveContainer,
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_recharts6.ResponsiveContainer,
         {
           ...getContainerProps({ className: "ui-donut-chart__container" }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-            import_recharts5.PieChart,
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            import_recharts6.PieChart,
             {
               ...getPieChartProps({ className: "ui-donut-chart__chart" }),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                  import_recharts5.Pie,
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  import_recharts6.Pie,
                   {
                     ...getPieProps({
                       className: "ui-donut-chart__donut"
@@ -3306,10 +3361,10 @@ var DonutChart = (0, import_core19.forwardRef)((props, ref) => {
                     children: cells
                   }
                 ),
-                withLegend ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                  import_recharts5.Legend,
+                withLegend ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  import_recharts6.Legend,
                   {
-                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                       ChartLegend,
                       {
                         className: "ui-donut-chart__legend",
@@ -3321,10 +3376,10 @@ var DonutChart = (0, import_core19.forwardRef)((props, ref) => {
                     ...getLegendProps()
                   }
                 ) : null,
-                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                  import_recharts5.Tooltip,
+                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  import_recharts6.Tooltip,
                   {
-                    content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                       ChartTooltip,
                       {
                         className: "ui-donut-chart__tooltip",
@@ -3351,8 +3406,8 @@ var DonutChart = (0, import_core19.forwardRef)((props, ref) => {
 var import_core20 = require("@yamada-ui/core");
 var import_utils21 = require("@yamada-ui/utils");
 var import_react17 = require("react");
-var import_recharts6 = require("recharts");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_recharts7 = require("recharts");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var PieChart = (0, import_core20.forwardRef)((props, ref) => {
   const [styles, mergedProps] = (0, import_core20.useMultiComponentStyle)("PieChart", props);
   const {
@@ -3368,6 +3423,7 @@ var PieChart = (0, import_core20.forwardRef)((props, ref) => {
     tooltipAnimationDuration,
     tooltipDataSource = "all",
     valueFormatter,
+    labelFormatter,
     unit,
     innerRadius,
     outerRadius,
@@ -3403,7 +3459,7 @@ var PieChart = (0, import_core20.forwardRef)((props, ref) => {
     withLabelLines,
     labelOffset,
     isPercent,
-    valueFormatter,
+    labelFormatter,
     styles
   });
   const { getContainerProps } = useChart({ containerProps });
@@ -3416,8 +3472,8 @@ var PieChart = (0, import_core20.forwardRef)((props, ref) => {
     legendProps
   });
   const cells = (0, import_react17.useMemo)(
-    () => data.map(({ name }, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_recharts6.Cell,
+    () => data.map(({ name }, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_recharts7.Cell,
       {
         ...getCellProps({ index, className: "ui-pie-chart__cell" })
       },
@@ -3425,7 +3481,7 @@ var PieChart = (0, import_core20.forwardRef)((props, ref) => {
     )),
     [data, getCellProps]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_core20.ui.div,
     {
       ref,
@@ -3433,17 +3489,17 @@ var PieChart = (0, import_core20.forwardRef)((props, ref) => {
       var: pieVars,
       __css: { ...styles.container },
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        import_recharts6.ResponsiveContainer,
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        import_recharts7.ResponsiveContainer,
         {
           ...getContainerProps({ className: "ui-pie-chart__container" }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-            import_recharts6.PieChart,
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            import_recharts7.PieChart,
             {
               ...getPieChartProps({ className: "ui-pie-chart__chart" }),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                  import_recharts6.Pie,
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  import_recharts7.Pie,
                   {
                     ...getPieProps({
                       className: "ui-pie-chart__pie"
@@ -3451,10 +3507,10 @@ var PieChart = (0, import_core20.forwardRef)((props, ref) => {
                     children: cells
                   }
                 ),
-                withLegend ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                  import_recharts6.Legend,
+                withLegend ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  import_recharts7.Legend,
                   {
-                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                       ChartLegend,
                       {
                         className: "ui-pie-chart__legend",
@@ -3466,10 +3522,10 @@ var PieChart = (0, import_core20.forwardRef)((props, ref) => {
                     ...getLegendProps()
                   }
                 ) : null,
-                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                  import_recharts6.Tooltip,
+                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  import_recharts7.Tooltip,
                   {
-                    content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                       ChartTooltip,
                       {
                         className: "ui-pie-chart__tooltip",
@@ -3491,10 +3547,14 @@ var PieChart = (0, import_core20.forwardRef)((props, ref) => {
     }
   ) });
 });
+
+// src/index.ts
+var import_recharts8 = require("recharts");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AreaChart,
   BarChart,
+  ChartCell,
   DonutChart,
   LineChart,
   PieChart,