fix(excel-html): chart overlays match Excel position and size#152
Open
dragonwhites wants to merge 3 commits into
Open
fix(excel-html): chart overlays match Excel position and size#152dragonwhites wants to merge 3 commits into
dragonwhites wants to merge 3 commits into
Conversation
… width Chart/shape/picture overlays are absolutely positioned into a per-anchor box on top of the sheet grid. Two issues kept charts from matching Excel: 1. Fill — the card was sized from its width alone (the inner SVG used height:auto), so the plot never grew into the height left below the title, leaving an empty gap under the chart. Make the card a flex column (height:100%) so the plot fills the box; for a left/right legend, shrink the plot viewBox to the real plot area so the meet-fit does not letterbox. 2. Width — the box summed whole spanned columns but dropped the partial-column EMU offset, and EstimateChartSize fell back to 48pt (64px) for default columns instead of the grid's ~44.27pt (59px), clamping the card ~one column narrower than Excel. Feed each chart its EstimateChartSize width (offset included, grid-aligned metric) as the overlay box width; shapes/pictures pass 0 and keep the column-sum. Validation: render a multi-chart .xlsx and compare to Excel — a 480px chart now renders ~444px ending mid-column-N (was clamped a column short), and every gallery chart aligns to its anchor row. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…eight Rows without an explicit height got no height attribute, so the grid let them shrink to content — empty rows rendered ~17px and 11pt data rows ~22px, while Excel renders default rows at 15pt (~20px). That distorts the grid vertically and drifts it out of step with the chart overlay's anchor math, which assumes the sheet default row height. Give every row the explicit-or-default height, and trim the cell's vertical padding (2px -> 1px) so default 11pt rows land on 15pt instead of overgrowing. Rows with an explicit/auto-fit height (rotated text, large fonts) keep their value via the existing RowHeights path. Validation: render any sheet — empty rows are now 20px (were 17px), data rows 20px (were 22px), and an absolutely-positioned chart's anchor row lines up with the matching grid row. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ow low .chart-container carried `margin: 16px auto` from an older in-flow layout. Charts are now absolutely positioned inside a per-anchor box, so that top margin pushed every visible card down ~16px — landing it at the bottom of its anchor row instead of the top — and made it overflow the box bottom. Set margin: 0 so the card sits exactly on its cell anchor. Validation: a chart anchored at row 3 now starts at row 3's top edge (was row 3's bottom) and ends on its bottom anchor row. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The HTML preview (
view <file> html) renders charts/shapes/pictures as absolutely-positioned overlays on the sheet grid. Comparing the output to Excel surfaced three position/size issues, fixed here as three atomic commits:1. Chart overlays don't fill their anchor box, and render ~a column too narrow.
The card was sized from its width alone (the inner SVG used
height:auto), so the plot never grew into the height left below the title — leaving an empty gap under the chart. And the overlay box width summed whole spanned columns but dropped the partial-column EMU offset, whileEstimateChartSizefell back to 48pt (64px) for default columns instead of the grid's ~44.27pt (59px) — together clamping the card ~one column narrower than Excel. The card is now a flex column (height:100%) that fills the box, and the box is sized from the chart's ownEstimateChartSize(offset included, grid-aligned column metric).2. Default/empty rows collapse below Excel's 15pt height.
Rows without an explicit height got no height attribute, so the grid let them shrink to content — empty rows ~17px and 11pt data rows ~22px, vs Excel's 15pt (~20px). That distorts the grid and drifts it out of step with the overlay anchor math. Every row now gets the explicit-or-default height; cell padding is trimmed (2px→1px) so default 11pt rows land on 15pt. Rows with an explicit/auto-fit height (rotated text, large fonts) keep their value.
3. Stale
.chart-containermargin offsets the overlay a row low..chart-containercarriedmargin: 16px autofrom an older in-flow layout. With charts now absolutely positioned, that top margin pushed each visible card down ~16px (to the bottom of its anchor row) and overflowed the box bottom. Set tomargin: 0.Validation. Rendered a multi-sheet workbook (charts, conditional formatting, sparklines, rich formatting, formulas, pivot) and compared to Excel. A 480px chart now renders ~444px ending mid-column-N (was clamped a column short); every gallery chart sits exactly on its anchor row (top + bottom); default grid rows are 20px (were 17/22px). No regressions across CF (color scales, data bars, icon sets), sparklines, rotation/number-formats/merges, formulas, or the pivot cross-tab.
The three commits are independent and can be split into separate PRs if you prefer one atomic fix per PR — happy to do that.
🤖 Generated with Claude Code