From c82f3b15fa0d940ea8bc094294c34741e35176e9 Mon Sep 17 00:00:00 2001
From: fsd-niraj <develop.niraj@gmail.com>
Date: Sat, 26 Oct 2024 22:36:16 -0400
Subject: [PATCH] added a function that determines "dx" and "dy" parameters of
 the bar label.

---
 .../@mantine/charts/src/BarChart/BarChart.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/@mantine/charts/src/BarChart/BarChart.tsx b/packages/@mantine/charts/src/BarChart/BarChart.tsx
index a06b2a47848..fff6ebf4fe1 100644
--- a/packages/@mantine/charts/src/BarChart/BarChart.tsx
+++ b/packages/@mantine/charts/src/BarChart/BarChart.tsx
@@ -130,10 +130,21 @@ export function BarLabel({
   parentViewBox,
   ...others
 }: Record<string, any>) {
+  function labelCoordinates(): { dx: number; dy: number } {
+    return {
+      dx:
+        others.props.h < 300
+          ? Math.ceil(others?.width + 10)
+          : Math.ceil(others?.width - others?.viewBox?.x / 2),
+      dy: Math.ceil(others.props.h / 15),
+    };
+  }
+
   return (
     <text
       {...others}
-      dy={-10}
+      dy={labelCoordinates().dy}
+      dx={labelCoordinates().dx}
       fontSize={12}
       fill="var(--chart-text-color, var(--mantine-color-dimmed))"
       textAnchor="center"
@@ -260,7 +271,11 @@ export const BarChart = factory<BarChartFactory>((_props, ref) => {
         fillOpacity={dimmed ? 0.1 : fillOpacity}
         strokeOpacity={dimmed ? 0.2 : 0}
         stackId={stacked ? 'stack' : item.stackId || undefined}
-        label={withBarValueLabel ? <BarLabel valueFormatter={valueFormatter} /> : undefined}
+        label={
+          withBarValueLabel ? (
+            <BarLabel valueFormatter={valueFormatter} props={_props} />
+          ) : undefined
+        }
         yAxisId={item.yAxisId || 'left'}
         minPointSize={minBarSize}
         {...(typeof barProps === 'function' ? barProps(item) : barProps)}