diff --git a/.storybook/main.ts b/.storybook/main.ts
index f366011e086..bbcab54a8a2 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -44,8 +44,8 @@ const config: StorybookConfig = {
           titlePrefix: 'Knowledge Base'
         },
         {
-          directory: '../packages/charts',
-          files: '**/*@(.stories.tsx)',
+          directory: '../packages/charts/src/components',
+          files: '**/*.@(mdx|stories.@(mdx|tsx))',
           titlePrefix: 'Charts'
         },
         {
diff --git a/cypress.config.ts b/cypress.config.ts
index 1926aa3aea4..6f2f0e433ed 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -13,7 +13,8 @@ export default defineConfig({
         '**/node_modules/**',
         'packages/*/src/index.ts',
         'packages/main/src/components/AnalyticalTable/types/*',
-        'packages/main/src/webComponents/**'
+        'packages/main/src/webComponents/**',
+        'packages/charts/src/resources/**'
       ]
     }
   },
diff --git a/packages/charts/src/components/BarChart/BarChart.mdx b/packages/charts/src/components/BarChart/BarChart.mdx
index 707bec3d90e..1779ebb9c6e 100644
--- a/packages/charts/src/components/BarChart/BarChart.mdx
+++ b/packages/charts/src/components/BarChart/BarChart.mdx
@@ -1,5 +1,6 @@
 import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs';
+import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './BarChart.stories';
 
 <Meta of={ComponentStories} />
@@ -62,4 +63,6 @@ You can set a reference line to any value by using the `referenceLine` `chartCon
 
 <Canvas of={ComponentStories.WithHighlightedMeasure} />
 
+<TooltipStory of={ComponentStories.WithCustomTooltipConfig} />
+
 <Footer />
diff --git a/packages/charts/src/components/BarChart/BarChart.stories.tsx b/packages/charts/src/components/BarChart/BarChart.stories.tsx
index d3b93904a4b..ffcf792dc3e 100644
--- a/packages/charts/src/components/BarChart/BarChart.stories.tsx
+++ b/packages/charts/src/components/BarChart/BarChart.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps.js';
+import { complexDataSet, secondaryDimensionDataSet, simpleDataSet, tooltipConfig } from '../../resources/DemoProps.js';
 import { BarChart } from './BarChart.js';
 
 const meta = {
@@ -152,3 +152,7 @@ export const WithHighlightedMeasure: Story = {
     ]
   }
 };
+
+export const WithCustomTooltipConfig: Story = {
+  args: tooltipConfig
+};
diff --git a/packages/charts/src/components/BulletChart/BulletChart.mdx b/packages/charts/src/components/BulletChart/BulletChart.mdx
index 7df1b4fe6f1..e1141737be5 100644
--- a/packages/charts/src/components/BulletChart/BulletChart.mdx
+++ b/packages/charts/src/components/BulletChart/BulletChart.mdx
@@ -1,5 +1,6 @@
 import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs';
+import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './BulletChart.stories';
 
 <Meta of={ComponentStories} />
@@ -64,4 +65,6 @@ You can do this via the `measures` array:
 
 <Canvas of={ComponentStories.LoadingPlaceholder} />
 
+<TooltipStory of={ComponentStories.WithCustomTooltipConfig} />
+
 <Footer />
diff --git a/packages/charts/src/components/BulletChart/BulletChart.stories.tsx b/packages/charts/src/components/BulletChart/BulletChart.stories.tsx
index 58eefac195e..76a40bbdfa6 100644
--- a/packages/charts/src/components/BulletChart/BulletChart.stories.tsx
+++ b/packages/charts/src/components/BulletChart/BulletChart.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { complexBulletDataset } from '../../resources/DemoProps.js';
+import { complexBulletDataset, tooltipConfig } from '../../resources/DemoProps.js';
 import { BulletChart } from './BulletChart.js';
 
 const meta = {
@@ -116,3 +116,7 @@ export const LoadingPlaceholder: Story = {
     dataset: []
   }
 };
+
+export const WithCustomTooltipConfig: Story = {
+  args: tooltipConfig
+};
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.mdx b/packages/charts/src/components/ColumnChart/ColumnChart.mdx
index d40a06bc98f..f14bd0d8dc3 100644
--- a/packages/charts/src/components/ColumnChart/ColumnChart.mdx
+++ b/packages/charts/src/components/ColumnChart/ColumnChart.mdx
@@ -1,5 +1,6 @@
 import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs';
+import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './ColumnChart.stories';
 
 <Meta of={ComponentStories} />
@@ -61,4 +62,6 @@ You can set a reference line to any value by using the `referenceLine` `chartCon
 
 <Canvas of={ComponentStories.WithHighlightedMeasure} />
 
