diff --git a/.changeset/violet-carrots-clean.md b/.changeset/violet-carrots-clean.md
new file mode 100644
index 00000000..649d99c1
--- /dev/null
+++ b/.changeset/violet-carrots-clean.md
@@ -0,0 +1,5 @@
+---
+'@kubed/charts': patch
+---
+
+Support customTooltip on Some charts
diff --git a/packages/charts/src/charts/AreaChart/AreaChart.tsx b/packages/charts/src/charts/AreaChart/AreaChart.tsx
index fdef42b8..b33b7cf7 100644
--- a/packages/charts/src/charts/AreaChart/AreaChart.tsx
+++ b/packages/charts/src/charts/AreaChart/AreaChart.tsx
@@ -46,6 +46,7 @@ export const AreaChart = ({
   minValue,
   maxValue,
   colors,
+  customTooltip,
   legendVerticalAlign = 'top',
   legendAlign = 'right',
   legendFormatter,
@@ -131,6 +132,7 @@ export const AreaChart = ({
           <Tooltip
             wrapperStyle={{ outline: 'none' }}
             content={({ active, payload, label }) => (
+              customTooltip && customTooltip(payload)) || (
               <TooltipContent
                 active={active}
                 payload={payload}
diff --git a/packages/charts/src/charts/BarChart/BarChart.tsx b/packages/charts/src/charts/BarChart/BarChart.tsx
index fa5c4936..42a72d4d 100644
--- a/packages/charts/src/charts/BarChart/BarChart.tsx
+++ b/packages/charts/src/charts/BarChart/BarChart.tsx
@@ -46,6 +46,7 @@ export const BarChart = ({
   minValue,
   maxValue,
   colors,
+  customTooltip,
   legendVerticalAlign = 'top',
   legendAlign = 'right',
   legendFormatter,
@@ -174,7 +175,8 @@ export const BarChart = ({
         {showTooltip ? (
           <Tooltip
             wrapperStyle={{ outline: 'none' }}
-            content={({ active, payload, label }) => (
+            content={({ active, payload, label }) =>  (
+              customTooltip && customTooltip(payload)) || (
               <TooltipContent
                 active={active}
                 payload={payload}
diff --git a/packages/charts/src/charts/LineChart/LineChart.tsx b/packages/charts/src/charts/LineChart/LineChart.tsx
index db34018b..9ce46a42 100644
--- a/packages/charts/src/charts/LineChart/LineChart.tsx
+++ b/packages/charts/src/charts/LineChart/LineChart.tsx
@@ -38,6 +38,7 @@ export const LineChart = ({
   minValue,
   maxValue,
   colors,
+  customTooltip,
   legendVerticalAlign = 'top',
   legendAlign = 'right',
   legendFormatter,
@@ -118,15 +119,17 @@ export const LineChart = ({
         {showTooltip ? (
           <Tooltip
             wrapperStyle={{ outline: 'none' }}
-            content={({ active, payload, label }) => (
-              <TooltipContent
-                active={active}
-                payload={payload}
-                label={label}
-                valueFormatter={valueFormatter}
-                legendFormatter={legendFormatter}
-              />
-            )}
+            content={({ active, payload, label }) =>
+              (customTooltip && customTooltip(payload)) || (
+                <TooltipContent
+                  active={active}
+                  payload={payload}
+                  label={label}
+                  valueFormatter={valueFormatter}
+                  legendFormatter={legendFormatter}
+                />
+              )
+            }
           />
         ) : null}
         {categories.map((category) => (
diff --git a/packages/charts/src/types.ts b/packages/charts/src/types.ts
index a0572785..44ab30b2 100644
--- a/packages/charts/src/types.ts
+++ b/packages/charts/src/types.ts
@@ -23,6 +23,7 @@ export interface ChartBaseProps extends CategoricalChartProps {
   legendAlign?: 'left' | 'center' | 'right';
   legendFormatter?: LegendFormatter;
   maxActiveCategories?: number;
+  customTooltip?: (payload: any[]) => React.ReactNode;
 }
 
 export type ValueFormatter = {