Skip to content

Export Configuration Should Respect Background and Foreground Colors #5110

@bld-sync

Description

@bld-sync

Problem Description

When exporting charts (PNG/SVG), ApexCharts does not properly respect the background and foreColor settings in the export configuration, particularly when using dark themes.

Current Behavior

  • Charts display correctly on the website with dark backgrounds and white text
  • When exported, charts have white backgrounds with white text (invisible)
  • The chartOptions in export configuration doesn't override the background/foreground colors
  • This makes exported charts unusable for dark-themed applications

Expected Behavior

  • Export configuration should allow overriding background and foreground colors
  • chartOptions.background and chartOptions.foreColor should work in export settings
  • Exported charts should maintain proper contrast (dark background + white text OR white background + black text)

Code Example

export: {
    png: {
        filename: 'chart.png',
        chartOptions: {
            chart: {
                background: '#171717',  // Should work but doesn't
                foreColor: '#ffffff'    // Should work but doesn't
            }
        }
    }
}

Workarounds Attempted

  1. Setting background and foreColor in main chart config
  2. Using chartOptions in export configuration
  3. Custom export handlers with updateOptions()
  4. Using dataURI() method with temporary color changes

None of these approaches consistently work across different chart types.

Use Case

Dark-themed applications need to export charts that maintain the dark theme for:

  • Reports and documentation
  • Presentations
  • Sharing with stakeholders
  • Printing (when appropriate)

Proposed Solution

Add proper support for chartOptions in export configuration, or add specific export-only properties like:

  • exportBackground
  • exportForeColor
  • exportTheme

Environment

  • ApexCharts version: [latest]
  • Browser: All browsers
  • Chart types: All types (donut, pie, bar, line, etc.)

Additional Context

This is a critical issue for applications that use dark themes, as exported charts become completely unusable due to invisible text on white backgrounds.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions