Superset download image and pdf issue

[asishPatnaik2000]

Does superset do not retain or use the css that we have added in theme css?

why ?

it is not applying during downloading or the graphs are not looking same in downloaded image and pdf

[aashish254]

the download buttons do not take a screenshot of what you see on screen. they re-render the dashboard dom in your browser: the image export clones the .dashboard node and copies over only a fixed list of about 45 critical css properties (display, position, width and height, margins, padding, font-, color, background-color, border-, opacity, flex and grid bits) before rasterizing it with dom-to-image, and the pdf export re-renders the live element with html2canvas. you can see this in superset-frontend/src/utils/downloadAsImage.tsx, the CRITICAL_STYLE_PROPERTIES set and copyAllComputedStyles, and in superset-frontend/src/utils/downloadAsPdf.ts.

so your dashboard css is not exactly ignored, but anything outside that property list never makes it into the png: box-shadow, border-radius, gap, filters, pseudo-element styling, animations, media queries and :hover states are all dropped, which is why the graphs look different in the download. the css editor content gets injected as a style tag in the page head (src/dashboard/util/injectCustomCss.ts), so rules that reduce to the basic properties above do carry over.

if you want the exports to match the screen, keep the export css to simple selectors with the basics like colors, fonts, spacing and borders, and avoid the fancy properties. worth knowing the scheduled email reports path is different, that one renders the real page in headless chromium (superset/utils/screenshots.py), so it is a much closer wysiwyg than the menu downloads.

[asishPatnaik2000]

@aashish254 even if I remove all css i am not getting proper downloaded image

[asishPatnaik2000]

@dosu even if I remove all css i am not getting proper downloaded image

[dosubot[bot]]

The organization that owns this space has reached its limit of 200 credits per month. Usage will reset on 2026-11-01. Please contact an owner or admin of that organization to upgrade its plan. Upgrading a different organization will not change this space's limit.

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[FrancescoCastaldi]

The squashed image output (width 1918px with small height) happens because client-side export handles DOM rendering differently from on-screen display.

Why Client-Side Export Shrinks or Distorts

When you click Download as Image or Download as PDF from the dashboard menu:

1. Superset executes client-side rasterization in the user's browser using dom-to-image (for PNG) and html2canvas (for PDF).
2. The export utility (downloadAsImage.tsx) clones the .dashboard DOM tree and evaluates computed heights of the top-level grid containers.
3. If charts are placed inside rows with fixed CSS heights, flex containers without explicit min-height, or components with overflow: hidden / overflow: auto, dom-to-image captures only the visible client bounding box instead of the full scrollable canvas, resulting in horizontal squashing or cropped headers.

Steps to Fix the Squashed Output

1. Dashboard Grid Container Sizing:
   In the dashboard edit mode, check the row and column containers holding the chart. If the chart is nested inside a container where height was manually constricted, expand the row height so that the chart tile has natural clearance without relying on inner container scrollbars.

2. Remove Overflow and Transform Constraints in Custom CSS:
   If you have applied custom CSS in the dashboard settings, avoid rules like:

/* Avoid these on dashboard chart containers */
.dashboard-component-chart-holder {
  overflow: hidden !important;
  max-height: 350px !important;
}

Instead, let the chart component compute its dimensions:

.dashboard-component-chart-holder {
  overflow: visible !important;
}

3. High-Fidelity Server-Side Alternative:
   If you require exact pixel-perfect exports that match the live dashboard with full SVG charts, gradients, and custom CSS:
   Enable Celery Alerts and Reports with headless Chrome / Playwright (FEATURE_FLAGS = {"ALERT_REPORTS": True}). Server-side exports launch a headless browser with full window dimensions (WEBDRIVER_WINDOW_SIZE = (1920, 1080) in superset_config.py), taking genuine viewport screenshots that preserve all visual styles.