GitHub user Cunec created a discussion: How to make an embedded dashboard chart
100% height responsive (react-grid-layout limitation)
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 <canvas width="..." height="...">
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!
<img width="1771" height="946" alt="스크린샷 2026-06-02 112328"
src="https://github.com/user-attachments/assets/43b3f4eb-bec6-477b-a9df-8ddb727e3a2d";
/>
<img width="1672" height="942" alt="스크린샷 2026-06-02 112344"
src="https://github.com/user-attachments/assets/4f1e3eb5-c322-4d8d-b1a8-f84fe9324be3";
/>
GitHub link: https://github.com/apache/superset/discussions/40666
----
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]
