@yamada-ui/charts 1.4.0-dev-20240805133030 → 1.4.0-dev-20240805233134

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,
@@ -1423,12 +1424,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,
@@ -1440,6 +1443,7 @@ var useBarChart = ({
   xAxisLabel,
   yAxisLabel,
   styles,
+  cell = defaultBarCell,
   ...rest
 }) => {
   var _a;
@@ -1596,6 +1600,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,
@@ -1624,15 +1644,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 {
@@ -1670,11 +1707,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,
@@ -1729,21 +1768,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,
@@ -1754,7 +1781,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,
@@ -1762,41 +1789,41 @@ var BarChart = (0, import_core12.forwardRef)((props, ref) => {
       var: barVars,
       __css: { maxW: "full", ...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",
@@ -1808,10 +1835,10 @@ 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",
@@ -1841,10 +1868,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,
@@ -1852,20 +1879,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,
@@ -1873,7 +1900,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,
@@ -2211,7 +2238,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 {
@@ -2337,16 +2364,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,
@@ -2357,7 +2384,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,
@@ -2365,41 +2392,41 @@ var AreaChart = (0, import_core14.forwardRef)((props, ref) => {
       var: areaVars,
       __css: { maxW: "full", ...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",
@@ -2411,10 +2438,10 @@ 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",
@@ -2429,7 +2456,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
               ]
@@ -2445,7 +2472,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");
@@ -2775,7 +2802,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 {
@@ -2848,8 +2875,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" })
       },
@@ -2857,7 +2884,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,
@@ -2865,43 +2892,43 @@ var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
       var: radarVars,
       __css: { maxW: "full", ...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",
@@ -2913,10 +2940,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",
@@ -2944,7 +2971,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");
@@ -2954,7 +2981,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 = ({
@@ -2986,7 +3013,7 @@ var pieChartLabel = ({
       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"),
@@ -3017,7 +3044,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"),
@@ -3239,7 +3266,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 {
@@ -3304,8 +3331,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" })
       },
@@ -3313,7 +3340,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,
@@ -3321,17 +3348,17 @@ var DonutChart = (0, import_core19.forwardRef)((props, ref) => {
       var: pieVars,
       __css: { maxW: "full", ...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"
@@ -3339,10 +3366,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",
@@ -3354,10 +3381,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",
@@ -3384,8 +3411,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 {
@@ -3450,8 +3477,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" })
       },
@@ -3459,7 +3486,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,
@@ -3467,17 +3494,17 @@ var PieChart = (0, import_core20.forwardRef)((props, ref) => {
       var: pieVars,
       __css: { maxW: "full", ...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"
@@ -3485,10 +3512,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",
@@ -3500,10 +3527,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",
@@ -3525,10 +3552,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,