visual chart label

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>
                 );

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;