From 7fff8c823400cd795d0f89fbda70791cb7ef18a5 Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Thu, 8 Jan 2026 18:04:39 +0530
Subject: [PATCH] [Dashboards] Fix chart axis label behavior (#17011)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Axis labels now respect `axisNameDisplay` config when chart has no
data (previously always showed both) - fixed for bar and line charts
- Horizontal bar charts now correctly map axis settings to visual
positions:
    - "X axis" setting → bottom axis (value)
    - "Y axis" setting → left axis (category)

video QA



https://github.com/user-attachments/assets/5bf32294-9a5e-4aa6-b3fd-0d4e33608d14
---
 .../transformGroupByDataToBarChartData.ts     | 47 ++++++++++---------
 .../transformGroupByDataToLineChartData.ts    |  7 ---
 2 files changed, 24 insertions(+), 30 deletions(-)

diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/transformGroupByDataToBarChartData.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/transformGroupByDataToBarChartData.ts
index 4159416cfd..add9397d65 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/transformGroupByDataToBarChartData.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/transformGroupByDataToBarChartData.ts
@@ -95,35 +95,36 @@ export const transformGroupByDataToBarChartData = ({
   const queryResultGqlFieldName =
     getGroupByQueryResultGqlFieldName(objectMetadataItem);
   const rawResults = groupByData?.[queryResultGqlFieldName];
-  const hasNoData =
-    !isDefined(groupByData) ||
-    !isDefined(rawResults) ||
-    !Array.isArray(rawResults) ||
-    rawResults.length === 0;
-
-  const showXAxis =
-    hasNoData ||
-    configuration.axisNameDisplay === AxisNameDisplay.X ||
-    configuration.axisNameDisplay === AxisNameDisplay.BOTH;
-
-  const showYAxis =
-    hasNoData ||
-    configuration.axisNameDisplay === AxisNameDisplay.Y ||
-    configuration.axisNameDisplay === AxisNameDisplay.BOTH;
-
-  const xAxisLabel =
-    showXAxis && isDefined(groupByFieldX) ? groupByFieldX.label : undefined;
-
-  const yAxisLabel =
-    showYAxis && isDefined(aggregateField)
-      ? `${getAggregateOperationLabel(configuration.aggregateOperation)} of ${aggregateField.label}`
-      : undefined;
 
   const layout =
     configuration.layout === BarChartLayout.HORIZONTAL
       ? BarChartLayout.HORIZONTAL
       : BarChartLayout.VERTICAL;
 
+  const isHorizontal = layout === BarChartLayout.HORIZONTAL;
+
+  const showCategoryLabel = isHorizontal
+    ? configuration.axisNameDisplay === AxisNameDisplay.Y ||
+      configuration.axisNameDisplay === AxisNameDisplay.BOTH
+    : configuration.axisNameDisplay === AxisNameDisplay.X ||
+      configuration.axisNameDisplay === AxisNameDisplay.BOTH;
+
+  const showValueLabel = isHorizontal
+    ? configuration.axisNameDisplay === AxisNameDisplay.X ||
+      configuration.axisNameDisplay === AxisNameDisplay.BOTH
+    : configuration.axisNameDisplay === AxisNameDisplay.Y ||
+      configuration.axisNameDisplay === AxisNameDisplay.BOTH;
+
+  const xAxisLabel =
+    showCategoryLabel && isDefined(groupByFieldX)
+      ? groupByFieldX.label
+      : undefined;
+
+  const yAxisLabel =
+    showValueLabel && isDefined(aggregateField)
+      ? `${getAggregateOperationLabel(configuration.aggregateOperation)} of ${aggregateField.label}`
+      : undefined;
+
   if (!isDefined(groupByData)) {
     return {
       ...EMPTY_BAR_CHART_RESULT,
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/utils/transformGroupByDataToLineChartData.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/utils/transformGroupByDataToLineChartData.ts
index d16ba62fe8..88d40a5639 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/utils/transformGroupByDataToLineChartData.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/utils/transformGroupByDataToLineChartData.ts
@@ -82,19 +82,12 @@ export const transformGroupByDataToLineChartData = ({
   const queryResultGqlFieldName =
     getGroupByQueryResultGqlFieldName(objectMetadataItem);
   const rawResults = groupByData?.[queryResultGqlFieldName];
-  const hasNoData =
-    !isDefined(groupByData) ||
-    !isDefined(rawResults) ||
-    !Array.isArray(rawResults) ||
-    rawResults.length === 0;
 
   const showXAxis =
-    hasNoData ||
     configuration.axisNameDisplay === AxisNameDisplay.X ||
     configuration.axisNameDisplay === AxisNameDisplay.BOTH;
 
   const showYAxis =
-    hasNoData ||
     configuration.axisNameDisplay === AxisNameDisplay.Y ||
     configuration.axisNameDisplay === AxisNameDisplay.BOTH;