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