Problem Exporting Charts as Image

Bug description

Hi Superset Community,

I have a problem exporting Charts as Image, from multiple Dashboards and instance of Superset.

How to reproduce the bug

Go to a Dashboards with Charts
Click the three dots on the top right of a charts
Download => Download as Image

Screenshots/recordings

Here is the result for my charts :

I was wondering if maybe this was related to the fact that the query is quite complicated + a lot of filters in the dashboard so i tried to export another charts from the examples datasets.

Not quite right too...

Superset version

4.0.1

Python version

3.10

Node version

Not applicable

Browser

Firefox

Additional context

I use Apache Superset 4.0.1 in Local using Windows and a WSL Backend, but this problem was also on my prod. env with Apache Superset 4.0.0 used with Cloudron which handles the deployment.

Even if template processing is ON, i can't download image, with or without Jinja Templating in them.

Here are my superset_config.py flags in local :

SECRET_KEY` = ""

SQLALCHEMY_DATABASE_URI = ''

WTF_CSRF_ENABLED = True (tried with False too...)
WTF_CSRF_EXEMPT_LIST = []
# A CSRF token that expires in 1 year
WTF_CSRF_TIME_LIMIT = 60 * 60 * 24 * 365
                                                                                                                
MAPBOX_API_KEY = ''

LANGUAGES = {
        'en': {'flag': 'us', 'name': 'English'},
        'fr': {'flag': 'fr', 'name': 'French'}
}

ENABLE_JAVASCRIPT_CONTROLS = True

APP_NAME = "Superset Local"

WELCOME_MESSAGE = "secret"

PRIMARY_COLOR = "green"

ENABLE_TEMPLATE_PROCESSING = True

CONTENT_SECURITY_POLICY_WARNING = False

TALISMAN_ENABLED = False

DEFAULT_FEATURE_FLAGS = {
        "ENABLE_TEMPLATE_PROCESSING" : True,
}

Here is my python stack trace, minus the get and post request :

Superset.explore_json This API endpoint is deprecated and will be removed in version 4.0.0
2024-05-27 16:34:36,711:WARNING:superset.views.base:Superset.explore_json This API endpoint is deprecated and will be removed in version 4.0.0
2024-05-27 16:34:36,717:DEBUG:parsedatetime:eval - with context - False, False
```


### Checklist

- [X] I have searched Superset docs and Slack and didn't find a solution to my problem.
- [X] I have searched the GitHub issue tracker and didn't find a similar bug report.
- [X] I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

@CharlesNkdl

Hello @CharlesNkdl, I'm here to help you with the issue you're facing. I'm a bot that can assist you with bug resolution, answer your questions, and guide you to become a contributor. Let's work together to get this sorted out.

To resolve the issue of exporting charts as blank images from multiple dashboards in Apache Superset version 4.0.1, you need to ensure that the charts are fully loaded before initiating the export process. The provided code snippet shows the handleBulkChartExport function, which handles the export of charts.

Here is the relevant part of the code:

const handleBulkChartExport = (chartsToExport: Chart[]) => {
    const ids = chartsToExport.map(({ id }) => id);
    handleResourceExport('chart', ids, () => {
      setPreparingExport(false);
    });
    setPreparingExport(true);
  };

To ensure that charts are fully loaded before exporting, you might need to add a check to confirm that the charts are rendered and ready. This can be done by verifying the loading state and ensuring that the charts are not in a loading state before calling the handleBulkChartExport function.

Here is an example of how you might modify the function to include such a check:

const handleBulkChartExport = (chartsToExport: Chart[]) => {
    if (loading) {
      addDangerToast(t('Charts are still loading. Please wait until all charts are fully loaded before exporting.'));
      return;
    }

    const ids = chartsToExport.map(({ id }) => id);
    handleResourceExport('chart', ids, () => {
      setPreparingExport(false);
    });
    setPreparingExport(true);
  };

This modification ensures that the export process is only initiated when the charts are fully loaded, preventing the issue of exporting blank images ^[1].

Details

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

@CharlesNkdl

@CharlesNkdl Which browser are you using? I am also facing this problem in the Firefox browser, but when I use Chrome, it's working well.

Seems to be an issue in Safari too.

@visharavana

@visharavana I'm using Firefox. The solution was so simple i just didn't thought of it, i'm kind of embarassed, thank you ! I tried on Microsoft Edge and it worked

Maybe due to firefox and safari not being chromium-based, compared to Chrome and Edge

I still have this type of problem

Version 4.0.1 (4.0.0)
I added to Feature Flags:

FEATURE_FLAGS = {
          "DASHBOARD_CROSS_FILTERS": True,
          "DASHBOARD_EDIT_CHART_IN_NEW_TAB": True,
          "DASHBOARD_RBAC": True,
          "EMBEDDED_SUPERSET": True,
          "ENABLE_TEMPLATE_PROCESSING": True,
          "PLAYWRIGHT_REPORTS_AND_THUMBNAILS": True
        }

But it doesn't work. In Safari there are now charts. In Chrome there are a few (as in picture).
Does anybody can help with this ?

Problem Exporting Charts as Image

Also seeing this with 4.1.1 and Firefox 135.0.1, for both dashboards and charts:

Chrome and M$ Edge seem to be working fine. Not sure if it's relevant or not, but the partial Firefox download seems to be wider than the complete Chrome one.

Version 4.1.1
Google Chrome - Version 133.0.6943.142 (Official Build) (arm64)
It doesn't work (pdf or jpg)

