@yamada-ui/charts 1.4.1-next-20240820155044 → 1.5.0-dev-20240822150649

package/dist/chart.types.d.mts

@@ -74,8 +74,10 @@ type GridProps = Merge<CSSUIProps, Recharts.CartesianGridProps>;
 type PolarGridProps = Merge<CSSUIProps, Recharts.PolarGridProps>;
 type PolarAngleAxisProps = Merge<Recharts.PolarAngleAxisProps, CSSUIProps>;
 type PolarRadiusAxisProps = Merge<CSSUIProps, Recharts.PolarRadiusAxisProps>;
-type LabelProps = Merge<CSSUIProps, Recharts.LabelProps>;
+type LabelProps = Merge<CSSUIProps, Omit<Recharts.LabelProps, "fill">>;
 type ChartTooltipProps = Recharts.TooltipProps<number | string | Array<number | string>, number | string>;
 type ChartTooltip = ReactElement | ((props: ChartTooltipProps) => ReactNode);
+type ChartLabelProps = Omit<React.SVGProps<SVGTextElement>, "viewBox"> & LabelProps;
+type ChartLabel = ReactElement | ((props: ChartLabelProps) => ReactNode);
 
-export type { AreaChartProps, AreaChartType, AreaProps, BarChartProps, BarChartType, BarProps, CellProps, ChartAxisType, ChartCurveType, ChartLayoutType, ChartPropGetter, ChartTooltip, ChartTooltipProps, DotProps, GridProps, LabelProps, LegendProps, LineChartProps, LineProps, PieChartProps, PieProps, PolarAngleAxisProps, PolarGridProps, PolarRadiusAxisProps, RadarChartProps, RadarProps, ReferenceLineProps, RequiredChartPropGetter, ResponsiveContainerProps, TooltipDataSourceType, TooltipProps, XAxisProps, YAxisProps };
+export type { AreaChartProps, AreaChartType, AreaProps, BarChartProps, BarChartType, BarProps, CellProps, ChartAxisType, ChartCurveType, ChartLabel, ChartLabelProps, ChartLayoutType, ChartPropGetter, ChartTooltip, ChartTooltipProps, DotProps, GridProps, LabelProps, LegendProps, LineChartProps, LineProps, PieChartProps, PieProps, PolarAngleAxisProps, PolarGridProps, PolarRadiusAxisProps, RadarChartProps, RadarProps, ReferenceLineProps, RequiredChartPropGetter, ResponsiveContainerProps, TooltipDataSourceType, TooltipProps, XAxisProps, YAxisProps };

package/dist/chart.types.d.ts

@@ -74,8 +74,10 @@ type GridProps = Merge<CSSUIProps, Recharts.CartesianGridProps>;
 type PolarGridProps = Merge<CSSUIProps, Recharts.PolarGridProps>;
 type PolarAngleAxisProps = Merge<Recharts.PolarAngleAxisProps, CSSUIProps>;
 type PolarRadiusAxisProps = Merge<CSSUIProps, Recharts.PolarRadiusAxisProps>;
-type LabelProps = Merge<CSSUIProps, Recharts.LabelProps>;
+type LabelProps = Merge<CSSUIProps, Omit<Recharts.LabelProps, "fill">>;
 type ChartTooltipProps = Recharts.TooltipProps<number | string | Array<number | string>, number | string>;
 type ChartTooltip = ReactElement | ((props: ChartTooltipProps) => ReactNode);
+type ChartLabelProps = Omit<React.SVGProps<SVGTextElement>, "viewBox"> & LabelProps;
+type ChartLabel = ReactElement | ((props: ChartLabelProps) => ReactNode);
 
-export type { AreaChartProps, AreaChartType, AreaProps, BarChartProps, BarChartType, BarProps, CellProps, ChartAxisType, ChartCurveType, ChartLayoutType, ChartPropGetter, ChartTooltip, ChartTooltipProps, DotProps, GridProps, LabelProps, LegendProps, LineChartProps, LineProps, PieChartProps, PieProps, PolarAngleAxisProps, PolarGridProps, PolarRadiusAxisProps, RadarChartProps, RadarProps, ReferenceLineProps, RequiredChartPropGetter, ResponsiveContainerProps, TooltipDataSourceType, TooltipProps, XAxisProps, YAxisProps };
+export type { AreaChartProps, AreaChartType, AreaProps, BarChartProps, BarChartType, BarProps, CellProps, ChartAxisType, ChartCurveType, ChartLabel, ChartLabelProps, ChartLayoutType, ChartPropGetter, ChartTooltip, ChartTooltipProps, DotProps, GridProps, LabelProps, LegendProps, LineChartProps, LineProps, PieChartProps, PieProps, PolarAngleAxisProps, PolarGridProps, PolarRadiusAxisProps, RadarChartProps, RadarProps, ReferenceLineProps, RequiredChartPropGetter, ResponsiveContainerProps, TooltipDataSourceType, TooltipProps, XAxisProps, YAxisProps };

