GitHub user dosubot[bot] added a comment to the discussion: How to make an embedded dashboard chart 100% height responsive (react-grid-layout limitation)
<!-- Answer --> Hi @Cunec! I'm [Dosu](https://go.dosu.dev/dosubot) and I'm helping the Apache Superset team. Great write-up of the problem. Here's what I found regarding your three questions: **1. No official workaround for true 100vh responsive height** Superset's dashboard grid uses a custom system where chart heights are pre-calculated from metadata using a fixed formula [[1]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.tsx#L187-L209): ```javascript chartHeight = Math.floor(component.meta.height * GRID_BASE_UNIT - CHART_MARGIN) ``` These pixel heights are then propagated down through `ChartHolder → Chart → ChartRenderer → SuperChart` [[2]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx#L507-L508). There is no AutoSizer or CSS-based responsive height anywhere in this pipeline — it's all metadata-driven fixed pixels. This is why your CSS overrides cause WebGL distortion: the canvas dimensions are set from JS props, not CSS. The one scenario where viewport-based sizing kicks in is **full-size chart mode** (the "maximize" feature), which uses `window.innerHeight - CHART_MARGIN` [[3]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.tsx#L191-L193). However, this isn't directly accessible from the embedded SDK context. **A potential workaround**: The embedded SDK exposes a `getScrollSize()` method that returns the iframe's content dimensions [[4]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-embedded-sdk/src/index.ts#L238). You could use `postMessage` communication from your Vue app to listen for resize events and programmatically trigger a dashboard resize — though this is hacky and not officially supported. **2. Single chart embedding is actively in development** [PR #36933](https://github.com/apache/superset/pull/36933) proposes adding embeddable charts with guest token authentication. It includes: - A new "Embed chart" action for saved charts - An embedded chart viewer page with guest token handshake - Ready-to-use iframe snippets This would solve your problem cleanly since the Explore view uses flexbox-based responsive layout. However, it hasn't been merged yet. **3. Best practice for now** Given the current limitations, your best options are: - **Use a ResizeObserver in your Vue host** to detect viewport changes, then communicate new dimensions to the iframe via `postMessage`. You'd need to patch Superset's embedded view to listen for these messages and trigger a re-render with updated dimensions — this requires a custom Superset build. - **Set your dashboard chart to a very tall row count** that exceeds typical viewport heights, and use the iframe with `overflow: hidden` plus `transform: scale()` to fit the content to the viewport. This avoids WebGL distortion since the canvas dimensions remain consistent. - **Watch PR #36933** for single chart embedding support, which would give you native flexbox-based responsiveness without the grid constraints. Recent merged work like [PR #38351](https://github.com/apache/superset/pull/38351) (box-sizing reset for embedded layouts) shows the team is actively improving the embedded experience, but true responsive height for grid-based dashboards would require a significant architectural change to the height calculation system. <!-- Dosu Comment Footer --> *To reply, just mention [@dosu](https://go.dosu.dev/dosubot?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=reply-with-mention&utm_term=apache%2Fsuperset).* --- Docs are dead. Just use [Dosu](https://dosu.dev?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-tagline&utm_term=apache%2Fsuperset). [](https://app.dosu.dev/response-feedback?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-feedback&utm_term=apache%2Fsuperset&message_id=303f23c0-19d3-4150-bb03-68c8a86272c3) [](https://github.dosu.com/apache/superset?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-ask-repo&utm_term=apache%2Fsuperset) [](https://app.dosu.dev/signup?referrer=openSource&source=github-footer&utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-share-team&utm_term=apache%2Fsuperset) GitHub link: https://github.com/apache/superset/discussions/40666#discussioncomment-17145380 ---- This is an automatically sent email for [email protected]. To unsubscribe, please send an email to: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