+<TooltipStory of={ComponentStories.WithCustomTooltipConfig} />;
+
 <Footer />
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.stories.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.stories.tsx
index a4ad0d1cc07..e0fdf1e1f1c 100644
--- a/packages/charts/src/components/ColumnChart/ColumnChart.stories.tsx
+++ b/packages/charts/src/components/ColumnChart/ColumnChart.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps.js';
+import { complexDataSet, secondaryDimensionDataSet, simpleDataSet, tooltipConfig } from '../../resources/DemoProps.js';
 import { ColumnChart } from './ColumnChart.js';
 
 const meta = {
@@ -143,3 +143,7 @@ export const WithHighlightedMeasure: Story = {
     ]
   }
 };
+
+export const WithCustomTooltipConfig: Story = {
+  args: tooltipConfig
+};
diff --git a/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.tsx b/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.tsx
index 4be22eed35b..75ddd3616ec 100644
--- a/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.tsx
+++ b/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.tsx
@@ -49,7 +49,10 @@ interface DimensionConfig extends IChartDimension {
 }
 
 export interface ColumnChartWithTrendProps
-  extends Omit<IChartBaseProps<Omit<ICartesianChartConfig, 'secondYAxis' | 'secondYAxisConfig'>>, 'syncId'> {
+  extends Omit<
+    IChartBaseProps<Omit<ICartesianChartConfig, 'secondYAxis' | 'secondYAxisConfig'>>,
+    'syncId' | 'tooltipConfig'
+  > {
   /**
    * An array of config objects. Each object will define one dimension of the chart.
    *
@@ -59,7 +62,7 @@ export interface ColumnChartWithTrendProps
    *
    * **Optional Properties**
    * - `formatter`: function will be called for each data label and allows you to format it according to your needs
-   * - `interval`: number that controls how many ticks are rendered on the x axis
+   * - `interval`: number that controls how many ticks are rendered on the x-axis
    *
    */
   dimensions: DimensionConfig[];
@@ -160,7 +163,7 @@ const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProp
     }
   } as TooltipProps<any, any>;
 
-  const { chartConfig: _0, dimensions: _1, measures: _2, tooltipConfig: _3, ...propsWithoutOmitted } = rest;
+  const { chartConfig: _0, dimensions: _1, measures: _2, ...propsWithoutOmitted } = rest;
 
   return (
     <div
diff --git a/packages/charts/src/components/ComposedChart/ComposedChart.mdx b/packages/charts/src/components/ComposedChart/ComposedChart.mdx
index c0d79924945..24170d98c23 100644
--- a/packages/charts/src/components/ComposedChart/ComposedChart.mdx
+++ b/packages/charts/src/components/ComposedChart/ComposedChart.mdx
@@ -1,5 +1,6 @@
 import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs';
+import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './ComposedChart.stories';
 
 <Meta of={ComponentStories} />
@@ -62,4 +63,6 @@ You can set a reference line to any value by using the `referenceLine` `chartCon
 
 <Canvas of={ComponentStories.LoadingPlaceholder} />
 
+<TooltipStory of={ComponentStories.WithCustomTooltipConfig} />
+
 <Footer />
diff --git a/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx b/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx
index fa36e51d106..9d5756bdfc8 100644
--- a/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx
+++ b/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { bigDataSet, complexDataSet, simpleDataSet } from '../../resources/DemoProps.js';
+import { bigDataSet, complexDataSet, simpleDataSet, tooltipConfig } from '../../resources/DemoProps.js';
 import { ComposedChart } from './index.js';
 
 const meta = {
@@ -203,3 +203,7 @@ export const LoadingPlaceholder: Story = {
     dataset: []
   }
 };
+
+export const WithCustomTooltipConfig: Story = {
+  args: tooltipConfig
+};
diff --git a/packages/charts/src/components/DonutChart/DonutChart.mdx b/packages/charts/src/components/DonutChart/DonutChart.mdx
index 737637c987e..0c5a74017bd 100644
--- a/packages/charts/src/components/DonutChart/DonutChart.mdx
+++ b/packages/charts/src/components/DonutChart/DonutChart.mdx
@@ -1,5 +1,6 @@
 import { Canvas, Meta } from '@storybook/addon-docs';
 import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
+import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './DonutChart.stories';
 
 <Meta of={ComponentStories} />
@@ -47,4 +48,6 @@ import * as ComponentStories from './DonutChart.stories';
 
 <Canvas of={ComponentStories.HideLabels} />
 
+<TooltipStory of={ComponentStories.WithCustomTooltipConfig} />
+
 <Footer />
diff --git a/packages/charts/src/components/DonutChart/DonutChart.stories.tsx b/packages/charts/src/components/DonutChart/DonutChart.stories.tsx
index 183ef24a6ad..ce841aa1f34 100644
--- a/packages/charts/src/components/DonutChart/DonutChart.stories.tsx
+++ b/packages/charts/src/components/DonutChart/DonutChart.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { simpleDataSet, simpleDataSetWithSmallValues } from '../../resources/DemoProps.js';
+import { simpleDataSet, simpleDataSetWithSmallValues, tooltipConfig } from '../../resources/DemoProps.js';
 import { DonutChart } from './DonutChart.js';
 
 const meta = {
@@ -95,3 +95,7 @@ export const HideLabels: Story = {
     dataset: simpleDataSetWithSmallValues
   }
 };
+
+export const WithCustomTooltipConfig: Story = {
+  args: tooltipConfig
+};
diff --git a/packages/charts/src/components/LineChart/LineChart.mdx b/packages/charts/src/components/LineChart/LineChart.mdx
index af9ac4c34ed..a79e498def1 100644
--- a/packages/charts/src/components/LineChart/LineChart.mdx
+++ b/packages/charts/src/components/LineChart/LineChart.mdx
@@ -1,5 +1,6 @@
 import { Canvas, Meta } from '@storybook/addon-docs';
 import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
+import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './LineChart.stories';
 
 <Meta of={ComponentStories} />
@@ -89,4 +90,6 @@ export const LineChartWithLinearGradient = () => {
 };
 ```
 
+<TooltipStory of={ComponentStories.WithCustomTooltipConfig} />
+
 <Footer />
diff --git a/packages/charts/src/components/LineChart/LineChart.stories.tsx b/packages/charts/src/components/LineChart/LineChart.stories.tsx
index 4ebe61c6f48..6decb5d995e 100644
--- a/packages/charts/src/components/LineChart/LineChart.stories.tsx
+++ b/packages/charts/src/components/LineChart/LineChart.stories.tsx
@@ -1,5 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { bigDataSet, complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps.js';
+import {
+  bigDataSet,
+  complexDataSet,
+  secondaryDimensionDataSet,
+  simpleDataSet,
+  tooltipConfig
+} from '../../resources/DemoProps.js';
 import { LineChart } from './LineChart.js';
 
 const meta = {
@@ -151,3 +157,7 @@ export const WithLinearGradient: Story = {
     ]
   }
 };
+
+export const WithCustomTooltipConfig: Story = {
+  args: tooltipConfig
+};
diff --git a/packages/charts/src/components/PieChart/PieChart.mdx b/packages/charts/src/components/PieChart/PieChart.mdx
index b3eeb5e53f3..19726ff8d5f 100644
--- a/packages/charts/src/components/PieChart/PieChart.mdx
+++ b/packages/charts/src/components/PieChart/PieChart.mdx
@@ -1,5 +1,6 @@
 import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs';
+import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './PieChart.stories';
 
 <Meta of={ComponentStories} />
@@ -35,4 +36,6 @@ import * as ComponentStories from './PieChart.stories';
 
 <Canvas of={ComponentStories.HideLabels} />
 
+<TooltipStory of={ComponentStories.WithCustomTooltipConfig} />
+
 <Footer />
diff --git a/packages/charts/src/components/PieChart/PieChart.stories.tsx b/packages/charts/src/components/PieChart/PieChart.stories.tsx
index c3823c4f208..da2c0dab452 100644
--- a/packages/charts/src/components/PieChart/PieChart.stories.tsx
+++ b/packages/charts/src/components/PieChart/PieChart.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { simpleDataSet, simpleDataSetWithSmallValues } from '../../resources/DemoProps.js';
+import { simpleDataSet, simpleDataSetWithSmallValues, tooltipConfig } from '../../resources/DemoProps.js';
 import { PieChart } from './PieChart.js';
 
 const meta = {
@@ -67,3 +67,7 @@ export const HideLabels: Story = {
     dataset: simpleDataSetWithSmallValues
   }
 };
+
+export const WithCustomTooltipConfig: Story = {
+  args: tooltipConfig
+};
diff --git a/packages/charts/src/components/RadarChart/RadarChart.mdx b/packages/charts/src/components/RadarChart/RadarChart.mdx
index 2ed3e671fa6..14dd1dc29ed 100644
--- a/packages/charts/src/components/RadarChart/RadarChart.mdx
+++ b/packages/charts/src/components/RadarChart/RadarChart.mdx
@@ -1,5 +1,6 @@
 import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs';
+import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './RadarChart.stories';
 
 <Meta of={ComponentStories} />
@@ -35,4 +36,6 @@ import * as ComponentStories from './RadarChart.stories';
 
 <Canvas of={ComponentStories.LoadingPlaceholder} />
 
+<TooltipStory of={ComponentStories.WithCustomTooltipConfig} />
+
 <Footer />
diff --git a/packages/charts/src/components/RadarChart/RadarChart.stories.tsx b/packages/charts/src/components/RadarChart/RadarChart.stories.tsx
index 9bbe1b16799..fd2e903775d 100644
--- a/packages/charts/src/components/RadarChart/RadarChart.stories.tsx
+++ b/packages/charts/src/components/RadarChart/RadarChart.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { complexDataSet, simpleDataSet } from '../../resources/DemoProps.js';
+import { complexDataSet, simpleDataSet, tooltipConfig } from '../../resources/DemoProps.js';
 import { RadarChart } from './RadarChart.js';
 
 const meta = {
@@ -93,3 +93,7 @@ export const LoadingPlaceholder: Story = {
     dataset: []
   }
 };
+
+export const WithCustomTooltipConfig: Story = {
+  args: tooltipConfig
+};
diff --git a/packages/charts/src/components/ScatterChart/ScatterChart.mdx b/packages/charts/src/components/ScatterChart/ScatterChart.mdx
index 2fd3ca189b1..e7f02b93347 100644
--- a/packages/charts/src/components/ScatterChart/ScatterChart.mdx
+++ b/packages/charts/src/components/ScatterChart/ScatterChart.mdx
@@ -1,5 +1,6 @@
 import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs';
+import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './ScatterChart.stories';
 
 <Meta of={ComponentStories} />
@@ -27,4 +28,6 @@ import * as ComponentStories from './ScatterChart.stories';
 
 <Canvas of={ComponentStories.LoadingPlaceholder} />
 
+<TooltipStory of={ComponentStories.WithCustomTooltipConfig} />
+
 <Footer />
diff --git a/packages/charts/src/components/ScatterChart/ScatterChart.stories.tsx b/packages/charts/src/components/ScatterChart/ScatterChart.stories.tsx
index ea5c54e7076..33fb3365dad 100644
--- a/packages/charts/src/components/ScatterChart/ScatterChart.stories.tsx
+++ b/packages/charts/src/components/ScatterChart/ScatterChart.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { scatterColorDataSet, scatterComplexDataSet } from '../../resources/DemoProps.js';
+import { scatterColorDataSet, scatterComplexDataSet, tooltipConfig } from '../../resources/DemoProps.js';
 import { ScatterChart } from './ScatterChart.js';
 
 const meta = {
@@ -64,3 +64,7 @@ export const LoadingPlaceholder: Story = {
     dataset: []
   }
 };
+
+export const WithCustomTooltipConfig: Story = {
+  args: tooltipConfig
+};
diff --git a/packages/charts/src/resources/DemoProps.ts b/packages/charts/src/resources/DemoProps.ts
index ad2b41ab6d6..a995922aa9e 100644
--- a/packages/charts/src/resources/DemoProps.ts
+++ b/packages/charts/src/resources/DemoProps.ts
@@ -1,3 +1,47 @@
+import type { IChartBaseProps } from '@/interfaces/IChartBaseProps.js';
+
+export const tooltipConfig: IChartBaseProps = {
+  tooltipConfig: {
+    wrapperStyle: {
+      border: '5px solid',
+      borderImage: 'linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet) 1',
+      padding: '5px',
+      borderRadius: '8px'
+    },
+    itemStyle: {
+      boxShadow: '0 10px 30px rgba(0, 0, 0, 0.15)',
+      backgroundColor: 'white',
+      borderRadius: '8px',
+      padding: '10px',
+      marginBlockStart: '2px'
+    },
+    contentStyle: {
+      background: 'black'
+    },
+    labelStyle: {
+      fontFamily: 'var(--sapFontBoldFamily)',
+      color: 'white'
+    },
+    cursor: { stroke: 'red', strokeWidth: 2, fill: 'transparent' },
+    separator: ':~:',
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    formatter: (value, name, props) => {
+      if (name === 'Users') {
+        return [`${value}👨‍💻`, 'Custom Name in Tooltip!'];
+      }
+      return `${value}k`;
+    },
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    labelFormatter: (label, payload) => {
+      return `${label}🗓️`;
+    },
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    itemSorter: (item) => {
+      return -1;
+    }
+  }
+};
+
 export const singleData = [
   {
     name: 'January',
diff --git a/packages/charts/src/resources/TooltipConfig.mdx b/packages/charts/src/resources/TooltipConfig.mdx
new file mode 100644
index 00000000000..2d1052c8b2a
--- /dev/null
+++ b/packages/charts/src/resources/TooltipConfig.mdx
@@ -0,0 +1,53 @@
+import { Canvas } from '@storybook/addon-docs';
+
+### With Custom Tooltip Config
+
+Via the `tooltipConfig` prop you can override the configuration object for the internally used `recharts` Tooltip popover that is displayed when hovering over data points.
+You can find all possible configuration properties [here](https://recharts.org/en-US/api/Tooltip).
+
+<Canvas of={props.of} />
+
+<details>
+
+<summary>Show example `tooltipConfig`</summary>
+
+```js
+tooltipConfig: {
+  wrapperStyle: {
+    border: '5px solid',
+    borderImage: 'linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet) 1',
+    padding: '5px',
+    borderRadius: '8px'
+  },
+  itemStyle: {
+    boxShadow: '0 10px 30px rgba(0, 0, 0, 0.15)',
+    backgroundColor: 'white',
+    borderRadius: '8px',
+    padding: '10px',
+    marginBlockStart: '2px'
+  },
+  contentStyle: {
+    background: 'black'
+  },
+  labelStyle: {
+    fontFamily: 'var(--sapFontBoldFamily)',
+    color: 'white'
+  },
+  cursor: { stroke: 'red', strokeWidth: 2, fill: 'transparent' },
+  separator: ':~:',
+  formatter: (value, name, props) => {
+    if (name === 'Users') {
+      return [`${value}👨‍💻`, 'Custom Name in Tooltip!'];
+    }
+    return `${value}k`;
+  },
+  labelFormatter: (label, payload) => {
+    return `${label}🗓️`;
+  },
+  itemSorter: (item) => {
+    return -1;
+  }
+}
+```
+
+</details>