Mark-Onopchenko opened a new issue, #45490: URL: https://github.com/apache/superset/issues/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. <img width="1880" height="980" alt="Image" src="https://github.com/user-attachments/assets/14da274c-61f9-4c16-8eb6-42c9b26c5931"; /> 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. <img width="1880" height="980" alt="Image" src="https://github.com/user-attachments/assets/24fa90bd-c6ed-4d12-a6bb-636bda75166e"; /> 3. **Type: List | Orientation: Top (HTML legend since #43314), for comparison** No overlap: the plot shrinks to make room. <img width="1880" height="980" alt="Image" src="https://github.com/user-attachments/assets/125bf9df-be7f-4894-aa6a-61e87e0f650a"; /> 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. <img width="1880" height="980" alt="Image" src="https://github.com/user-attachments/assets/d34be0fb-cd1e-46bc-8469-6ee0c2f9f725"; /> ## 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.** #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 #28173). Every legend change has to be made twice: open PR #45172 (hide the All/Inv buttons) changes both. The canvas legend's layout estimate has also needed repeated fixes: #32030, #36306 (which caused #39540), #38675, #41749, and #44367 (for #37286). Superset version: master / latest-dev (56ff892038). 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 #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 #43314.** Left/right legends become an HTML column with a bounded size and their own scroll region. As with #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 #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 #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 #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) -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
