richardfogaca opened a new pull request, #36077:
URL: https://github.com/apache/superset/pull/36077
### SUMMARY
Fixes legend cutoff issue in ECharts-based visualizations when using
"List" legend type with Top or Bottom orientation.
**Problem:**
When switching from "Scroll" to "List" (previously labeled "Plain") legend
mode in charts with Y-axis labels (e.g., Bar, Line, Area charts), legend items
would wrap and get cut off on the left side. This occurred because:
- The chart grid applied left padding to account for Y-axis labels (e.g.,
20-35px)
- The legend positioned itself at the container's left edge (0px)
- This misalignment caused legend text to extend beyond the visible chart
area when wrapping
**Solution:**
1. **Fixed legend positioning** (`series.ts`): Apply left padding to
legends with Top and Bottom orientations to align them with the chart
grid's left edge
2. **Updated control label** (`controls.tsx`): Changed legend type from
"Plain" to "List" for clearer nomenclature
This fix automatically applies to all ECharts-based chart types that use
Y-axis padding (Bar, Line, Area, Timeseries, Mixed Timeseries, etc.).
### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
**BEFORE:** Legend items in "Plain" mode are cut off on the left when
wrapping
<img width="636" height="257" alt="image (4)"
src="https://github.com/user-attachments/assets/e22718f5-e199-4b63-a29f-ef59d1effea9";
/>
**AFTER:** Legend items properly align with chart grid and wrap without
being cut off
<img width="530" height="171" alt="Screenshot 2025-11-11 at 21 24 22"
src="https://github.com/user-attachments/assets/44dc18a6-7a69-4bca-a465-3e092c4c6071";
/>
### TESTING INSTRUCTIONS
1. Create a Bar Chart with multiple series
2. Set legend orientation to "Top" or "Bottom"
3. Switch legend type from "Scroll" to "List"
4. Verify that legend items align with the left edge of the chart grid
(not the container edge)
5. Verify that wrapped legend items are fully visible and not cut off
6. Test with different Y-axis configurations:
- With Y-axis title enabled/disabled
- With different Y-axis title positions (Left/Top)
7. Repeat tests with other chart types: Line Chart, Area Chart, Mixed Chart
### ADDITIONAL INFORMATION
- [x] Changes UI
- [ ] Has associated issue:
- [ ] Required feature flags:
- [ ] Includes DB Migration
- [ ] Introduces new feature or API
- [ ] Removes existing feature or API
--
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]
