diff --git a/src/components/graph/AreaChart/AreaChart.tsx b/src/components/graph/AreaChart/AreaChart.tsx
index 58d6339..3a5b694 100644
--- a/src/components/graph/AreaChart/AreaChart.tsx
+++ b/src/components/graph/AreaChart/AreaChart.tsx
@@ -13,6 +13,8 @@ const AreaChart: React.FC<AreaChartProps> = ({
   data,
   metrics,
   dimensions,
+  labelNames,    
+  dimensionsNames,
   className = "w-full h-80",
   colors = QualitativeColorPallete,
   margin = DefaultMargins,
@@ -44,10 +46,29 @@ const AreaChart: React.FC<AreaChartProps> = ({
             <Area type="monotone" key={index} dataKey={metric} stroke={colors[index % colors.length]} fillOpacity={1} fill={`url(#color${index})`} />
           ))}
 
+          {dimensionsNames.map((dimension, index) => (
+            <Tooltip
+              key={index}
+              contentStyle={{ backgroundColor: "#fff", border: "1px solid #ccc" }}
+              formatter={(value, name, entry) => {
+                const customDimensionName = dimensionsNames && dimensionsNames[index]
+                  ? dimensionsNames[index]
+                  : name;
+                  const typedEntry = entry as any;
+                const customLabelName = labelNames && labelNames[index]
+                  ? labelNames[index]
+                  : typedEntry[dimensionsNames[0]];
+
+                return [customDimensionName, customLabelName, value];
+              }}
+              labelFormatter={() => null}
+              separator=""
+              position={{ x: 0, y: 0 }}
+            />
+          ))}
         </RAreaChart>
       </ResponsiveContainer>
     </div>
   );
 };
