Timeseries: Left/Right List legends overflow the plot - Render every Timeseries legend as HTML #45490

Screenshot

1. Type: List | Orientation: Right
   The legend wraps into three columns. The first column is drawn over the plot and covers the "2015" axis label.

2. Type: List | Orientation: Left
   The third column covers the y-axis labels and the plot, and the All/Inv buttons are clipped at the top.

3. Type: List | Orientation: Top (HTML legend since fix(echarts): render Plain Timeseries legends as HTML, not canvas #43314), for comparison
   No overlap: the plot shrinks to make room.

4. Type: Scroll | Orientation: Top (the default)
   Still the canvas legend: "Inv" instead of "Inverse", line-and-circle icons instead of squares, and the last
   entry is cut off mid-word.

Description

Since #43314, a Timeseries chart (Line, Bar, Area, Scatter, Smooth Line, Stepped Line, Time-series) draws its legend in one of two ways:

1. Type: List | Orientation: Top/Bottom
   An HTML legend (TimeseriesLegend) next to the chart, in its own bounded, scrollable area. It cannot overlap the plot.
2. Everything else, including the default (Scroll + Top)
   The ECharts canvas legend, drawn inside the chart in space reserved by an estimate.

This causes two problems:

1. Left/Right List legends can overflow the plot.
   fix(echarts): render Plain Timeseries legends as HTML, not canvas #43314 has this as a latent issue: getVerticalPlainLegendLayout() sizes the side margin from the
   longest label, not from the number of items.

Steps to reproduce:

1. Create a Line Chart on the birth_names example dataset: X-axis ds, metric sum__num, Dimensions name, Series limit 50.
2. In Customize > Legend, set Type to List and Orientation to Right.
3. The legend wraps into extra columns that are drawn over the plot. The same happens with Orientation Left, where the legend also covers the y-axis labels.

Expected: the legend stays in its own area, as Top/Bottom List legends do since #43314.

2. Two legend implementations in one chart.
   They look and behave differently (compare the last two screenshots), and only the HTML one is reachable by keyboard and screen reader (ECharts ARIA is off by default, see Echarts native support for accessibility #28173). Every legend change has to be made twice: open PR feat(plugin-chart-echarts): let users hide legend All/Invert buttons #45172 (hide the All/Inv buttons) changes both. The canvas legend's layout estimate has also needed repeated fixes: chore(timeseries charts): adjust legend width by padding #32030, fix(echarts): use scroll legend for horizontal layouts to prevent overlap #36306 (which caused Legend type setting has no effect on charts of version 6.1.0rc2 #39540), fix(echarts): prevent plain legend clipping in dashboards #38675, fix(explore): honor explicit List legend selection instead of flipping to scroll #41749, and fix(echarts): stop the zoom controls overlapping the legend selector #44367 (for Zoom Data control doesn't fit into the panel #37286).

Superset version: master / latest-dev (56ff892). Browser: Chrome.

The screenshots are from the Timeseries chart plugin rendered in Storybook on that commit, at 900x450px with 50 series, so the backend is not involved.

Design input

Proposal: Extend #43314 so every Timeseries legend is HTML, whatever its type and orientation.

• Scroll, Top/Bottom: one row with previous/next arrows and a page counter, which is what Scroll means today.
• Left/Right, both types: a column beside the plot, sized from the Margin control or capped at 40% of the chart width. Long labels are truncated and shown in full on hover.
• List, Top/Bottom: unchanged from fix(echarts): render Plain Timeseries legends as HTML, not canvas #43314.

ECharts keeps a hidden legend that the HTML legend drives through dispatchAction, as #43314 already does. Toggling, double-click isolation, All/Inverse, hover highlighting, sorting, and the remembered legend page keep working.

These changes will:

1. Fix the latent vertical-legend overlap from fix(echarts): render Plain Timeseries legends as HTML, not canvas #43314.
   Left/right legends become an HTML column with a bounded size and their own scroll region. As with fix(echarts): render Plain Timeseries legends as HTML, not canvas #43314's top/bottom fix, a tall legend can no longer extend over the plot.
2. Deduplicate two different legend implementations inside one chart plugin.
   Today a Timeseries chart has two legends with different looks, behaviour, and accessibility, depending on two dropdowns. After this change there will be one.
3. Simplify further legend features development (corollary of Fix documentation #2)
   Moving forward, each legend feature will only need building once, as opposed to having 2 separate implementations (one canvas and other HTML). For instance, we plan series grouping (Discussion Feature request: union of several lines into one #24233) as a follow-up on top of this.)

Out of scope

• New controls
• Form data changes
• Backend changes
• Other chart types (Mixed Timeseries, Pie, Funnel, ...)

Questions for maintainers

1. Default charts (Scroll + Top) would switch from the canvas legend to the
   HTML look that List legends already have. Is that visual change OK?
2. Should this land before or after feat(plugin-chart-echarts): let users hide legend All/Invert buttons #45172?
3. Is an issue and a PR enough here, or would you like a SIP?

We're a student team ("D01 Wizards", CSCD01 at the University of Toronto) and would like to implement this. We'll open a PR once there is agreement on the approach.

Thank you very much for your consideration.

cc @sadpandajoe (author of #43314)