From 1ff8100b2c1d4ddc75279bd656627fcb23e7cdbc Mon Sep 17 00:00:00 2001
From: blaisadmin <corey@blaishome.online>
Date: Sat, 18 Apr 2026 18:23:44 -0400
Subject: [PATCH] visual chart label

---
 frontend/src/App.tsx   | 27 ++++++++++++++++++++++++++-
 frontend/src/index.css | 19 +++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 7c04843..adef3d3 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -3217,7 +3217,32 @@ function App() {
                     <span className="legend-swatch" style={{ background: bird.chartColor }} />
                     <div>
                       <strong>{bird.name}</strong>
-                      {hasHistoricalData ? <span>Solid current, dashed previous year</span> : null}
+                      {hasHistoricalData ? (
+                        <div className="legend-line-key" aria-label="Solid line is current data. Dashed line is previous-year data.">
+                          <span>
+                            <svg viewBox="0 0 44 8" aria-hidden="true" focusable="false">
+                              <line x1="2" y1="4" x2="42" y2="4" stroke={bird.chartColor} strokeWidth="3" strokeLinecap="round" />
+                            </svg>
+                            Current
+                          </span>
+                          <span>
+                            <svg viewBox="0 0 44 8" aria-hidden="true" focusable="false">
+                              <line
+                                x1="2"
+                                y1="4"
+                                x2="42"
+                                y2="4"
+                                stroke={bird.chartColor}
+                                strokeWidth="3"
+                                strokeLinecap="round"
+                                strokeDasharray="7 6"
+                                opacity="0.48"
+                              />
+                            </svg>
+                            Previous year
+                          </span>
+                        </div>
+                      ) : null}
                     </div>
                   </article>
                 );
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 9ef736b..e9034a9 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1023,6 +1023,25 @@ textarea {
   font-size: 0.85rem;
 }
 
+.legend-line-key {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem 0.75rem;
+  align-items: center;
+}
+
+.legend-line-key span {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.legend-line-key svg {
+  width: 44px;
+  height: 8px;
+  flex: 0 0 auto;
+}
+
 .legend-swatch {
   width: 14px;
   height: 14px;