-
-export default AreaChart;
+export default AreaChart;
\ No newline at end of file
diff --git a/src/components/graph/BarChart/BarChart.tsx b/src/components/graph/BarChart/BarChart.tsx
index e8a3819..9f3a655 100644
--- a/src/components/graph/BarChart/BarChart.tsx
+++ b/src/components/graph/BarChart/BarChart.tsx
@@ -8,6 +8,8 @@ const BarChart: React.FC<BarChartProps> = ({
   data,
   metrics,
   dimensions,
+  labelNames,
+  dimensionsNames,
   className = "w-full h-80",
   colors = QualitativeColorPallete,
   margin = DefaultMargins,
@@ -35,6 +37,26 @@ const BarChart: React.FC<BarChartProps> = ({
             <Bar dataKey={metric} key={index} fill={colors[index % colors.length]} />
           ))}
 
+{dimensionsNames.map((dimension, index) => (
+            <Tooltip
+              key={index}
+              contentStyle={{ backgroundColor: "#fff", border: "1px solid #ccc" }}
+              formatter={(value, name, entry) => {
+                const customDimensionName = dimensionsNames && dimensionsNames[index]
+                  ? dimensionsNames[index]
+                  : name;
+                  const typedEntry = entry as any;
+                const customLabelName = labelNames && labelNames[index]
+                  ? labelNames[index]
+                  : typedEntry[dimensionsNames[0]];
+                return [customDimensionName, customLabelName, value];
+              }}
+              labelFormatter={() => null}
+              separator=""
+              position={{ x: 0, y: 0 }}
+            />
+          ))}
+
         </RBarChart>
       </ResponsiveContainer>
     </div>
diff --git a/src/components/graph/BubbleChart/BubbleChart.tsx b/src/components/graph/BubbleChart/BubbleChart.tsx
index 0b48572..c7aecb9 100644
--- a/src/components/graph/BubbleChart/BubbleChart.tsx
+++ b/src/components/graph/BubbleChart/BubbleChart.tsx
@@ -8,6 +8,8 @@ const BubbleChart: React.FC<BubbleChartProps> = ({
   data,
   xKey: xDimension,
   yKey: yDimension,
+  labelNames,
+  dimensionsNames,
   dataKey = "",
   className = "w-full h-80",
   colors = QualitativeColorPallete,
@@ -56,7 +58,26 @@ const BubbleChart: React.FC<BubbleChartProps> = ({
           <Tooltip content={<FrolicTooltip />} />
           <Legend iconType="circle" />
           <Scatter name={dataKey} dataKey={dataKey} fill={colors[0 % colors.length]} />
+          {dimensionsNames.map((dimensionName, index) => (
+            <Tooltip
+              key={index}
+              contentStyle={{ backgroundColor: "#fff", border: "1px solid #ccc" }}
+              formatter={(value, name, entry) => {
+                const customDimensionName = dimensionsNames && dimensionsNames[index]
+                  ? dimensionsNames[index]
+                  : name;
+                  const typedEntry = entry as any;
+                const customLabelName = labelNames && labelNames[index]
+                  ? labelNames[index]
+                  : typedEntry[dataKey]; // Assuming the dataKey is used as the label
 
+                return [customDimensionName, customLabelName, value];
+              }}
+              labelFormatter={() => null}
+              separator=""
+              position={{ x: 0, y: 0 }}
+            />
+          ))}
         </RScatterChart>
       </ResponsiveContainer>
     </div>
diff --git a/src/components/graph/LineChart/LineChart.tsx b/src/components/graph/LineChart/LineChart.tsx
index ad3e85c..cad854e 100644
--- a/src/components/graph/LineChart/LineChart.tsx
+++ b/src/components/graph/LineChart/LineChart.tsx
@@ -8,6 +8,8 @@ const LineChart: React.FC<LineChartProps> = ({
   data,
   metrics,
   dimensions,
+  labelNames,
+  dimensionsNames,
   className = "w-full h-80",
   colors = QualitativeColorPallete,
   margin = DefaultMargins,
@@ -32,6 +34,27 @@ const LineChart: React.FC<LineChartProps> = ({
             </>
           ))}
 
+          {dimensionsNames.map((dimensionName, index) => (
+            <Tooltip
+              key={index}
+              contentStyle={{ backgroundColor: "#fff", border: "1px solid #ccc" }}
+              formatter={(value, name, entry) => {
+                const customDimensionName = dimensionsNames && dimensionsNames[index]
+                  ? dimensionsNames[index]
+                  : name;
+                  const typedEntry = entry as any;
+                const customLabelName = labelNames && labelNames[index]
+                  ? labelNames[index]
+                  : typedEntry[dimensions[0]]; // Assuming the first dimension is used as the label
+
+                return [customDimensionName, customLabelName, value];
+              }}
+              labelFormatter={() => null}
+              separator=""
+              position={{ x: 0, y: 0 }}
+            />
+          ))}
+
         </RLineChart>
       </ResponsiveContainer>
     </div>
diff --git a/src/components/graph/ScatterChart/ScatterChart.tsx b/src/components/graph/ScatterChart/ScatterChart.tsx
index 0ff226d..f2f84b8 100644
--- a/src/components/graph/ScatterChart/ScatterChart.tsx
+++ b/src/components/graph/ScatterChart/ScatterChart.tsx
@@ -8,6 +8,8 @@ const ScatterChart: React.FC<ScatterChartProps> = ({
   data,
   xKey: xDimension,
   yKey: yDimension,
+  labelNames,
+  dimensionsNames,
   dataKey = "",
   className = "w-full h-80",
   colors = QualitativeColorPallete,
@@ -28,7 +30,26 @@ const ScatterChart: React.FC<ScatterChartProps> = ({
           <Legend iconType="circle" />
 
           <Scatter name={dataKey} fill={colors[0 % colors.length]} />
+          {dimensionsNames.map((dimensionName, index) => (
+            <Tooltip
+              key={index}
+              contentStyle={{ backgroundColor: "#fff", border: "1px solid #ccc" }}
+              formatter={(value, name, entry)  => {
+                const customDimensionName = dimensionsNames && dimensionsNames[index]
+                  ? dimensionsNames[index]
+                  : name;
+                  const typedEntry = entry as any;
+                const customLabelName = labelNames && labelNames[index]
+                  ? labelNames[index]
+                  : typedEntry[dataKey];
 
+                return [customDimensionName, customLabelName, value];
+              }}
+              labelFormatter={() => null}
+              separator=""
+              position={{ x: 0, y: 0 }}
+            />
+          ))}
         </RScatterChart>
       </ResponsiveContainer>
     </div>
diff --git a/src/components/utils/AxisFormatter.tsx b/src/components/utils/AxisFormatter.tsx
index 9ffca75..79e3948 100644
--- a/src/components/utils/AxisFormatter.tsx
+++ b/src/components/utils/AxisFormatter.tsx
@@ -34,7 +34,7 @@ export const FrolicTooltip: React.FC<CustomTooltipProps> = ({ active, payload, l
                     </>
                 }
 
-                {payload.map((entry, index) => (
+                {payload.map((entry , index) => (
                     <div className='flex flex-row gap-1 items-center'>
                         <div className='w-1 h-4 rounded-sm' style={{ background: entry.color }}>
                         </div>
diff --git a/src/components/utils/ChartInterface.tsx b/src/components/utils/ChartInterface.tsx
index fd4dcdf..b0115ce 100644
--- a/src/components/utils/ChartInterface.tsx
+++ b/src/components/utils/ChartInterface.tsx
@@ -2,6 +2,8 @@ export interface ChartInterface {
     data: any[];
     dimensions: string[];
     metrics: string[];
+    labelNames: string[];
+    dimensionsNames: string[];
     className?: string;
     colors?: string[];
     margin?: Margin;
@@ -11,6 +13,8 @@ export interface ScatterChartInterface {
     data: any[];
     xKey: string;
     yKey: string;
+    labelNames: string[];
+    dimensionsNames: string[];
     dataKey?: string;
     className?: string;
     colors?: string[];