From 1ddd3b67865e520d4d45dd0b4c9948e6ffb331cf Mon Sep 17 00:00:00 2001
From: Anders Hafreager <anders.hafreager@cognite.com>
Date: Sat, 15 Aug 2026 21:50:02 +0200
Subject: [PATCH 1/2] fix: chart legend shows series names when not hovering

The dygraphs legendFormatter returned an empty string whenever no point
was hovered, so the always-on legend rendered as an empty box. Series
names and color dots now stay visible; hover adds the values.

Fixes #407

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/Figure.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/Figure.tsx b/src/components/Figure.tsx
index 85036745..ae3b5791 100644
--- a/src/components/Figure.tsx
+++ b/src/components/Figure.tsx
@@ -150,9 +150,9 @@ export const FigureGraph = ({
           "#722ed1",
         ],
         legendFormatter: function (data) {
-          if (data.x == null) {
-            return "";
-          }
+          // Without a hovered point (data.x == null) still list the series
+          // names and colors — an empty legend box reads as a bug.
+          const hovering = data.x != null;
           let html = '<div class="dygraph-custom-legend">';
           data.series.forEach(function (series) {
             if (!series.isVisible) return;
@@ -161,7 +161,11 @@ export const FigureGraph = ({
               '<span class="dygraph-legend-dot" style="color: ' +
               color +
               ';">● </span>';
-            html += series.labelHTML + ": " + series.yHTML + "<br/>";
+            html += series.labelHTML;
+            if (hovering) {
+              html += ": " + series.yHTML;
+            }
+            html += "<br/>";
           });
           html += "</div>";
           return html;

From 54cde07ab31e7a7d46f8b7f612bf4aaab0a201ca Mon Sep 17 00:00:00 2001
From: Anders Hafreager <anders.hafreager@cognite.com>
Date: Sat, 15 Aug 2026 22:12:04 +0200
Subject: [PATCH 2/2] style: cap the always-visible legend footprint

Review fix: the library default is a fixed 250px-wide legend with no
height cap, which an always-on legend would let cover small charts
(RunAnalysis figures go down to 320px). Shrink to content, cap at 45%
of the chart, drop the double padding/background, and pass pointer
events through to the plot.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/index.css | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/index.css b/src/index.css
index 6f6dafc9..efdaec7f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -425,14 +425,22 @@ body,
   color: #fff !important;
   border: 1px solid #333 !important;
   border-radius: 4px !important;
-  padding: 8px !important;
+  padding: 6px 8px !important;
+  /* The legend is always visible now: shrink to content (the library
+     default is a fixed 250px), cap its footprint on small charts, and
+     never intercept pointer events meant for the plot beneath it. */
+  width: auto !important;
+  max-width: 45% !important;
+  max-height: 45% !important;
+  overflow: hidden !important;
+  font-size: 11px !important;
+  line-height: 1.5 !important;
+  pointer-events: none !important;
 }
 
 .dygraph-custom-legend {
-  background: rgba(0, 0, 0, 0.8);
-  padding: 8px;
-  border-radius: 4px;
   color: #fff;
+  white-space: nowrap;
 }
 
 .dygraph-legend-dot {