sadpandajoe opened a new pull request, #43144:
URL: https://github.com/apache/superset/pull/43144
## Summary
Bar chart value labels ("Show Value") currently use a fixed inside-edge
position with
no fit check. On narrow stacked segments and on non-stacked charts with many
thin
bars, the label text can be wider or taller than the bar, causing truncated,
overlapping, or unreadable labels.
This adds a fit-aware "Auto" default: for each bar (or stacked segment), the
label
stays inside the bar when it fits, and automatically moves just outside the
bar when
it doesn't. Auto also lets ECharts pick a theme-appropriate, contrast-aware
text
color for inside-positioned labels instead of a fixed color.
A new **Value label position** control (Bar charts only) exposes this
behavior plus
four manual overrides: Inside End, Outside End, Inside Center, Inside Base.
Existing
charts keep their current (Outside End-equivalent) placement unless a user
opts into
Auto or another manual position — no behavior change for Line, Area,
Scatter, Waterfall,
Gantt, BigNumber, or MixedTimeseries charts.
## Before / after
- Before: `label: { position: isHorizontal ? 'right' : 'top' }`
unconditionally, no
overflow handling.
- After: Auto measures the rendered label against the bar's width and height
and
flips outside only when needed; manual positions map to fixed ECharts label
positions with the existing theme text color.
## Testing
- Unit tests cover: Auto fit/overflow across vertical, horizontal, negative,
and
stacked bars; all four manual positions; the new control's
default/visibility; an
SSR-rendered assertion that overflowed labels correctly resolve ECharts'
theme-aware outside text color; and legacy/mixed-chart parity so this
change is
scoped to Bar charts only.
- Full `plugin-chart-echarts` suite passes (build, typecheck, lint, jest,
pre-commit).
## Testing instructions
1. Create or open a Bar chart, enable **Customize → Show Value**.
2. Use a mix of large and small values (or a stacked bar with a small
segment) so
some labels don't fit inside their bar.
3. Confirm labels that fit stay inside with readable contrast; labels that
don't fit
move just outside the bar.
4. Try the new **Value label position** control's manual options (Inside
End, Outside
End, Inside Center, Inside Base) and confirm each renders at a fixed
position.
--
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]
