superset icon indicating copy to clipboard operation
superset copied to clipboard

Problem Exporting Charts as Image

Open CharlesNkdl opened this issue 1 year ago • 11 comments

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

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

Screenshots/recordings

Here is the result for my charts : valeur-moyennes-selon-surface-2024-05-27T14-20-12 529Z

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.

genders-2024-05-27T14-21-50 342Z

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 avatar May 27 '24 14:05 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.

dosubot[bot] avatar May 27 '24 14:05 dosubot[bot]

@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.

visharavana avatar May 28 '24 06:05 visharavana

Seems to be an issue in Safari too.

rusackas avatar May 29 '24 19:05 rusackas

@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

CharlesNkdl avatar May 30 '24 15:05 CharlesNkdl

I still have this type of problem all-final-acceptance-2024-06-17T13-44-33 596Z

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 ?

stasDomb avatar Jun 17 '24 14:06 stasDomb

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

Image

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.

Gordonei avatar Mar 02 '25 18:03 Gordonei

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

Image

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

doriansechal avatar Mar 20 '25 11:03 doriansechal

Same problem here, is there a temporary solution?

LHARISMENDY avatar Mar 26 '25 14:03 LHARISMENDY

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

https://github.com/apache/superset/issues/29394 https://github.com/apache/superset/issues/31158 https://github.com/apache/superset/issues/29719 https://github.com/apache/superset/issues/28713 https://github.com/apache/superset/issues/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.

rusackas avatar Jun 10 '25 03:06 rusackas

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

doriansechal avatar Jun 10 '25 08:06 doriansechal

I've tried

FEATURE_FLAGS = {
DASHBOARD_VIRTUALIZATION: False
}

And it helped in Chrome. In Safari still doesn't work. I'm confused a bit, because in the docs this parameter is False by default. But anyway Thank you!

Superset Version: 4.1.2

Firefox Version: 139.0.1 (64-bit) [Mozilla Firefox for Arch Linux]

Chromium Version: Version 137.0.7151.68 (Official Build) Arch Linux (64-bit)

Same problem here as well.

When I download the chart as Image in dashboard, the feature is working for Chromium browser without the need for aforementioned configuration

FEATURE_FLAGS = {
DASHBOARD_VIRTUALIZATION: False
}

Whereas it downloads a cropped image in the Firefox browser.

Images below: Dashboard: Image

Firefox Downloaded Image: Image

Chromium Downloaded Image Image

bhavabhuthi avatar Jul 07 '25 12:07 bhavabhuthi

Problem remains in version 5.0.0. We tried to add

FEATURE_FLAGS = {
    DASHBOARD_VIRTUALIZATION: False
}

in superset_config.py but it gives error:

[2025-07-24 10:23:24 +0000] [54] [ERROR] Exception in worker process
Traceback (most recent call last):
  File "/app/.venv/lib/python3.10/site-packages/gunicorn/arbiter.py", line 608, in spawn_worker
    worker.init_process()
  File "/app/.venv/lib/python3.10/site-packages/gunicorn/workers/gthread.py", line 94, in init_process
    super().init_process()
  File "/app/.venv/lib/python3.10/site-packages/gunicorn/workers/base.py", line 135, in init_process
    self.load_wsgi()
  File "/app/.venv/lib/python3.10/site-packages/gunicorn/workers/base.py", line 147, in load_wsgi
    self.wsgi = self.app.wsgi()
  File "/app/.venv/lib/python3.10/site-packages/gunicorn/app/base.py", line 66, in wsgi
    self.callable = self.load()
  File "/app/.venv/lib/python3.10/site-packages/gunicorn/app/wsgiapp.py", line 57, in load
    return self.load_wsgiapp()
  File "/app/.venv/lib/python3.10/site-packages/gunicorn/app/wsgiapp.py", line 47, in load_wsgiapp
    return util.import_app(self.app_uri)
  File "/app/.venv/lib/python3.10/site-packages/gunicorn/util.py", line 423, in import_app
    app = app(*args, **kwargs)
  File "/app/superset/app.py", line 37, in create_app
    app.config.from_object(config_module)
  File "/app/.venv/lib/python3.10/site-packages/flask/config.py", line 231, in from_object
    obj = import_string(obj)
  File "/app/.venv/lib/python3.10/site-packages/werkzeug/utils.py", line 596, in import_string
    __import__(import_name)
  File "/app/superset/config.py", line 1955, in <module>
    import superset_config
  File "/app/pythonpath/superset_config.py", line 57, in <module>
    DASHBOARD_VIRTUALIZATION: False
NameError: name 'DASHBOARD_VIRTUALIZATION' is not defined

We use official Apache Superset 5.0.0 Docker image from Docker Hub.

Chart image look incorrectly cropped when downloaded in Firefox. We tested it on Firefox 140.0.4 (64 bit; Windows/Linux). This problem not occurs on Chrome 138.0.7204.157 (Linux) and Chrome 138.0.7204.159 (Windows).

Selected chart: Image

Output in Firefox (Which is broken): Image

Output in Chrome (Which is good):

Image

geekdinazor avatar Jul 24 '25 10:07 geekdinazor

Hello, I have same problem with 6.0.0rc2, I had

114 # Add Dashboard virtualization
115 FEATURE_FLAGS = {
116         "ALERT_REPORTS": True,
117         "DASHBOARD_VIRTUALIZATION": False,
118                 }

And the result with firefox and chromium :

Image

Regards

aukfood avatar Sep 23 '25 06:09 aukfood

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 https://github.com/apache/superset/issues/32037#issuecomment-3112497493

tejavegesna-lb avatar Oct 08 '25 16:10 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
}

aukfood avatar Oct 09 '25 06:10 aukfood