From 2c9b7ca135bbb03f116d0cfcedd68dcb482666d2 Mon Sep 17 00:00:00 2001
From: Paul Marbach <paul.marbach@grafana.com>
Date: Wed, 17 Dec 2025 17:32:50 -0500
Subject: [PATCH] hide glow at small angles

---
 .../components/RadialGauge/RadialArcPath.tsx  | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/grafana-ui/src/components/RadialGauge/RadialArcPath.tsx b/packages/grafana-ui/src/components/RadialGauge/RadialArcPath.tsx
index c648022d864..59be60f27da 100644
--- a/packages/grafana-ui/src/components/RadialGauge/RadialArcPath.tsx
+++ b/packages/grafana-ui/src/components/RadialGauge/RadialArcPath.tsx
@@ -30,7 +30,7 @@ interface RadialArcPathPropsWithGuideDot extends RadialArcPathPropsBase {
 
 type RadialArcPathProps = RadialArcPathPropsBase | RadialArcPathPropsWithGuideDot;
 
-const DOT_START_MIN_ANGLE_DEG = 5;
+const ENDPOINT_MARKER_MIN_ANGLE = 10;
 const DOT_OPACITY = 0.5;
 const DOT_RADIUS_FACTOR = 0.4;
 const MAX_DOT_RADIUS = 8;
@@ -85,7 +85,7 @@ export const RadialArcPath = memo(
           const [pointColorStart, pointColorEnd] = getEndpointMarkerColors(gradientStops, fieldDisplay.display.percent);
           endpointMarks = (
             <>
-              {arcLengthDeg > DOT_START_MIN_ANGLE_DEG && (
+              {arcLengthDeg > ENDPOINT_MARKER_MIN_ANGLE && (
                 <circle cx={xStart} cy={yStart} r={dotRadius} fill={pointColorStart} opacity={DOT_OPACITY} />
               )}
               <circle cx={xEnd} cy={yEnd} r={dotRadius} fill={pointColorEnd} opacity={DOT_OPACITY} />
@@ -93,18 +93,20 @@ export const RadialArcPath = memo(
           );
           break;
         case 'glow':
-          const xStartMark = centerX + radius * Math.cos(endRadians - 0.2);
-          const yStartMark = centerY + radius * Math.sin(endRadians - 0.2);
-          endpointMarks = (
-            <path
-              d={['M', xStartMark, yStartMark, 'A', radius, radius, 0, 0, 1, xEnd, yEnd].join(' ')}
-              fill="none"
-              strokeWidth={barWidth}
-              stroke={endpointMarkerGlowFilter}
-              strokeLinecap={roundedBars ? 'round' : 'butt'}
-              filter={glowFilter}
-            />
-          );
+          const offsetAngle = toRad(ENDPOINT_MARKER_MIN_ANGLE);
+          const xStartMark = centerX + radius * Math.cos(endRadians + offsetAngle);
+          const yStartMark = centerY + radius * Math.sin(endRadians + offsetAngle);
+          endpointMarks =
+            arcLengthDeg > ENDPOINT_MARKER_MIN_ANGLE ? (
+              <path
+                d={['M', xStartMark, yStartMark, 'A', radius, radius, 0, 0, 1, xEnd, yEnd].join(' ')}
+                fill="none"
+                strokeWidth={barWidth}
+                stroke={endpointMarkerGlowFilter}
+                strokeLinecap={roundedBars ? 'round' : 'butt'}
+                filter={glowFilter}
+              />
+            ) : null;
           break;
         default:
           break;