How to make an embedded dashboard chart 100% height responsive (react-grid-layout limitation)

[Cunec]

Hello Superset community,

We are currently building a web application using Vue 3 and embedding Superset (v6.1.0) using the official @superset-ui/embedded-sdk. We are trying to embed a single Deck.gl chart (Scatter/Heatmap) that fills the entire viewport (100vw and 100vh) responsively.

The Problem: Because @superset-ui/embedded-sdk only supports embedding Dashboards (embedDashboard()) and not individual charts, we are forced to place our single chart inside a dashboard grid. While the width of the chart is perfectly responsive (as react-grid-layout recalculates column widths on window resize), the height is fixed based on the configured grid rows.

When a user resizes the browser vertically or zooms out (e.g., to 75%), the chart's height remains fixed at its computed pixel value (e.g., 1600px). This causes either:

1. The bottom of the chart gets severely clipped.
2. A large empty/black space appears at the bottom of the map if the zoomed viewport becomes taller than the fixed chart height.

What we've tried: We attempted to force responsiveness via custom CSS injection:
.react-grid-layout, .react-grid-item, .slice_container, .deckgl-overlay { height: 100vh !important; }

However, this workaround is incomplete. Because Superset passes explicit pixel height props down to the chart component based on the grid layout, the Deck.gl component eventually renders explicit attributes. Forcing CSS height on the canvas causes WebGL distortion, and AutoSizer doesn't seem to recalculate the height automatically when overriding .react-grid-item.

My Questions:

1. Is there any official workaround or configuration to make a chart inside a Dashboard truly 100% responsive in vertical height, ignoring or bypassing the fixed grid row height?
2. Are there any plans for @superset-ui/embedded-sdk to officially support embedding single charts (e.g., the Explore view, which is natively responsive via Flexbox) using Guest Tokens?
3. If not, what is the best practice for embedding full-screen maps using the SDK without vertical clipping or empty spaces?
   Any guidance or hints would be greatly appreciated!

[dosubot[bot]]

Hi @Cunec! I'm Dosu 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]:

chartHeight = Math.floor(component.meta.height * GRID_BASE_UNIT - CHART_MARGIN)

These pixel heights are then propagated down through ChartHolder → Chart → ChartRenderer → SuperChart [2]. 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]. 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]. 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 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 feat(mcp): add embeddable charts with guest token authentication #36933 for single chart embedding support, which would give you native flexbox-based responsiveness without the grid constraints.

Recent merged work like PR #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.

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.