withBarValueLabel not displaying in correct positions in BarChart

#6991
mantinedev · Oct 22, 2024 · d4c46b4 · d4c46b4
1 parent 6a067f1
commit d4c46b4
Showing 1 changed file with 20 additions and 7 deletions.
diff --git a/packages/@mantine/charts/src/BarChart/BarChart.tsx b/packages/@mantine/charts/src/BarChart/BarChart.tsx
@@ -55,9 +55,9 @@ export type BarChartCssVariables = {
 
 export interface BarChartProps
   extends BoxProps,
-    GridChartBaseProps,
-    StylesApiProps<BarChartFactory>,
-    ElementProps<'div'> {
+  GridChartBaseProps,
+  StylesApiProps<BarChartFactory>,
+  ElementProps<'div'> {
   /** Data used to display chart. */
   data: Record<string, any>[];
 
@@ -81,8 +81,8 @@ export interface BarChartProps
 
   /** Props passed down to recharts `Bar` component */
   barProps?:
-    | ((series: BarChartSeries) => Partial<Omit<BarProps, 'ref'>>)
-    | Partial<Omit<BarProps, 'ref'>>;
+  | ((series: BarChartSeries) => Partial<Omit<BarProps, 'ref'>>)
+  | Partial<Omit<BarProps, 'ref'>>;
 
   /** Determines whether a label with bar value should be displayed on top of each bar, incompatible with `type="stacked"` and `type="percent"`, `false` by default */
   withBarValueLabel?: boolean;
@@ -130,10 +130,23 @@ export function BarLabel({
   parentViewBox,
   ...others
 }: Record<string, any>) {
+
+  function labelCoordinates(): { dx: number, dy: number } {
+    let coord: { dx: number, dy: number } = { dx: 0, dy: 0 }
+    if (others.props.h < 300) {
+      coord = { ...coord, dx: Math.ceil(others?.width + 10) }
+    } else {
+      coord.dx = Math.ceil(others?.width - others?.viewBox?.x / 2)
+    }
+    coord = { ...coord, dy: Math.ceil(others.props.h / 15) }
+    return coord;
+  }
+
   return (
     <text
       {...others}
-      dy={-10}
+      dx={labelCoordinates().dx}
+      dy={labelCoordinates().dy}
       fontSize={12}
       fill="var(--chart-text-color, var(--mantine-color-dimmed))"
       textAnchor="center"
@@ -260,7 +273,7 @@ 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)}