package/dist/chart.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/chart.types.ts"],"sourcesContent":["import type { As, CSSUIProps, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n  ComponentPropsWithoutRef,\n  ReactElement,\n  ReactNode,\n  SVGProps,\n} from \"react\"\nimport type * as Recharts from \"recharts\"\nimport type { pieProperties } from \"./rechart-properties\"\n\nexport type ChartPropGetter<\n  Y extends As = \"div\",\n  M = undefined,\n  D = undefined,\n> = (props?: Merge<HTMLUIProps<Y>, M>, ref?: React.Ref<any>) => D\n\nexport type RequiredChartPropGetter<\n  Y extends As = \"div\",\n  M = undefined,\n  D = undefined,\n> = (props: Merge<HTMLUIProps<Y>, M>, ref?: React.Ref<any>) => D\nexport type ChartLayoutType = \"horizontal\" | \"vertical\"\nexport type AreaChartType = \"default\" | \"stacked\" | \"percent\" | \"split\"\nexport type BarChartType = Exclude<AreaChartType, \"split\">\nexport type ChartAxisType = \"x\" | \"y\" | \"xy\" | \"none\"\nexport type ChartCurveType =\n  | \"bump\"\n  | \"linear\"\n  | \"natural\"\n  | \"monotone\"\n  | \"step\"\n  | \"stepBefore\"\n  | \"stepAfter\"\nexport type TooltipDataSourceType = \"segment\" | \"all\"\n\nexport type AreaChartProps = Merge<\n  CSSUIProps,\n  ComponentPropsWithoutRef<typeof Recharts.AreaChart>\n>\nexport type BarChartProps = Merge<\n  CSSUIProps,\n  ComponentPropsWithoutRef<typeof Recharts.BarChart>\n>\nexport type LineChartProps = Merge<\n  CSSUIProps,\n  ComponentPropsWithoutRef<typeof Recharts.LineChart>\n>\nexport type RadarChartProps = Merge<\n  CSSUIProps,\n  ComponentPropsWithoutRef<typeof Recharts.RadarChart>\n>\nexport type PieChartProps = Merge<\n  CSSUIProps,\n  ComponentPropsWithoutRef<typeof Recharts.PieChart>\n>\nexport type ReferenceLineProps = Merge<CSSUIProps, Recharts.ReferenceLineProps>\nexport type ResponsiveContainerProps = Merge<\n  CSSUIProps,\n  Omit<Recharts.ResponsiveContainerProps, \"children\">\n>\nexport type AreaProps = Merge<\n  Merge<CSSUIProps, Recharts.AreaProps>,\n  {\n    color: CSSUIProps[\"color\"]\n    dot?: DotProps\n    activeDot?: DotProps\n    dimDot?: DotProps\n    dimArea?: Partial<AreaProps>\n  }\n>\nexport type LineProps = Merge<\n  Merge<CSSUIProps, Recharts.LineProps>,\n  {\n    color: CSSUIProps[\"color\"]\n    activeDot?: DotProps\n    dot?: DotProps\n    dimDot?: DotProps\n    dimLine?: Partial<LineProps>\n  }\n>\nexport type BarProps = Merge<\n  Merge<CSSUIProps, Recharts.BarProps>,\n  {\n    color: CSSUIProps[\"color\"]\n    activeBar?: Merge<SVGProps<SVGPathElement>, CSSUIProps>\n    background?: Merge<SVGProps<SVGPathElement>, CSSUIProps>\n    dimBar?: Partial<BarProps>\n  }\n>\nexport type RadarProps = Merge<\n  Merge<CSSUIProps, Recharts.RadarProps>,\n  {\n    color: CSSUIProps[\"color\"]\n    dot?: DotProps\n    activeDot?: DotProps\n    dimDot?: DotProps\n    dimRadar?: Partial<RadarProps>\n  }\n>\nexport type PieProps = Merge<\n  Merge<Pick<Recharts.PieProps, (typeof pieProperties)[number]>, CSSUIProps>,\n  {\n    activeShape?: Partial<PieProps>\n    inactiveShape?: Partial<PieProps>\n    label?: HTMLUIProps<\"text\">\n    labelLine?: HTMLUIProps<\"path\">\n  }\n>\nexport type CellProps = Merge<\n  CSSUIProps,\n  {\n    name: string\n    value: number\n    dimCell?: Partial<CellProps>\n  }\n>\nexport type DotProps = Merge<Omit<Recharts.DotProps, \"ref\">, CSSUIProps>\nexport type XAxisProps = Merge<\n  Merge<CSSUIProps, Recharts.XAxisProps>,\n  {\n    color?: CSSUIProps[\"color\"]\n    stroke?: CSSUIProps[\"color\"]\n    fill?: CSSUIProps[\"color\"]\n  }\n>\nexport type YAxisProps = Merge<\n  Merge<CSSUIProps, Recharts.YAxisProps>,\n  { color?: CSSUIProps[\"color\"] }\n>\nexport type LegendProps = Merge<CSSUIProps, Omit<Recharts.LegendProps, \"ref\">>\nexport type TooltipProps = Merge<\n  Merge<CSSUIProps, Omit<Recharts.TooltipProps<any, any>, \"ref\">>,\n  { cursor?: CSSUIProps }\n>\nexport type GridProps = Merge<CSSUIProps, Recharts.CartesianGridProps>\nexport type PolarGridProps = Merge<CSSUIProps, Recharts.PolarGridProps>\nexport type PolarAngleAxisProps = Merge<\n  Recharts.PolarAngleAxisProps,\n  CSSUIProps\n>\nexport type PolarRadiusAxisProps = Merge<\n  CSSUIProps,\n  Recharts.PolarRadiusAxisProps\n>\nexport type LabelProps = Merge<CSSUIProps, Recharts.LabelProps>\nexport type ChartTooltipProps = Recharts.TooltipProps<\n  number | string | Array<number | string>,\n  number | string\n>\nexport type ChartTooltip =\n  | ReactElement\n  | ((props: ChartTooltipProps) => ReactNode)\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../src/chart.types.ts"],"sourcesContent":["import type { As, CSSUIProps, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n  ComponentPropsWithoutRef,\n  ReactElement,\n  ReactNode,\n  SVGProps,\n} from \"react\"\nimport type * as Recharts from \"recharts\"\nimport type { pieProperties } from \"./rechart-properties\"\n\nexport type ChartPropGetter<\n  Y extends As = \"div\",\n  M = undefined,\n  D = undefined,\n> = (props?: Merge<HTMLUIProps<Y>, M>, ref?: React.Ref<any>) => D\n\nexport type RequiredChartPropGetter<\n  Y extends As = \"div\",\n  M = undefined,\n  D = undefined,\n> = (props: Merge<HTMLUIProps<Y>, M>, ref?: React.Ref<any>) => D\nexport type ChartLayoutType = \"horizontal\" | \"vertical\"\nexport type AreaChartType = \"default\" | \"stacked\" | \"percent\" | \"split\"\nexport type BarChartType = Exclude<AreaChartType, \"split\">\nexport type ChartAxisType = \"x\" | \"y\" | \"xy\" | \"none\"\nexport type ChartCurveType =\n  | \"bump\"\n  | \"linear\"\n  | \"natural\"\n  | \"monotone\"\n  | \"step\"\n  | \"stepBefore\"\n  | \"stepAfter\"\nexport type TooltipDataSourceType = \"segment\" | \"all\"\n\nexport type AreaChartProps = Merge<\n  CSSUIProps,\n  ComponentPropsWithoutRef<typeof Recharts.AreaChart>\n>\nexport type BarChartProps = Merge<\n  CSSUIProps,\n  ComponentPropsWithoutRef<typeof Recharts.BarChart>\n>\nexport type LineChartProps = Merge<\n  CSSUIProps,\n  ComponentPropsWithoutRef<typeof Recharts.LineChart>\n>\nexport type RadarChartProps = Merge<\n  CSSUIProps,\n  ComponentPropsWithoutRef<typeof Recharts.RadarChart>\n>\nexport type PieChartProps = Merge<\n  CSSUIProps,\n  ComponentPropsWithoutRef<typeof Recharts.PieChart>\n>\nexport type ReferenceLineProps = Merge<CSSUIProps, Recharts.ReferenceLineProps>\nexport type ResponsiveContainerProps = Merge<\n  CSSUIProps,\n  Omit<Recharts.ResponsiveContainerProps, \"children\">\n>\nexport type AreaProps = Merge<\n  Merge<CSSUIProps, Recharts.AreaProps>,\n  {\n    color: CSSUIProps[\"color\"]\n    dot?: DotProps\n    activeDot?: DotProps\n    dimDot?: DotProps\n    dimArea?: Partial<AreaProps>\n  }\n>\nexport type LineProps = Merge<\n  Merge<CSSUIProps, Recharts.LineProps>,\n  {\n    color: CSSUIProps[\"color\"]\n    activeDot?: DotProps\n    dot?: DotProps\n    dimDot?: DotProps\n    dimLine?: Partial<LineProps>\n  }\n>\nexport type BarProps = Merge<\n  Merge<CSSUIProps, Recharts.BarProps>,\n  {\n    color: CSSUIProps[\"color\"]\n    activeBar?: Merge<SVGProps<SVGPathElement>, CSSUIProps>\n    background?: Merge<SVGProps<SVGPathElement>, CSSUIProps>\n    dimBar?: Partial<BarProps>\n  }\n>\nexport type RadarProps = Merge<\n  Merge<CSSUIProps, Recharts.RadarProps>,\n  {\n    color: CSSUIProps[\"color\"]\n    dot?: DotProps\n    activeDot?: DotProps\n    dimDot?: DotProps\n    dimRadar?: Partial<RadarProps>\n  }\n>\nexport type PieProps = Merge<\n  Merge<Pick<Recharts.PieProps, (typeof pieProperties)[number]>, CSSUIProps>,\n  {\n    activeShape?: Partial<PieProps>\n    inactiveShape?: Partial<PieProps>\n    label?: HTMLUIProps<\"text\">\n    labelLine?: HTMLUIProps<\"path\">\n  }\n>\nexport type CellProps = Merge<\n  CSSUIProps,\n  {\n    name: string\n    value: number\n    dimCell?: Partial<CellProps>\n  }\n>\nexport type DotProps = Merge<Omit<Recharts.DotProps, \"ref\">, CSSUIProps>\nexport type XAxisProps = Merge<\n  Merge<CSSUIProps, Recharts.XAxisProps>,\n  {\n    color?: CSSUIProps[\"color\"]\n    stroke?: CSSUIProps[\"color\"]\n    fill?: CSSUIProps[\"color\"]\n  }\n>\nexport type YAxisProps = Merge<\n  Merge<CSSUIProps, Recharts.YAxisProps>,\n  { color?: CSSUIProps[\"color\"] }\n>\nexport type LegendProps = Merge<CSSUIProps, Omit<Recharts.LegendProps, \"ref\">>\nexport type TooltipProps = Merge<\n  Merge<CSSUIProps, Omit<Recharts.TooltipProps<any, any>, \"ref\">>,\n  { cursor?: CSSUIProps }\n>\nexport type GridProps = Merge<CSSUIProps, Recharts.CartesianGridProps>\nexport type PolarGridProps = Merge<CSSUIProps, Recharts.PolarGridProps>\nexport type PolarAngleAxisProps = Merge<\n  Recharts.PolarAngleAxisProps,\n  CSSUIProps\n>\nexport type PolarRadiusAxisProps = Merge<\n  CSSUIProps,\n  Recharts.PolarRadiusAxisProps\n>\nexport type LabelProps = Merge<CSSUIProps, Omit<Recharts.LabelProps, \"fill\">>\nexport type ChartTooltipProps = Recharts.TooltipProps<\n  number | string | Array<number | string>,\n  number | string\n>\nexport type ChartTooltip =\n  | ReactElement\n  | ((props: ChartTooltipProps) => ReactNode)\n\nexport type ChartLabelProps = Omit<React.SVGProps<SVGTextElement>, \"viewBox\"> &\n  LabelProps\nexport type ChartLabel = ReactElement | ((props: ChartLabelProps) => ReactNode)\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/chunk-5XSML5U3.mjs

@@ -0,0 +1,37 @@
+"use client"
+import {
+  labelProperties
+} from "./chunk-F34FV5DY.mjs";
+import {
+  getComponentProps
+} from "./chunk-QL3DB7OJ.mjs";
+
+// src/use-chart-label.ts
+import { useTheme } from "@yamada-ui/core";
+import { cx } from "@yamada-ui/utils";
+import { useCallback } from "react";
+var useChartLabel = ({ styles, ...rest }) => {
+  var _a;
+  const { theme } = useTheme();
+  const [labelProps, labelClassName] = getComponentProps(
+    [(_a = rest.labelProps) != null ? _a : {}, labelProperties],
+    styles.label
+  )(theme);
+  const getLabelProps = useCallback(
+    ({ className, ...props } = {}, ref = null) => {
+      return {
+        ref,
+        className: cx(className, labelClassName),
+        ...props,
+        ...labelProps
+      };
+    },
+    [labelClassName, labelProps]
+  );
+  return { getLabelProps };
+};
+
+export {
+  useChartLabel
+};
+//# sourceMappingURL=chunk-5XSML5U3.mjs.map

package/dist/chunk-5XSML5U3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-chart-label.ts"],"sourcesContent":["import { useTheme, type CSSUIObject } from \"@yamada-ui/core\"\nimport { cx, type Dict } from \"@yamada-ui/utils\"\nimport { useCallback } from \"react\"\nimport type * as Recharts from \"recharts\"\nimport { getComponentProps } from \"./chart-utils\"\nimport type { ChartPropGetter, LabelProps } from \"./chart.types\"\nimport { labelProperties } from \"./rechart-properties\"\n\nexport type UseChartLabelOptions = {\n  /**\n   * Props passed down to recharts 'Label' component.\n   */\n  labelProps?: LabelProps\n}\n\nexport type UseChartLabelProps = UseChartLabelOptions & {\n  styles: Dict<CSSUIObject>\n}\n\nexport const useChartLabel = ({ styles, ...rest }: UseChartLabelProps) => {\n  const { theme } = useTheme()\n\n  const [labelProps, labelClassName] = getComponentProps<Dict, string>(\n    [rest.labelProps ?? {}, labelProperties],\n    styles.label,\n  )(theme)\n\n  const getLabelProps: ChartPropGetter<\n    \"div\",\n    Omit<Recharts.LabelProps, \"ref\">,\n    Omit<Recharts.LabelProps, \"ref\">\n  > = useCallback(\n    ({ className, ...props } = {}, ref = null) => {\n      return {\n        ref,\n        className: cx(className, labelClassName),\n        ...props,\n        ...labelProps,\n      }\n    },\n    [labelClassName, labelProps],\n  )\n\n  return { getLabelProps }\n}\n"],"mappings":";;;;;;;;;AAAA,SAAS,gBAAkC;AAC3C,SAAS,UAAqB;AAC9B,SAAS,mBAAmB;AAiBrB,IAAM,gBAAgB,CAAC,EAAE,QAAQ,GAAG,KAAK,MAA0B;AAnB1E;AAoBE,QAAM,EAAE,MAAM,IAAI,SAAS;AAE3B,QAAM,CAAC,YAAY,cAAc,IAAI;AAAA,IACnC,EAAC,UAAK,eAAL,YAAmB,CAAC,GAAG,eAAe;AAAA,IACvC,OAAO;AAAA,EACT,EAAE,KAAK;AAEP,QAAM,gBAIF;AAAA,IACF,CAAC,EAAE,WAAW,GAAG,MAAM,IAAI,CAAC,GAAG,MAAM,SAAS;AAC5C,aAAO;AAAA,QACL;AAAA,QACA,WAAW,GAAG,WAAW,cAAc;AAAA,QACvC,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,UAAU;AAAA,EAC7B;AAEA,SAAO,EAAE,cAAc;AACzB;","names":[]}

