fixed incompatibility

components/ui/chart.tsx

@@ -3,6 +3,7 @@
 import * as React from "react"
 import * as RechartsPrimitive from "recharts"
 
+
 import { cn } from "@/lib/utils"
 
 // Format: { THEME_NAME: CSS_SELECTOR }
@@ -104,6 +105,19 @@ ${colorConfig
 
 const ChartTooltip = RechartsPrimitive.Tooltip
 
+type ChartTooltipContentProps = React.ComponentProps<"div"> &
+  Omit<RechartsPrimitive.TooltipProps<any, any>, "content"> & {
+    active?: boolean
+    payload?: any[]
+    label?: any
+    hideLabel?: boolean
+    hideIndicator?: boolean
+    indicator?: "line" | "dot" | "dashed"
+    nameKey?: string
+    labelKey?: string
+  }
+
+
 function ChartTooltipContent({
   active,
   payload,
@@ -118,14 +132,9 @@ function ChartTooltipContent({
   color,
   nameKey,
   labelKey,
-}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+}: ChartTooltipContentProps) {
-  React.ComponentProps<"div"> & {
+
-    hideLabel?: boolean
+
-    hideIndicator?: boolean
-    indicator?: "line" | "dot" | "dashed"
-    nameKey?: string
-    labelKey?: string
-  }) {
   const { config } = useChart()
 
   const tooltipLabel = React.useMemo(() => {
@@ -258,11 +267,13 @@ function ChartLegendContent({
   payload,
   verticalAlign = "bottom",
   nameKey,
-}: React.ComponentProps<"div"> &
+}: React.ComponentProps<"div"> & {
-  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+  payload?: any[]
-    hideIcon?: boolean
+  verticalAlign?: "top" | "middle" | "bottom"
-    nameKey?: string
+  hideIcon?: boolean
-  }) {
+  nameKey?: string
+}) {
+
   const { config } = useChart()
 
   if (!payload?.length) {