From bb471cb8a51002fc1c5003dbb3dda75e12bff28b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Fri, 31 Oct 2025 18:20:22 +0100
Subject: [PATCH] Bar chart: Prevent left tick labels to overlap on label
 (#15499)

Prevent left tick labels to overlap on label by truncating the tick
label
---
 .../constants/BarChartMargins.ts              |  2 +-
 .../utils/getBarChartAxisConfigs.ts           | 27 ++++++++++++-------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMargins.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMargins.ts
index a9505be2442..e5dd5c48061 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMargins.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMargins.ts
@@ -2,5 +2,5 @@ export const BAR_CHART_MARGINS = {
   top: 20,
   right: 20,
   bottom: 60,
-  left: 70,
+  left: 80,
 } as const;
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartAxisConfigs.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartAxisConfigs.ts
index 7897df8ffca..8aa18ae5f5e 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartAxisConfigs.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartAxisConfigs.ts
@@ -10,7 +10,10 @@ import {
 
 const AVERAGE_CHARACTER_WIDTH_RATIO = 0.6;
 const MIN_TICK_LABEL_LENGTH = 5;
-const MAX_LEFT_AXIS_LABEL_LENGTH = 20;
+const MAX_LEFT_AXIS_LABEL_LENGTH = 10;
+const LEFT_AXIS_LEGEND_OFFSET_PADDING = 5;
+const TICK_PADDING = 5;
+const BOTTOM_AXIS_LEGEND_OFFSET = 40;
 
 type GetBarChartAxisConfigsProps = {
   width: number;
@@ -64,24 +67,28 @@ export const getBarChartAxisConfigs = ({
     return {
       axisBottom: {
         tickSize: 0,
-        tickPadding: 5,
+        tickPadding: TICK_PADDING,
         tickRotation: 0,
         tickValues: categoryTickValues,
         legend: xAxisLabel,
         legendPosition: 'middle' as const,
-        legendOffset: 40,
+        legendOffset: BOTTOM_AXIS_LEGEND_OFFSET,
         format: (value: string | number) =>
           truncateTickLabel(String(value), maxLabelLength),
       },
       axisLeft: {
         tickSize: 0,
-        tickPadding: 5,
+        tickPadding: TICK_PADDING,
         tickRotation: 0,
         tickValues: numberOfValueTicks,
         legend: yAxisLabel,
         legendPosition: 'middle' as const,
-        legendOffset: -50,
-        format: (value: number) => formatGraphValue(value, formatOptions || {}),
+        legendOffset: -BAR_CHART_MARGINS.left + LEFT_AXIS_LEGEND_OFFSET_PADDING,
+        format: (value: number) =>
+          truncateTickLabel(
+            formatGraphValue(value, formatOptions ?? {}),
+            MAX_LEFT_AXIS_LABEL_LENGTH,
+          ),
       },
     };
   }
@@ -89,22 +96,22 @@ export const getBarChartAxisConfigs = ({
   return {
     axisBottom: {
       tickSize: 0,
-      tickPadding: 5,
+      tickPadding: TICK_PADDING,
       tickRotation: 0,
       tickValues: numberOfValueTicks,
       legend: yAxisLabel,
       legendPosition: 'middle' as const,
-      legendOffset: 40,
+      legendOffset: BOTTOM_AXIS_LEGEND_OFFSET,
       format: (value: number) => formatGraphValue(value, formatOptions || {}),
     },
     axisLeft: {
       tickSize: 0,
-      tickPadding: 5,
+      tickPadding: TICK_PADDING,
       tickRotation: 0,
       tickValues: categoryTickValues,
       legend: xAxisLabel,
       legendPosition: 'middle' as const,
-      legendOffset: -50,
+      legendOffset: -BAR_CHART_MARGINS.left + LEFT_AXIS_LEGEND_OFFSET_PADDING,
       format: (value: string | number) =>
         truncateTickLabel(String(value), MAX_LEFT_AXIS_LABEL_LENGTH),
     },