feat(explore-suspect-attrs): Hiding long x-axis labels (#95265)

We can have really long labels even after hideOverlap is set to true. If
we have any labels are are exceeding the bounds of the container, we
don't want to show any of of the x-axis labels. The user is expected to
learn about the values from the tooltip.

Hidden labels: 
<img width="725" height="200" alt="Screenshot 2025-07-10 at 2 04 10 PM"
src="https://github.com/user-attachments/assets/e4908548-fbd0-4f6f-964a-294179f52548"
/>

Shown labels:
<img width="386" height="203" alt="Screenshot 2025-07-10 at 2 04 03 PM"
src="https://github.com/user-attachments/assets/f52af94b-9692-4c19-aad1-13b2ad71ca23"
/>

---------

Co-authored-by: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>

Author: Abdkhan14

static/app/views/explore/components/suspectTags/charts.tsx

@@ -1,11 +1,18 @@
+import {useLayoutEffect, useRef, useState} from 'react';
 import type {Theme} from '@emotion/react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import BaseChart from 'sentry/components/charts/baseChart';
 import {space} from 'sentry/styles/space';
+import type {ReactEchartsRef} from 'sentry/types/echarts';
 import type {SuspectAttributesResult} from 'sentry/views/explore/hooks/useSuspectAttributes';
 
+const MAX_BAR_WIDTH = 20;
+
+const SELECTED_SERIES_NAME = 'selected';
+const BASELINE_SERIES_NAME = 'baseline';
+
 type Props = {
   rankedAttributes: SuspectAttributesResult['rankedAttributes'];
 };
@@ -29,13 +36,36 @@ function Chart({
   attribute: SuspectAttributesResult['rankedAttributes'][number];
   theme: Theme;
 }) {
+  const chartRef = useRef<ReactEchartsRef>(null);
+  const [hideLabels, setHideLabels] = useState(false);
+
   const cohort1Color = theme.chart.getColorPalette(0)?.[0];
   const cohort2Color = '#dddddd';
 
+  useLayoutEffect(() => {
+    const chartContainer = chartRef.current?.getEchartsInstance().getDom();
+    if (!chartContainer) return;
+
+    const labels = chartContainer.querySelectorAll('.echarts-for-react text');
+
+    for (const label of labels) {
+      const labelRect = (label as SVGGraphicsElement).getBoundingClientRect();
+      const containerRect = chartContainer.getBoundingClientRect();
+
+      // If there are any labels exceeding the boundaries of the chart container, we hide
+      // hide all labels.
+      if (labelRect.left < containerRect.left || labelRect.right > containerRect.right) {
+        setHideLabels(true);
+        break;
+      }
+    }
+  }, [attribute]);
+
   return (
     <ChartWrapper>
       <ChartTitle>{attribute.attributeName}</ChartTitle>
       <BaseChart
+        ref={chartRef}
         autoHeightResize
         isGroupedByDate={false}
         tooltip={{
@@ -52,14 +82,16 @@ function Chart({
           type: 'category',
           data: attribute.cohort1.map(cohort => cohort.label),
           truncate: 14,
-          axisLabel: {
-            hideOverlap: true,
-            showMaxLabel: false,
-            showMinLabel: false,
-            color: '#000',
-            interval: 0,
-            formatter: (value: string) => value,
-          },
+          axisLabel: hideLabels
+            ? {show: false}
+            : {
+                hideOverlap: true,
+                showMaxLabel: false,
+                showMinLabel: false,
+                color: '#000',
+                interval: 0,
+                formatter: (value: string) => value,
+              },
         }}
         yAxis={{
           type: 'value',
@@ -72,18 +104,22 @@ function Chart({
           {
             type: 'bar',
             data: attribute.cohort1.map(cohort => cohort.value),
-            name: 'Selected',
+            name: SELECTED_SERIES_NAME,
             itemStyle: {
               color: cohort1Color,
             },
+            barMaxWidth: MAX_BAR_WIDTH,
+            animation: false,
           },
           {
             type: 'bar',
             data: attribute.cohort2.map(cohort => cohort.value),
-            name: 'Baseline',
+            name: BASELINE_SERIES_NAME,
             itemStyle: {
               color: cohort2Color,
             },
+            barMaxWidth: MAX_BAR_WIDTH,
+            animation: false,
           },
         ]}
       />