diff --git a/packages/@mantine/charts/src/ChartLegend/ChartLegend.tsx b/packages/@mantine/charts/src/ChartLegend/ChartLegend.tsx
index 7286bd6076..990bcb3053 100644
--- a/packages/@mantine/charts/src/ChartLegend/ChartLegend.tsx
+++ b/packages/@mantine/charts/src/ChartLegend/ChartLegend.tsx
@@ -13,8 +13,23 @@ import { ChartSeries } from '../types';
 import { getSeriesLabels } from '../utils';
 import classes from './ChartLegend.module.css';
 
+function updateChartLegendPayload(payload: Record<string, any>[]): Record<string, any>[] {
+  return payload.map((item) => {
+    const newDataKey = item.dataKey.split('.').pop();
+    return {
+      ...item,
+      dataKey: newDataKey,
+      payload: {
+        ...item.payload,
+        name: newDataKey,
+        dataKey: newDataKey,
+      },
+    };
+  });
+}
+
 export function getFilteredChartLegendPayload(payload: Record<string, any>[]) {
-  return payload.filter((item) => item.color !== 'none');
+  return updateChartLegendPayload(payload.filter((item) => item.color !== 'none'));
 }
 
 export type ChartLegendStylesNames = 'legendItem' | 'legendItemColor' | 'legendItemName' | 'legend';
diff --git a/packages/@mantine/charts/src/ChartTooltip/ChartTooltip.tsx b/packages/@mantine/charts/src/ChartTooltip/ChartTooltip.tsx
index 26d774b6bf..02c7e55a16 100644
--- a/packages/@mantine/charts/src/ChartTooltip/ChartTooltip.tsx
+++ b/packages/@mantine/charts/src/ChartTooltip/ChartTooltip.tsx
@@ -15,8 +15,20 @@ import { ChartSeries } from '../types';
 import { getSeriesLabels } from '../utils';
 import classes from './ChartTooltip.module.css';
 
+function updateChartTooltipPayload(payload: Record<string, any>[]): Record<string, any>[] {
+  return payload.map((item) => {
+    const newDataKey = item.name.split('.').pop();
+    return {
+      ...item,
+      name: newDataKey,
+    };
+  });
+}
+
 export function getFilteredChartTooltipPayload(payload: Record<string, any>[], segmentId?: string) {
-  const duplicatesFilter = payload.filter((item) => item.fill !== 'none' || !item.color);
+  const duplicatesFilter = updateChartTooltipPayload(
+    payload.filter((item) => item.fill !== 'none' || !item.color)
+  );
 
   if (!segmentId) {
     return duplicatesFilter;