package/dist/{chunk-U2HWHZYI.mjs → chunk-7HKRIEAT.mjs}

@@ -1,4 +1,7 @@
 "use client"
+import {
+  useChartLabel
+} from "./chunk-5XSML5U3.mjs";
 import {
   usePieChart
 } from "./chunk-IF4O4CBA.mjs";
@@ -30,6 +33,7 @@ import { cx } from "@yamada-ui/utils";
 import { useMemo } from "react";
 import {
   Cell,
+  Label,
   Legend,
   Pie,
   PieChart as RechartsPieChart,
@@ -65,6 +69,7 @@ var DonutChart = forwardRef((props, ref) => {
     outerRadius,
     strokeWidth,
     legendProps,
+    labelProps,
     ...rest
   } = omitThemeProps(mergedProps);
   const {
@@ -100,6 +105,7 @@ var DonutChart = forwardRef((props, ref) => {
   const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
     legendProps
   });
+  const { getLabelProps } = useChartLabel({ labelProps, styles });
   const cells = useMemo(
     () => data.map(({ name }, index) => /* @__PURE__ */ jsx(
       Cell,
@@ -127,13 +133,21 @@ var DonutChart = forwardRef((props, ref) => {
             {
               ...getPieChartProps({ className: "ui-donut-chart__chart" }),
               children: [
-                /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsxs(
                   Pie,
                   {
                     ...getPieProps({
                       className: "ui-donut-chart__donut"
                     }),
-                    children: cells
+                    children: [
+                      cells,
+                      /* @__PURE__ */ jsx(
+                        Label,
+                        {
+                          ...getLabelProps({ className: "ui-donut-chart__label" })
+                        }
+                      )
+                    ]
                   }
                 ),
                 withLegend ? /* @__PURE__ */ jsx(
@@ -180,4 +194,4 @@ var DonutChart = forwardRef((props, ref) => {
 export {
   DonutChart
 };
-//# sourceMappingURL=chunk-U2HWHZYI.mjs.map
+//# sourceMappingURL=chunk-7HKRIEAT.mjs.map

package/dist/chunk-7HKRIEAT.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/donut-chart.tsx"],"sourcesContent":["import {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport {\n  Cell,\n  Label,\n  Legend,\n  Pie,\n  PieChart as RechartsPieChart,\n  ResponsiveContainer,\n  Tooltip,\n} from \"recharts\"\nimport { ChartLegend } from \"./chart-legend\"\nimport { ChartTooltip } from \"./chart-tooltip\"\nimport type { PieChartProps } from \"./pie-chart\"\nimport { ChartProvider, useChart } from \"./use-chart\"\nimport { useChartLabel, type UseChartLabelOptions } from \"./use-chart-label\"\nimport { useChartLegend } from \"./use-chart-legend\"\nimport { useChartTooltip } from \"./use-chart-tooltip\"\nimport { usePieChart } from \"./use-pie-chart\"\n\ntype DonutChartOptions = {\n  /**\n   * Controls innerRadius of the chart segments.\n   * If it is a number, it is the width of the radius.\n   * For example, `60` means the radius is `60px` and the diameter is `120px`.\n   *\n   * @default '60%'\n   */\n  innerRadius?: number | string\n}\n\nexport type DonutChartProps = PieChartProps &\n  DonutChartOptions &\n  UseChartLabelOptions\n\n/**\n * `DonutChart` is a component for drawing donut charts to compare multiple sets of data.\n *\n * @see Docs https://yamada-ui.com/components/feedback/donut-chart\n */\nexport const DonutChart = forwardRef<DonutChartProps, \"div\">((props, ref) => {\n  const [styles, mergedProps] = useMultiComponentStyle(\"DonutChart\", props)\n  const {\n    className,\n    data,\n    pieProps,\n    chartProps,\n    cellProps,\n    containerProps,\n    withTooltip = true,\n    withLegend = false,\n    tooltipProps,\n    tooltipAnimationDuration,\n    tooltipDataSource = \"all\",\n    valueFormatter,\n    labelFormatter,\n    unit,\n    paddingAngle,\n    startAngle,\n    endAngle,\n    withLabels,\n    withLabelLines,\n    labelOffset,\n    isPercent,\n    innerRadius = withLabels ? \"60%\" : \"80%\",\n    outerRadius,\n    strokeWidth,\n    legendProps,\n    labelProps,\n    ...rest\n  } = omitThemeProps(mergedProps)\n\n  const {\n    pieVars,\n    getPieProps,\n    getPieChartProps,\n    getCellProps,\n    setHighlightedArea,\n  } = usePieChart({\n    data,\n    pieProps,\n    chartProps,\n    cellProps,\n    innerRadius,\n    outerRadius,\n    paddingAngle,\n    startAngle,\n    endAngle,\n    strokeWidth,\n    withLabels,\n    withLabelLines,\n    labelOffset,\n    isPercent,\n    labelFormatter,\n    styles,\n  })\n  const { getContainerProps } = useChart({ containerProps })\n  const { tooltipProps: computedTooltipProps, getTooltipProps } =\n    useChartTooltip({\n      tooltipProps,\n      tooltipAnimationDuration,\n      styles,\n    })\n  const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({\n    legendProps,\n  })\n  const { getLabelProps } = useChartLabel({ labelProps, styles })\n\n  const cells = useMemo(\n    () =>\n      data.map(({ name }, index) => (\n        <Cell\n          key={`donut-cell-${name}`}\n          {...getCellProps({ index, className: \"ui-donut-chart__cell\" })}\n        />\n      )),\n    [data, getCellProps],\n  )\n\n  return (\n    <ChartProvider value={{ styles }}>\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-donut-chart\", className)}\n        var={pieVars}\n        __css={{ maxW: \"full\", ...styles.container }}\n        {...rest}\n      >\n        <ResponsiveContainer\n          {...getContainerProps({ className: \"ui-donut-chart__container\" })}\n        >\n          <RechartsPieChart\n            {...getPieChartProps({ className: \"ui-donut-chart__chart\" })}\n          >\n            <Pie\n              {...getPieProps({\n                className: \"ui-donut-chart__donut\",\n              })}\n            >\n              {cells}\n              <Label\n                {...getLabelProps({ className: \"ui-donut-chart__label\" })}\n              />\n            </Pie>\n\n            {withLegend ? (\n              <Legend\n                content={({ payload }) => (\n                  <ChartLegend\n                    className=\"ui-donut-chart__legend\"\n                    payload={payload}\n                    onHighlight={setHighlightedArea}\n                    {...computedLegendProps}\n                  />\n                )}\n                {...getLegendProps()}\n              />\n            ) : null}\n\n            {withTooltip ? (\n              <Tooltip\n                content={({ label, payload }) => (\n                  <ChartTooltip\n                    className=\"ui-donut-chart__tooltip\"\n                    label={label}\n                    payload={tooltipDataSource === \"segment\" ? payload : data}\n                    valueFormatter={valueFormatter}\n                    unit={unit}\n                    {...computedTooltipProps}\n                  />\n                )}\n                {...getTooltipProps()}\n              />\n            ) : null}\n          </RechartsPieChart>\n        </ResponsiveContainer>\n      </ui.div>\n    </ChartProvider>\n  )\n})\n"],"mappings":"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","names":[]}

package/dist/donut-chart.d.mts

@@ -1,5 +1,6 @@
 import * as _yamada_ui_core from '@yamada-ui/core';
 import { PieChartProps } from './pie-chart.mjs';
+import { UseChartLabelOptions } from './use-chart-label.mjs';
 import './chart.types.mjs';
 import '@yamada-ui/utils';
 import 'react';
@@ -21,7 +22,7 @@ type DonutChartOptions = {
      */
     innerRadius?: number | string;
 };
-type DonutChartProps = PieChartProps & DonutChartOptions;
+type DonutChartProps = PieChartProps & DonutChartOptions & UseChartLabelOptions;
 /**
  * `DonutChart` is a component for drawing donut charts to compare multiple sets of data.
  *

package/dist/donut-chart.d.ts

@@ -1,5 +1,6 @@
 import * as _yamada_ui_core from '@yamada-ui/core';
 import { PieChartProps } from './pie-chart.js';
+import { UseChartLabelOptions } from './use-chart-label.js';
 import './chart.types.js';
 import '@yamada-ui/utils';
 import 'react';
@@ -21,7 +22,7 @@ type DonutChartOptions = {
      */
     innerRadius?: number | string;
 };
-type DonutChartProps = PieChartProps & DonutChartOptions;
+type DonutChartProps = PieChartProps & DonutChartOptions & UseChartLabelOptions;
 /**
  * `DonutChart` is a component for drawing donut charts to compare multiple sets of data.
  *

package/dist/donut-chart.js

@@ -24,9 +24,9 @@ __export(donut_chart_exports, {
   DonutChart: () => DonutChart
 });
 module.exports = __toCommonJS(donut_chart_exports);
-var import_core8 = require("@yamada-ui/core");
-var import_utils9 = require("@yamada-ui/utils");
-var import_react5 = require("react");
+var import_core9 = require("@yamada-ui/core");
+var import_utils10 = require("@yamada-ui/utils");
+var import_react6 = require("react");
 var import_recharts = require("recharts");
 
 // src/chart-legend.tsx
@@ -143,6 +143,16 @@ var pieProperties = [
   "onMouseEnter",
   "onMouseLeave"
 ];
+var labelProperties = [
+  "viewBox",
+  "formatter",
+  "value",
+  "position",
+  "offset",
+  "children",
+  "content",
+  "id"
+];
 
 // src/use-chart.ts
 var [ChartProvider, useChartContext] = (0, import_utils2.createContext)({
@@ -307,17 +317,42 @@ var ChartTooltip = (0, import_core4.forwardRef)(
   }
 );
 
-// src/use-chart-legend.ts
+// src/use-chart-label.ts
+var import_core5 = require("@yamada-ui/core");
 var import_utils5 = require("@yamada-ui/utils");
 var import_react2 = require("react");
+var useChartLabel = ({ styles, ...rest }) => {
+  var _a;
+  const { theme } = (0, import_core5.useTheme)();
+  const [labelProps, labelClassName] = getComponentProps(
+    [(_a = rest.labelProps) != null ? _a : {}, labelProperties],
+    styles.label
+  )(theme);
+  const getLabelProps = (0, import_react2.useCallback)(
+    ({ className, ...props } = {}, ref = null) => {
+      return {
+        ref,
+        className: (0, import_utils5.cx)(className, labelClassName),
+        ...props,
+        ...labelProps
+      };
+    },
+    [labelClassName, labelProps]
+  );
+  return { getLabelProps };
+};
+
+// src/use-chart-legend.ts
+var import_utils6 = require("@yamada-ui/utils");
+var import_react3 = require("react");
 var useChartLegend = ({
   legendProps: _legendProps = {}
 }) => {
-  const [rest, legendProps] = (0, import_utils5.splitObject)(
+  const [rest, legendProps] = (0, import_utils6.splitObject)(
     _legendProps,
     legendProperties
   );
-  const getLegendProps = (0, import_react2.useCallback)(
+  const getLegendProps = (0, import_react3.useCallback)(
     (props, ref = null) => {
       return {
         ref,
@@ -332,31 +367,31 @@ var useChartLegend = ({
 };
 
 // src/use-chart-tooltip.ts
-var import_core5 = require("@yamada-ui/core");
-var import_utils6 = require("@yamada-ui/utils");
-var import_react3 = require("react");
+var import_core6 = require("@yamada-ui/core");
+var import_utils7 = require("@yamada-ui/utils");
+var import_react4 = require("react");
 var useChartTooltip = ({
   tooltipProps: _tooltipProps = {},
   tooltipAnimationDuration = 0,
   styles
 }) => {
-  const { theme } = (0, import_core5.useTheme)();
+  const { theme } = (0, import_core6.useTheme)();
   const { cursor, ...rest } = _tooltipProps;
-  const cursorClassName = (0, import_react3.useMemo)(
+  const cursorClassName = (0, import_react4.useMemo)(
     () => getClassName({ ...styles.cursor, ...cursor })(theme),
     [cursor, styles.cursor, theme]
   );
-  const [tooltipProps, tooltipUIProps] = (0, import_utils6.splitObject)(
+  const [tooltipProps, tooltipUIProps] = (0, import_utils7.splitObject)(
     rest,
     tooltipProperties
   );
-  const getTooltipProps = (0, import_react3.useCallback)(
+  const getTooltipProps = (0, import_react4.useCallback)(
     (props, ref = null) => ({
       ref,
       animationDuration: tooltipAnimationDuration,
       isAnimationActive: (tooltipAnimationDuration || 0) > 0,
       cursor: {
-        className: (0, import_utils6.cx)("ui-chart__cursor", cursorClassName)
+        className: (0, import_utils7.cx)("ui-chart__cursor", cursorClassName)
       },
       ...props,
       ...tooltipProps
@@ -367,13 +402,13 @@ var useChartTooltip = ({
 };
 
 // src/use-pie-chart.ts
-var import_core7 = require("@yamada-ui/core");
-var import_utils8 = require("@yamada-ui/utils");
-var import_react4 = require("react");
+var import_core8 = require("@yamada-ui/core");
+var import_utils9 = require("@yamada-ui/utils");
+var import_react5 = require("react");
 
 // src/pie-chart-label.tsx
-var import_core6 = require("@yamada-ui/core");
-var import_utils7 = require("@yamada-ui/utils");
+var import_core7 = require("@yamada-ui/core");
+var import_utils8 = require("@yamada-ui/utils");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var RADIAN = Math.PI / 180;
 var DEFAULT_LABEL_OFFSET = 22;
@@ -400,16 +435,16 @@ var pieChartLabel = ({
   const displayLabel = () => {
     if (isPercent) {
       return parseFloat((percent * 100).toFixed(0)) > 0 && `${(percent * 100).toFixed(0)}%`;
-    } else if (!(0, import_utils7.isUndefined)(labelFormatter)) {
+    } else if (!(0, import_utils8.isUndefined)(labelFormatter)) {
       return labelFormatter(value);
     } else {
       return value;
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_core6.ui.text,
+    import_core7.ui.text,
     {
-      className: (0, import_utils7.cx)(cellClassName, "ui-chart__label"),
+      className: (0, import_utils8.cx)(cellClassName, "ui-chart__label"),
       x,
       y,
       textAnchor,
@@ -438,9 +473,9 @@ var pieChartLabelLine = ({
   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_runtime3.jsx)(
-    import_core6.ui.path,
+    import_core7.ui.path,
     {
-      className: (0, import_utils7.cx)(cellClassName, "ui-chart__label-line"),
+      className: (0, import_utils8.cx)(cellClassName, "ui-chart__label-line"),
       d,
       __css: styles,
       ...labelLineProps
@@ -467,8 +502,8 @@ var usePieChart = ({
   ...rest
 }) => {
   var _a, _b;
-  const { theme } = (0, import_core7.useTheme)();
-  const [highlightedArea, setHighlightedArea] = (0, import_react4.useState)(null);
+  const { theme } = (0, import_core8.useTheme)();
+  const [highlightedArea, setHighlightedArea] = (0, import_react5.useState)(null);
   const shouldHighlight = highlightedArea !== null;
   const { dimCell, ...computedCellProps } = (_a = rest.cellProps) != null ? _a : {};
   const {
@@ -478,7 +513,7 @@ var usePieChart = ({
     labelLine: labelLineProps,
     ...computedPieProps
   } = (_b = rest.pieProps) != null ? _b : {};
-  const cellColors = (0, import_react4.useMemo)(
+  const cellColors = (0, import_react5.useMemo)(
     () => data.map(({ color }, index) => ({
       __prefix: "ui",
       name: `cell-${index}`,
@@ -487,14 +522,14 @@ var usePieChart = ({
     })),
     [data]
   );
-  const pieVars = (0, import_react4.useMemo)(
+  const pieVars = (0, import_react5.useMemo)(
     () => [
       ...cellColors,
       { __prefix: "ui", name: "fill-opacity", value: fillOpacity }
     ],
     [fillOpacity, cellColors]
   );
-  const [chartProps, chartClassName] = (0, import_react4.useMemo)(
+  const [chartProps, chartClassName] = (0, import_react5.useMemo)(
     () => {
       var _a2;
       return getComponentProps(
@@ -504,14 +539,14 @@ var usePieChart = ({
     },
     [rest.chartProps, styles.chart, theme]
   );
-  const [pieProps, pieClassName] = (0, import_react4.useMemo)(
+  const [pieProps, pieClassName] = (0, import_react5.useMemo)(
     () => getComponentProps(
       [computedPieProps, pieProperties],
       styles.pie
     )(theme),
     [computedPieProps, styles.pie, theme]
   );
-  const cellClassName = (0, import_react4.useMemo)(() => {
+  const cellClassName = (0, import_react5.useMemo)(() => {
     const resolvedCellProps = {
       fillOpacity: "var(--ui-fill-opacity)",
       ...styles.cell,
@@ -519,25 +554,25 @@ var usePieChart = ({
     };
     return getClassName(resolvedCellProps)(theme);
   }, [computedCellProps, styles.cell, theme]);
-  const dimCellClassName = (0, import_react4.useMemo)(() => {
+  const dimCellClassName = (0, import_react5.useMemo)(() => {
     const resolvedDimCell = { fillOpacity: 0.3, strokeOpacity: 0, ...dimCell };
     return getClassName(resolvedDimCell)(theme);
   }, [dimCell, theme]);
-  const activeShapeProps = (0, import_react4.useMemo)(
+  const activeShapeProps = (0, import_react5.useMemo)(
     () => getComponentProps(
       [{ _focus: { outline: "none" }, ...activeShape }, pieProperties],
       styles.activeShape
     )(theme, true),
     [activeShape, styles.activeShape, theme]
   );
-  const inactiveShapeProps = (0, import_react4.useMemo)(
+  const inactiveShapeProps = (0, import_react5.useMemo)(
     () => getComponentProps(
       [inactiveShape, pieProperties],
       styles.inactiveShape
     )(theme, true),
     [inactiveShape, styles.inactiveShape, theme]
   );
-  const label = (0, import_react4.useCallback)(
+  const label = (0, import_react5.useCallback)(
     (props) => pieChartLabel({
       labelOffset,
       isPercent,
@@ -548,7 +583,7 @@ var usePieChart = ({
     }),
     [isPercent, labelOffset, labelProps, styles.label, labelFormatter]
   );
-  const labelLine = (0, import_react4.useCallback)(
+  const labelLine = (0, import_react5.useCallback)(
     (props) => {
       return pieChartLabelLine({
         labelOffset,
@@ -559,7 +594,7 @@ var usePieChart = ({
     },
     [labelLineProps, labelOffset, styles.labelLine]
   );
-  const cellPropList = (0, import_react4.useMemo)(
+  const cellPropList = (0, import_react5.useMemo)(
     () => data.map((props, index) => {
       const { name, dimCell: dimCell2 = {}, ...computedProps } = props;
       const color = `var(--ui-cell-${index})`;
@@ -589,19 +624,19 @@ var usePieChart = ({
       theme
     ]
   );
-  const getPieChartProps = (0, import_react4.useCallback)(
+  const getPieChartProps = (0, import_react5.useCallback)(
     ({ className, ...props } = {}, ref = null) => ({
       ref,
-      className: (0, import_utils8.cx)(className, chartClassName),
+      className: (0, import_utils9.cx)(className, chartClassName),
       ...props,
       ...chartProps
     }),
     [chartProps, chartClassName]
   );
-  const getPieProps = (0, import_react4.useCallback)(
+  const getPieProps = (0, import_react5.useCallback)(
     ({ className, ...props }, ref = null) => ({
       ref,
-      className: (0, import_utils8.cx)(className, pieClassName),
+      className: (0, import_utils9.cx)(className, pieClassName),
       dataKey: "value",
       data,
       rootTabIndex: -1,
@@ -635,12 +670,12 @@ var usePieChart = ({
       pieProps
     ]
   );
-  const getCellProps = (0, import_react4.useCallback)(
+  const getCellProps = (0, import_react5.useCallback)(
     ({ index, className: classNameProp, ...props }, ref = null) => {
       const { className, color } = cellPropList[index];
       return {
         ref,
-        className: (0, import_utils8.cx)(classNameProp, className),
+        className: (0, import_utils9.cx)(classNameProp, className),
         fill: color,
         stroke: color,
         strokeWidth,
@@ -660,8 +695,8 @@ var usePieChart = ({
 
 // src/donut-chart.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var DonutChart = (0, import_core8.forwardRef)((props, ref) => {
-  const [styles, mergedProps] = (0, import_core8.useMultiComponentStyle)("DonutChart", props);
+var DonutChart = (0, import_core9.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core9.useMultiComponentStyle)("DonutChart", props);
   const {
     className,
     data,
@@ -688,8 +723,9 @@ var DonutChart = (0, import_core8.forwardRef)((props, ref) => {
     outerRadius,
     strokeWidth,
     legendProps,
+    labelProps,
     ...rest
-  } = (0, import_core8.omitThemeProps)(mergedProps);
+  } = (0, import_core9.omitThemeProps)(mergedProps);
   const {
     pieVars,
     getPieProps,
@@ -723,7 +759,8 @@ var DonutChart = (0, import_core8.forwardRef)((props, ref) => {
   const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
     legendProps
   });
-  const cells = (0, import_react5.useMemo)(
+  const { getLabelProps } = useChartLabel({ labelProps, styles });
+  const cells = (0, import_react6.useMemo)(
     () => data.map(({ name }, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       import_recharts.Cell,
       {
@@ -734,10 +771,10 @@ var DonutChart = (0, import_core8.forwardRef)((props, ref) => {
     [data, getCellProps]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_core8.ui.div,
+    import_core9.ui.div,
     {
       ref,
-      className: (0, import_utils9.cx)("ui-donut-chart", className),
+      className: (0, import_utils10.cx)("ui-donut-chart", className),
       var: pieVars,
       __css: { maxW: "full", ...styles.container },
       ...rest,
@@ -750,13 +787,21 @@ var DonutChart = (0, import_core8.forwardRef)((props, ref) => {
             {
               ...getPieChartProps({ className: "ui-donut-chart__chart" }),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                   import_recharts.Pie,
                   {
                     ...getPieProps({
                       className: "ui-donut-chart__donut"
                     }),
-                    children: cells
+                    children: [
+                      cells,
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        import_recharts.Label,
+                        {
+                          ...getLabelProps({ className: "ui-donut-chart__label" })
+                        }
+                      )
+                    ]
                   }
                 ),
                 withLegend ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(