Same problem with Firefox and Safari, but it works on Chromium-based engines (Brave, Chrome...).

Same problem here, is there a temporary solution?

These all seem like they might effectively be the same issue:

#29394
#31158
#29719
#28713
#27532

Can anyone here test this with DASHBOARD_VIRTUALIZATION set to false? I have a suspicion that may fix it. If so, we can probably just disable viewport virtualization when the headless browser is building the screencap.

I tested the suggested fix with DASHBOARD_VIRTUALIZATION = False in my superset_config.py but the issue persists on both Firefox and Safari

Individual query/grid download worked find for me on chrome and firefox after adding these feature flags on superset 5.0.0

      "ENABLE_DASHBOARD_SCREENSHOT_ENDPOINTS": True,
      "THUMBNAILS": True,
      "ENABLE_DASHBOARD_DOWNLOAD_WEBDRIVER_SCREENSHOT": True,

    THUMBNAIL_CACHE_CONFIG = {
        'CACHE_TYPE': 'RedisCache',
        'CACHE_DEFAULT_TIMEOUT': 86400,
        'CACHE_KEY_PREFIX': 'superset_thumbnail_cache',
        'CACHE_REDIS_URL': f"{env('REDIS_PROTO')}://{env('REDIS_HOST')}:{env('REDIS_PORT')}/{env('REDIS_CELERY_DB')}?ssl_cert_reqs={env('REDIS_SSL_CERT_REQS')}",
    }

i still can't download whole dashboard as pdf or image

i followed it from here
#32037 (comment)

@tejavegesna-lb

@tejavegesna-lb it seems don't work with 6.0.0rc2

# Modification THUMBNAIL_CACHE_CONFIG
THUMBNAIL_CACHE_CONFIG = {
        'CACHE_TYPE': 'RedisCache',
        'CACHE_DEFAULT_TIMEOUT': 86400,
        'CACHE_KEY_PREFIX': 'superset_thumbnail_cache',
        "CACHE_REDIS_HOST": REDIS_HOST,
        "CACHE_REDIS_PORT": REDIS_PORT,
        "CACHE_REDIS_DB": REDIS_RESULTS_DB,
}

...

# Add Dashboard virtualization
FEATURE_FLAGS = {
	"ALERT_REPORTS": True,
	"DASHBOARD_VIRTUALIZATION": False,
        "ENABLE_DASHBOARD_SCREENSHOT_ENDPOINTS": True,
        "ENABLE_DASHBOARD_DOWNLOAD_WEBDRIVER_SCREENSHOT": True,
	"THUMBNAILS": True
}

It doesn't work in 6.1.0 release

Still open across a lot of versions and both browsers. Sounds like a real Firefox/Safari-specific rendering bug in the image capture path. Anyone want to pin it down with a Playwright repro so we can actually fix it?

The linked fix in #29614 closed without landing, and export still goes through dom-to-image-more, which has known Firefox/Safari gaps. Can anyone confirm this still repros on a recent release? Anyone want to open a new/revised PR?

This is still reproducible in 6.1.0. Root cause : dom-to-image-more wraps DOM in SVG -> safari blocks this.
Fix: Use html2canvas for the Safari path.

Can confirm 6.1.0 with Firefox 153 on Windows is working with image export, but PDF is cutting off on what is currently visible in the viewport.

@khushboogupta10october

Thanks @khushboogupta10october, that's a plausible read of the dom-to-image-more foreignObject gap on WebKit. Want to open the PR for the Safari path? html2canvas already comes in via dom-to-pdf, so it shouldn't need a new dependency.

Opened a PR for the Safari/WebKit path suggested above: #44529. It routes chart/dashboard image capture through html2canvas when running on Safari, and leaves the existing dom-to-image-more pipeline untouched on other engines. Feedback welcome.

@hadimobarra

Nice, thanks @hadimobarra! Taking a look at #44529.

This traces to Safari blocking dom-to-image-more's SVG foreignObject step, and #44529 has an html2canvas fallback for it in review. Still ironing out a deck.gl WebGL capture edge case there, but it's close.

Navigation Menu

Repository navigation

Problem Exporting Charts as Image #28713

Bug description

How to reproduce the bug

Screenshots/recordings

Superset version

Python version

Node version

Browser

Additional context

Details

4 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Problem Exporting Charts as Image #28713

Description

Bug description

How to reproduce the bug

Screenshots/recordings

Superset version

Python version

Node version

Browser

Additional context

Activity

dosubot commented on May 27, 2024

Details

visharavana commented on May 28, 2024

rusackas commented on May 29, 2024

CharlesNkdl commented on May 30, 2024

stasDomb commented on Jun 17, 2024

Gordonei commented on Mar 2, 2025

stanislav-dombrovskiy-dp commented on Mar 3, 2025

doriansechal commented on Mar 20, 2025

LHARISMENDY commented on Mar 26, 2025

rusackas commented on Jun 10, 2025

doriansechal commented on Jun 10, 2025

4 remaining items

tejavegesna-lb commented on Oct 8, 2025

aukfood commented on Oct 9, 2025

stasDomb commented on May 15, 2026

rusackas commented on Jul 21, 2026

rusackas commented on Aug 6, 2026

khushboogupta10october commented on Aug 11, 2026

Gordonei commented on Aug 14, 2026

rusackas commented on Sep 22, 2026

hadimobarra commented on Sep 22, 2026

rusackas commented on Sep 23, 2026

rusackas commented on Sep 29, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions