From 238bc56af412ca9ef2555dbf92b0e976036d0b60 Mon Sep 17 00:00:00 2001
From: ktx-vaidehi <134508096+ktx-vaidehi@users.noreply.github.com>
Date: Mon, 5 Jan 2026 15:02:35 +0530
Subject: [PATCH] fix: add axis label rotation and truncation options in
 latency insights dashboard (#9834)

### **PR Type**
Enhancement


___

### **Description**
- Add axis label rotation option

- Add axis label truncation width option


___



<details> <summary><h3> File Walkthrough</h3></summary>

<table><thead><tr><th></th><th align="left">Relevant
files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><table>
<tr>
  <td>
    <details>
<summary><strong>useLatencyInsightsDashboard.ts</strong><dd><code>Add
axis label rotation & truncation</code>&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></summary>
<hr>

web/src/composables/useLatencyInsightsDashboard.ts

<ul><li>Added <code>axis_label_rotate</code> property to chart
config<br> <li> Added <code>axis_label_truncate_width</code> property to
chart config</ul>


</details>


  </td>
<td><a
href="https://github.com/openobserve/openobserve/pull/9834/files#diff-960dec4a653d7c079157499a2473d0e87bd8b61463e1c3f633e7682ba763a4b1">+2/-0</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>
</table></td></tr></tr></tbody></table>

</details>

___
---
 web/src/composables/useLatencyInsightsDashboard.ts  | 2 ++
 web/src/utils/dashboard/convertDataIntoUnitValue.ts | 9 ++++++---
 web/src/utils/dashboard/convertSQLData.ts           | 1 +
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/src/composables/useLatencyInsightsDashboard.ts b/web/src/composables/useLatencyInsightsDashboard.ts
index 7e582c2eda..2c979b32aa 100644
--- a/web/src/composables/useLatencyInsightsDashboard.ts
+++ b/web/src/composables/useLatencyInsightsDashboard.ts
@@ -367,6 +367,8 @@ export function useLatencyInsightsDashboard() {
           label_option: {
             rotate: 45,
           },
+          axis_label_rotate: 30,
+          axis_label_truncate_width: 80,
           color: isComparisonMode ? {
             mode: "palette-classic-by-series",
             fixedColor: ["#ffc107", "#1976d2"],
diff --git a/web/src/utils/dashboard/convertDataIntoUnitValue.ts b/web/src/utils/dashboard/convertDataIntoUnitValue.ts
index b8faee7063..a4e05b9039 100644
--- a/web/src/utils/dashboard/convertDataIntoUnitValue.ts
+++ b/web/src/utils/dashboard/convertDataIntoUnitValue.ts
@@ -1824,8 +1824,11 @@ export const calculateRotatedLabelBottomSpace = (
     // Only add if totalNeeded exceeds a reasonable base (e.g., 40px)
     return Math.max(0, Math.ceil(totalNeededSpace - 40));
   } else {
-    // Without axis name, just add enough space for labels plus a margin
-    // verticalHeight already includes the diagonal extent
-    return Math.max(0, Math.ceil(verticalHeight - 15)); // Assuming ~15px is already available
+    // Without axis name, containLabel: true in grid config handles the space automatically
+    // for rotated labels. No additional bottom spacing is needed because:
+    // 1. containLabel: true makes ECharts automatically expand grid to fit labels
+    // 2. The grid.bottom value already provides base spacing
+    // 3. Adding extra space here causes unnecessary whitespace
+    return 10; // Let ECharts handle it with containLabel
   }
 };
diff --git a/web/src/utils/dashboard/convertSQLData.ts b/web/src/utils/dashboard/convertSQLData.ts
index 9cee2db2e4..2d9122b738 100644
--- a/web/src/utils/dashboard/convertSQLData.ts
+++ b/web/src/utils/dashboard/convertSQLData.ts
@@ -1068,6 +1068,7 @@ export const convertSQLData = async (
     },
     tooltip: {
       trigger: "axis",
+      confine: true,
       textStyle: {
         color: store.state.theme === "dark" ? "#fff" : "#000",
         fontSize: 12,