@yamada-ui/charts 1.5.4-dev-20241005224505 → 1.5.4-dev-20241006032009

package/dist/area-chart.js

@@ -32,18 +32,18 @@ var import_recharts = require("recharts");
 // src/area-chart-gradient.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var AreaGradient = ({
-  color,
   id,
-  withGradient,
-  fillOpacity
+  color,
+  fillOpacity,
+  withGradient
 }) => {
   if (withGradient) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id, x1: "0", x2: "0", y1: "0", y2: "1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0%", stopColor: color, stopOpacity: fillOpacity }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "100%", stopColor: color, stopOpacity: 0.01 })
     ] });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { stopColor: color, stopOpacity: fillOpacity }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("linearGradient", { id, x1: "0", x2: "0", y1: "0", y2: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { stopColor: color, stopOpacity: fillOpacity }) });
   }
 };
 AreaGradient.displayName = "AreaGradient";
@@ -52,9 +52,9 @@ AreaGradient.__ui__ = "AreaGradient";
 // src/area-chart-split.tsx
 var import_core = require("@yamada-ui/core");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var AreaSplit = ({ offset, id, fillOpacity }) => {
+var AreaSplit = ({ id, fillOpacity, offset }) => {
   const { theme } = (0, import_core.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("linearGradient", { id, x1: "0", x2: "0", y1: "0", y2: "1", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "stop",
       {
@@ -360,13 +360,13 @@ var useChart = ({ containerProps = {} }) => {
     getContainerProps
   };
 };
-var useLegend = ({} = {}) => {
+var useLegend = () => {
   const { styles } = useChartContext();
   return {
     styles
   };
 };
-var useTooltip = ({} = {}) => {
+var useTooltip = () => {
   const { styles } = useChartContext();
   return {
     styles
@@ -378,7 +378,7 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var ChartLegend = (0, import_core4.forwardRef)(
   ({ className, payload = [], onHighlight, ...rest }, ref) => {
     const { styles } = useLegend();
-    const items = payload.map(({ dataKey, value: valueProp, color }, index) => {
+    const items = payload.map(({ color, dataKey, value: valueProp }, index) => {
       const value = dataKey != null ? dataKey : valueProp;
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
         import_core4.ui.div,
@@ -423,22 +423,22 @@ var import_utils4 = require("@yamada-ui/utils");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var ChartTooltip = (0, import_core5.forwardRef)(
   ({
-    label,
-    dataKey = "value",
     className,
-    payload = [],
-    valueFormatter,
+    dataKey = "value",
+    isRadialChart,
+    label,
     labelFormatter,
+    payload = [],
     unit,
-    isRadialChart,
+    valueFormatter,
     ...rest
   }, ref) => {
     var _a;
     const { styles } = useTooltip();
     const items = payload.map(
       ({
-        color: colorProp,
         name: nameProp,
+        color: colorProp,
         [dataKey]: valueProp,
         payload: payload2
       } = {}, index) => {
@@ -516,24 +516,24 @@ var import_core6 = require("@yamada-ui/core");
 var import_utils5 = require("@yamada-ui/utils");
 var import_react2 = require("react");
 var useAreaChart = ({
-  data,
-  series,
   type,
-  layoutType = "horizontal",
-  withGradient: withGradientProp,
-  withDots = true,
-  withActiveDots = true,
-  curveType = "monotone",
-  strokeWidth = 2,
   connectNulls = true,
+  curveType = "monotone",
+  data,
   fillOpacity = 0.4,
+  layoutType = "horizontal",
+  series,
   splitColors = ["#ee6a5d", "#5fce7d"],
   splitOffset,
-  referenceLineProps,
+  strokeWidth = 2,
+  styles,
   syncId,
+  withActiveDots = true,
+  withDots = true,
+  withGradient: withGradientProp,
   xAxisLabel,
   yAxisLabel,
-  styles,
+  referenceLineProps,
   ...rest
 }) => {
   var _a;
@@ -545,10 +545,10 @@ var useAreaChart = ({
   const withGradient = typeof withGradientProp === "boolean" ? withGradientProp : type === "default";
   const shouldHighlight = highlightedArea !== null;
   const {
-    dot = {},
     activeDot = {},
-    dimDot,
     dimArea,
+    dimDot,
+    dot = {},
     ...computedAreaProps
   } = (_a = rest.areaProps) != null ? _a : {};
   const areaColors = (0, import_react2.useMemo)(
@@ -563,7 +563,7 @@ var useAreaChart = ({
     () => splitColors.map((color, index) => ({
       name: `area-split-${index}`,
       token: "colors",
-      value: color != null ? color : "transparent"
+      value: color || "transparent"
     })),
     [splitColors]
   );
@@ -636,24 +636,27 @@ var useAreaChart = ({
     );
   }, [dimDot, theme]);
   const defaultSplitOffset = (0, import_react2.useMemo)(() => {
+    var _a2;
     if (series.length === 1) {
-      const dataKey = series[0].dataKey;
-      const dataMax = Math.max(...data.map((item) => item[dataKey]));
-      const dataMin = Math.min(...data.map((item) => item[dataKey]));
-      if (dataMax <= 0) return 0;
-      if (dataMin >= 0) return 1;
-      return dataMax / (dataMax - dataMin);
+      const dataKey = (_a2 = series[0]) == null ? void 0 : _a2.dataKey;
+      if (dataKey) {
+        const dataMax = Math.max(...data.map((item) => item[dataKey]));
+        const dataMin = Math.min(...data.map((item) => item[dataKey]));
+        if (dataMax <= 0) return 0;
+        if (dataMin >= 0) return 1;
+        return dataMax / (dataMax - dataMin);
+      }
     }
     return 0.5;
   }, [data, series]);
   const areaPropsList = (0, import_react2.useMemo)(
     () => series.map((props, index) => {
       const {
-        dataKey,
-        dot: dot2 = {},
         activeDot: activeDot2 = {},
-        dimDot: dimDot2 = {},
+        dataKey,
         dimArea: dimArea2 = {},
+        dimDot: dimDot2 = {},
+        dot: dot2 = {},
         strokeDasharray,
         ...computedProps
       } = props;
@@ -680,8 +683,8 @@ var useAreaChart = ({
         )(theme);
         resolvedActiveDot = {
           className: (0, import_utils5.cx)("ui-area-chart__active-dot", className),
-          stroke: color,
           r: 4,
+          stroke: color,
           ...rest3
         };
       } else {
@@ -712,11 +715,11 @@ var useAreaChart = ({
       return {
         ...rest2,
         id,
+        activeDot: resolvedActiveDot,
         color,
-        strokeDasharray,
         dataKey,
-        activeDot: resolvedActiveDot,
-        dot: resolvedDot
+        dot: resolvedDot,
+        strokeDasharray
       };
     }),
     [
@@ -744,14 +747,14 @@ var useAreaChart = ({
       ref,
       className: (0, import_utils5.cx)(className, areaChartClassName),
       data,
-      stackOffset: type === "percent" ? "expand" : void 0,
       layout: layoutType,
-      syncId,
       margin: {
         bottom: xAxisLabel ? 30 : void 0,
         left: yAxisLabel ? 10 : void 0,
         right: yAxisLabel ? 5 : void 0
       },
+      stackOffset: type === "percent" ? "expand" : void 0,
+      syncId,
       ...props,
       ...chartProps
     }),
@@ -769,40 +772,41 @@ var useAreaChart = ({
   const getAreaSplitProps = (0, import_react2.useCallback)(
     (props = {}) => ({
       id: splitId,
-      offset: splitOffset != null ? splitOffset : defaultSplitOffset,
       fillOpacity: fillOpacityVar,
+      offset: splitOffset != null ? splitOffset : defaultSplitOffset,
       ...props
     }),
     [defaultSplitOffset, splitId, splitOffset, fillOpacityVar]
   );
   const getAreaProps = (0, import_react2.useCallback)(
-    ({ index, className: classNameProp, ...props }, ref = null) => {
+    ({ className: classNameProp, index, ...props }, ref = null) => {
+      var _a2;
       const {
         id,
-        color,
         className,
-        dataKey,
-        strokeDasharray,
         activeDot: activeDot2,
+        color,
+        dataKey = "",
         dot: dot2,
+        strokeDasharray,
         ...rest2
-      } = areaPropsList[index];
+      } = (_a2 = areaPropsList[index]) != null ? _a2 : {};
       return {
+        id,
         ref,
+        type: curveType,
+        name: dataKey,
         className: (0, import_utils5.cx)(classNameProp, className),
-        id,
         activeDot: activeDot2,
-        dot: dot2,
-        name: dataKey,
-        type: curveType,
+        connectNulls,
         dataKey,
+        dot: dot2,
         fill: type === "split" ? `url(#${splitId})` : `url(#${id})`,
-        strokeWidth,
-        stroke: color,
         isAnimationActive: false,
-        connectNulls,
         stackId: stacked ? "stack" : void 0,
+        stroke: color,
         strokeDasharray,
+        strokeWidth,
         ...props,
         ...rest2
       };
@@ -819,19 +823,19 @@ var useAreaChart = ({
   );
   const getAreaGradientProps = (0, import_react2.useCallback)(
     (props = {}) => ({
-      withGradient,
       fillOpacity: fillOpacityVar,
+      withGradient,
       ...props
     }),
     [withGradient, fillOpacityVar]
   );
   return {
+    areaVars,
+    setHighlightedArea,
     getAreaChartProps,
-    getAreaSplitProps,
-    getAreaProps,
     getAreaGradientProps,
-    areaVars,
-    setHighlightedArea
+    getAreaProps,
+    getAreaSplitProps
   };
 };
 
@@ -840,19 +844,19 @@ var import_core7 = require("@yamada-ui/core");
 var import_utils6 = require("@yamada-ui/utils");
 var import_react3 = require("react");
 var useChartAxis = ({
-  dataKey,
   type,
+  dataKey,
+  gridAxis = "x",
   layoutType = "horizontal",
+  styles,
   tickLine = "y",
-  gridAxis = "x",
+  unit,
   withXAxis = true,
   withYAxis = true,
   xAxisLabel: xAxisLabelProp,
+  xAxisTickFormatter = type === "percent" && layoutType === "vertical" ? valueToPercent : void 0,
   yAxisLabel: yAxisLabelProp,
-  unit,
   yAxisTickFormatter = type === "percent" && layoutType === "horizontal" ? valueToPercent : void 0,
-  xAxisTickFormatter = type === "percent" && layoutType === "vertical" ? valueToPercent : void 0,
-  styles,
   ...rest
 }) => {
   var _a, _b, _c, _d;
@@ -862,7 +866,7 @@ var useChartAxis = ({
     [dataKey, layoutType]
   );
   const yAxisKey = (0, import_react3.useMemo)(
-    () => layoutType === "vertical" ? { dataKey, type: "category" } : { type: "number" },
+    () => layoutType === "vertical" ? { type: "category", dataKey } : { type: "number" },
     [dataKey, layoutType]
   );
   const withXTickLine = gridAxis !== "none" && (tickLine === "x" || tickLine === "xy");
@@ -893,15 +897,15 @@ var useChartAxis = ({
       className: (0, import_utils6.cx)(className, xAxisClassName),
       hide: !withXAxis,
       ...xAxisKey,
-      tick: {
-        transform: "translate(0, 10)",
-        fill: "currentColor"
-      },
-      stroke: "",
       interval: "preserveStartEnd",
-      tickLine: xTickLine,
       minTickGap: 5,
+      stroke: "",
+      tick: {
+        fill: "currentColor",
+        transform: "translate(0, 10)"
+      },
       tickFormatter: xAxisTickFormatter,
+      tickLine: xTickLine,
       ...props,
       ...xAxisProps
     }),
@@ -917,17 +921,17 @@ var useChartAxis = ({
   const getYAxisProps = (0, import_react3.useCallback)(
     ({ className, ...props } = {}) => ({
       className: (0, import_utils6.cx)(className, yAxisClassName),
-      hide: !withYAxis,
       axisLine: false,
+      hide: !withYAxis,
       ...yAxisKey,
-      tickLine: yTickLine,
+      allowDecimals: true,
       tick: {
-        transform: "translate(-10, 0)",
-        fill: "currentColor"
+        fill: "currentColor",
+        transform: "translate(-10, 0)"
       },
-      allowDecimals: true,
-      unit,
       tickFormatter: yAxisTickFormatter,
+      tickLine: yTickLine,
+      unit,
       ...props,
       ...yAxisProps
     }),
@@ -944,9 +948,9 @@ var useChartAxis = ({
   const getXAxisLabelProps = (0, import_react3.useCallback)(
     ({ className, ...props } = {}) => ({
       className: (0, import_utils6.cx)(className, xAxisLabelClassName),
-      value: xAxisLabel,
-      position: "insideBottom",
       offset: -20,
+      position: "insideBottom",
+      value: xAxisLabel,
       ...props,
       ...xAxisLabelProps
     }),
@@ -955,21 +959,21 @@ var useChartAxis = ({
   const getYAxisLabelProps = (0, import_react3.useCallback)(
     ({ className, ...props } = {}) => ({
       className: (0, import_utils6.cx)(className, yAxisLabelClassName),
-      value: yAxisLabel,
-      position: "insideLeft",
       angle: -90,
-      textAnchor: "middle",
       offset: -5,
+      position: "insideLeft",
+      textAnchor: "middle",
+      value: yAxisLabel,
       ...props,
       ...yAxisLabelProps
     }),
     [yAxisLabel, yAxisLabelClassName, yAxisLabelProps]
   );
   return {
-    getXAxisProps,
-    getYAxisProps,
     getXAxisLabelProps,
-    getYAxisLabelProps
+    getXAxisProps,
+    getYAxisLabelProps,
+    getYAxisProps
   };
 };
 var valueToPercent = (value) => {
@@ -981,10 +985,10 @@ var import_core8 = require("@yamada-ui/core");
 var import_utils7 = require("@yamada-ui/utils");
 var import_react4 = require("react");
 var useChartGrid = ({
-  gridProps = {},
   gridAxis = "x",
   strokeDasharray = "5 5",
-  styles
+  styles,
+  gridProps = {}
 }) => {
   const { theme } = (0, import_core8.useTheme)();
   const [reChartsProps, propClassName] = getComponentProps(
@@ -995,9 +999,9 @@ var useChartGrid = ({
     ({ className, ...props } = {}, ref = null) => ({
       ref,
       className: (0, import_utils7.cx)("ui-chart__grid", className, propClassName),
+      horizontal: gridAxis === "x" || gridAxis === "xy",
       strokeDasharray,
       vertical: gridAxis === "y" || gridAxis === "xy",
-      horizontal: gridAxis === "x" || gridAxis === "xy",
       ...props,
       ...reChartsProps
     }),
@@ -1027,7 +1031,7 @@ var useChartLegend = ({
     },
     [rest]
   );
-  return { legendProps, getLegendProps };
+  return { getLegendProps, legendProps };
 };
 
 // src/use-chart-reference-line.ts
@@ -1035,8 +1039,8 @@ var import_core9 = require("@yamada-ui/core");
 var import_utils9 = require("@yamada-ui/utils");
 var import_react6 = require("react");
 var useChartReferenceLine = ({
-  referenceLineProps = [],
-  styles
+  styles,
+  referenceLineProps = []
 }) => {
   const { theme } = (0, import_core9.useTheme)();
   const styleClassName = (0, import_core9.getCSS)(styles.referenceLine)(theme);
@@ -1048,23 +1052,24 @@ var useChartReferenceLine = ({
       )(theme);
       const color = (0, import_core9.getVar)(`reference-line-${index}`)(theme);
       const label = {
-        value: labelProp,
         fill: color,
         position: "insideBottomLeft",
+        value: labelProp,
         ...(0, import_utils9.isObject)(labelProp) ? labelProp : {}
       };
-      return { propClassName, color, label, ...rest };
+      return { color, label, propClassName, ...rest };
     }),
     [referenceLineProps, styleClassName, theme]
   );
   const getReferenceLineProps = (0, import_react6.useCallback)(
-    ({ index, className, ...props }, ref = null) => {
-      const { propClassName, color, label, ...rest } = propList[index];
+    ({ className, index, ...props }, ref = null) => {
+      var _a;
+      const { color, label, propClassName, ...rest } = (_a = propList[index]) != null ? _a : {};
       return {
         ref,
         className: (0, import_utils9.cx)(className, propClassName),
-        stroke: color,
         label,
+        stroke: color,
         ...props,
         ...rest
       };
@@ -1079,9 +1084,9 @@ var import_core10 = require("@yamada-ui/core");
 var import_utils10 = require("@yamada-ui/utils");
 var import_react7 = require("react");
 var useChartTooltip = ({
-  tooltipProps: _tooltipProps = {},
+  styles,
   tooltipAnimationDuration = 0,
-  styles
+  tooltipProps: _tooltipProps = {}
 }) => {
   const { theme } = (0, import_core10.useTheme)();
   const { cursor, ...rest } = _tooltipProps;
@@ -1097,16 +1102,16 @@ var useChartTooltip = ({
     (props, ref = null) => ({
       ref,
       animationDuration: tooltipAnimationDuration,
-      isAnimationActive: (tooltipAnimationDuration || 0) > 0,
       cursor: {
         className: (0, import_utils10.cx)("ui-chart__cursor", cursorClassName)
       },
+      isAnimationActive: (tooltipAnimationDuration || 0) > 0,
       ...props,
       ...tooltipProps
     }),
     [cursorClassName, tooltipAnimationDuration, tooltipProps]
   );
-  return { tooltipProps: tooltipUIProps, getTooltipProps };
+  return { getTooltipProps, tooltipProps: tooltipUIProps };
 };
 
 // src/area-chart.tsx
@@ -1114,127 +1119,127 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 var AreaChart = (0, import_core11.forwardRef)((props, ref) => {
   const [styles, mergedProps] = (0, import_core11.useComponentMultiStyle)("AreaChart", props);
   const {
+    type = "default",
     className,
-    series,
+    connectNulls,
+    curveType,
+    data,
     dataKey,
+    fillOpacity,
+    gridAxis,
+    labelFormatter,
     layoutType,
+    series,
+    splitColors,
+    splitOffset,
+    strokeDasharray,
+    strokeWidth,
+    syncId,
     tickLine,
-    gridAxis,
+    tooltipAnimationDuration,
+    unit,
+    valueFormatter,
+    withActiveDots,
+    withDots,
+    withGradient,
+    withLegend = false,
+    withTooltip = true,
     withXAxis,
     withYAxis,
-    xAxisProps,
-    yAxisProps,
     xAxisLabel,
+    xAxisTickFormatter,
     yAxisLabel,
-    xAxisLabelProps,
-    yAxisLabelProps,
-    type = "default",
-    withTooltip = true,
-    withLegend = false,
-    referenceLineProps = [],
+    yAxisTickFormatter,
+    areaProps,
+    chartProps,
     containerProps,
-    unit,
     gridProps,
-    strokeDasharray,
-    yAxisTickFormatter,
-    xAxisTickFormatter,
-    valueFormatter,
-    labelFormatter,
-    tooltipProps,
-    tooltipAnimationDuration,
     legendProps,
-    data,
-    chartProps,
-    areaProps,
-    withGradient,
-    withDots,
-    withActiveDots,
-    curveType,
-    strokeWidth,
-    connectNulls,
-    fillOpacity,
-    splitColors,
-    splitOffset,
-    syncId,
+    referenceLineProps = [],
+    tooltipProps,
+    xAxisLabelProps,
+    xAxisProps,
+    yAxisLabelProps,
+    yAxisProps,
     ...rest
   } = (0, import_core11.omitThemeProps)(mergedProps);
   const {
+    areaVars,
+    setHighlightedArea,
     getAreaChartProps,
-    getAreaSplitProps,
-    getAreaProps,
     getAreaGradientProps,
-    areaVars,
-    setHighlightedArea
+    getAreaProps,
+    getAreaSplitProps
   } = useAreaChart({
-    layoutType,
     type,
-    series,
-    referenceLineProps,
-    data,
-    chartProps,
-    areaProps,
-    withGradient,
-    withDots,
-    withActiveDots,
-    curveType,
-    strokeWidth,
     connectNulls,
+    curveType,
+    data,
     fillOpacity,
+    layoutType,
+    series,
     splitColors,
     splitOffset,
+    strokeWidth,
+    styles,
     syncId,
+    withActiveDots,
+    withDots,
+    withGradient,
     xAxisLabel,
     yAxisLabel,
-    styles
+    areaProps,
+    chartProps,
+    referenceLineProps
   });
   const { getContainerProps } = useChart({ containerProps });
   const {
-    getXAxisProps,
-    getYAxisProps,
     getXAxisLabelProps,
-    getYAxisLabelProps
+    getXAxisProps,
+    getYAxisLabelProps,
+    getYAxisProps
   } = useChartAxis({
-    dataKey,
     type,
+    dataKey,
+    gridAxis,
     layoutType,
+    styles,
     tickLine,
-    gridAxis,
+    unit,
     withXAxis,
     withYAxis,
-    xAxisProps,
-    yAxisProps,
     xAxisLabel,
+    xAxisTickFormatter,
     yAxisLabel,
+    yAxisTickFormatter,
     xAxisLabelProps,
+    xAxisProps,
     yAxisLabelProps,
-    unit,
-    yAxisTickFormatter,
-    xAxisTickFormatter,
-    styles
+    yAxisProps
   });
   const { getReferenceLineProps } = useChartReferenceLine({
-    referenceLineProps,
-    styles
+    styles,
+    referenceLineProps
   });
   const { getGridProps } = useChartGrid({
-    gridProps,
     gridAxis,
     strokeDasharray,
-    styles
+    styles,
+    gridProps
   });
-  const { tooltipProps: computedTooltipProps, getTooltipProps } = useChartTooltip({
-    tooltipProps,
+  const { getTooltipProps, tooltipProps: computedTooltipProps } = useChartTooltip({
+    styles,
     tooltipAnimationDuration,
-    styles
+    tooltipProps
   });
-  const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
+  const { getLegendProps, legendProps: computedLegendProps } = useChartLegend({
     legendProps
   });
   const areas = (0, import_react8.useMemo)(
     () => series.map(({ dataKey: dataKey2 }, index) => {
       const { id, stroke, ...rest2 } = getAreaProps({
-        index,
-        className: "ui-area-chart__area"
+        className: "ui-area-chart__area",
+        index
       });
       return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react8.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AreaGradient, { ...getAreaGradientProps({ id, color: stroke }) }) }),
@@ -1248,8 +1253,8 @@ var AreaChart = (0, import_core11.forwardRef)((props, ref) => {
       import_recharts.ReferenceLine,
       {
         ...getReferenceLineProps({
-          index,
-          className: "ui-area-chart__reference-line"
+          className: "ui-area-chart__reference-line",
+          index
         })
       },
       `referenceLine-${index}`
@@ -1317,10 +1322,10 @@ var AreaChart = (0, import_core11.forwardRef)((props, ref) => {
                       {
                         className: "ui-area-chart__tooltip",
                         label,
-                        payload,
-                        valueFormatter,
                         labelFormatter,
+                        payload,
                         unit,
+                        valueFormatter,
                         ...computedTooltipProps
                       }
                     ),