fix: prevent vaadin-chart from expanding parent containers

[tomivirkki]

Description

Fixes #10316

Prevents <vaadin-chart> from expanding its parent container. The issue occurred in flex layouts where the chart's intrinsic size would cause the parent to grow beyond its intended dimensions.

Changes

1. Positioning strategy: Applied position: relative to the wrapper and position: absolute to the internal chart element. This prevents the chart's intrinsic size from contributing to the parent's size calculation.

2. Intrinsic sizing: Added logic to apply min-height/min-width to the wrapper when it would otherwise collapse to ≤1px. This ensures charts maintain their default size when no explicit dimensions are provided by the container.

Verification

The PR branch includes temporary dev pages (removed in one of the later commits) that can be used to verify the fixes:

• dev/highcharts.html - Reproduces the original issue from Charts ends up in a reflow loop #10316
• dev/chart-dashboard.html - Tests charts in dashboard widgets (requires yarn start:lumo to see the dashboard-related bug)
• dev/highcharts-parent-sizing.html - Tests parent sizing contributions
• dev/highcharts-zindex.html - Tests z-index stacking behavior

Potential Concerns

⚠️ Breaking change risk: The absolute positioning of the internal chart element could potentially affect Existing layouts where users expect the chart to contribute to parent sizing in specific ways.

These concerns have been mitigated by:

• Only the internal chart element uses absolute positioning; the wrapper (the <vaadin-chart> element itself) remains in normal flow
• The wrapper still contributes to parent sizing through its min-height/min-width when needed
• Temporary dev pages created for manual testing of edge cases

Type of change

Bugfix

[tomivirkki]

Cleaned up code that was attempting to reset chart size on reattachment, which is no longer needed with the new positioning approach.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[DiegoCardoso]

One thing I noticed immediately is that the charts in dashboard are small after the changes.

On main

On this branch

[tomivirkki]

One thing I noticed immediately is that the charts in dashboard are small after the changes.

Not sure if we have idential test pages, but this is how the chart-dashboard.html from the PR branch works on main for me (clearly incorrect):

Kapture.2025-10-24.at.11.42.24.mp4

[DiegoCardoso]

The changes look good to me. I did not notice any issues with the changes in position.

[tomivirkki]

Chart Height Behavior in Dashboard Widgets

Seems that in chart-in-dashboard-widget page under flow-components, Charts in dashboard widgets currently show inconsistent initial heights. By default, vaadin-charts is sized at 100% × 100%, so it should automatically shrink to the dashboard’s default row height.

---

✅ Expected Behavior

• The chart inside a widget matches the default dashboard row height.
• To make the chart taller initially, you can:
  • Add a min-height to the chart.
  • Increase the widget’s rowspan.
  • Increase the dashboard’s row height.
  • Remove height: 100% from the chart to let it use its intrinsic height.

chart-in-widget-after.mp4

---

⚙️ Behavior in main

• The chart inside a widget uses the internal chart’s intrinsic height, even though the Vaadin Chart has height: 100%.
• The widget can be resized taller, but it cannot be reduced in height.
  Trying to decrease its rowspan instead forces the entire dashboard row to expand to match the chart’s height.

chart-in-widget-before.mp4

---

⚠️ Note

Some users may currently rely on this buggy behavior so merging (and especially backporting) the fix could result in unexpected layout changes.