How to Export ECharts Charts to Image Formats (PNG, JPEG, SVG)

ECharts provides the built-in getDataURL() method to export charts as PNG, JPEG, or SVG data URLs, while getConnectedDataURL() handles grouped charts and renderToSVGString() returns raw SVG markup.

The Apache ECharts library includes native APIs for converting rendered charts into static image formats. These methods are implemented in the core chart class at src/core/echarts.ts and exposed through the ExtensionAPI, allowing you to capture high-resolution visuals for reports, dashboards, or external manipulation. This guide explains how to export ECharts charts to image formats using the official rendering pipeline.

Built-in Export Methods Overview

ECharts exposes three primary methods for image export, each serving different use cases:

• chart.getDataURL([options]) – Returns a data URL (data:image/...) for a single chart instance. Supports raster formats (PNG, JPEG) when using the Canvas renderer and vector format (SVG) when using the SVG renderer.
• chart.getConnectedDataURL([options]) – Merges all charts sharing the same group ID into a single image data URL, ideal for exporting dashboards with multiple synchronized charts.
• chart.renderToSVGString([options]) – Returns the raw SVG markup string directly. Only available when the chart is initialized with the SVG renderer.

These methods are bound to chart instances via the ExtensionAPI in src/core/ExtensionAPI.ts (lines 31-44), making them available on any instance returned by echarts.init().

How getDataURL() Works Under the Hood

According to the source code in src/core/echarts.ts (lines 874-910), the getDataURL method automatically detects the configured renderer and branches accordingly:

const url = this._zr.painter.getType() === 'svg'
    ? this.getSvgDataURL()
    : this.renderToCanvas(opts).toDataURL('image/' + (opts?.type || 'png'));

SVG Renderer Path

When the renderer is svg, the method calls getSvgDataURL() (lines 862-872), which stops all active animations and requests the data URL from the SVGPainter:

getSvgDataURL(): string {
    const zr = this._zr;
    const list = zr.storage.getDisplayList();
    each(list, el => el.stopAnimation(null, true));
    return (zr.painter as SVGPainter).toDataURL();
}

Canvas Renderer Path

For the canvas renderer, the chart is first rendered to a hidden off-screen canvas via renderToCanvas(), then converted using the native HTMLCanvasElement.toDataURL() method with the specified MIME type.

Export Options Configuration

The getDataURL method accepts an options object that controls the output:

• type: 'png' | 'jpeg' | 'svg' – Specifies the image format (default: 'png').
• pixelRatio: number – Overrides the chart's device pixel ratio for higher resolution exports.
• backgroundColor: ZRColor – Sets the fill color for canvas exports.
• excludeComponents: ComponentMainType[] – Hides specific components (e.g., ['legend']) from the exported image.

When excludeComponents is provided, the implementation temporarily sets view.group.ignore = true for each listed component (lines 889-904), renders the image, then restores visibility.

Exporting Multiple Connected Charts

The getConnectedDataURL() method (lines 931-970 in src/core/echarts.ts) handles exports for dashboard layouts containing multiple linked charts. It iterates over all instances sharing the same group identifier, collects their canvases or SVG strings, computes a composite bounding box, and paints each chart at the correct offset onto a new off-screen canvas or SVG element. This returns a single data URL representing the entire group.

Practical Code Examples

Export a Single Chart as PNG

// Generate high-resolution PNG
const pngDataURL = myChart.getDataURL({
    type: 'png',
    pixelRatio: 2
});

// Trigger browser download
const link = document.createElement('a');
link.href = pngDataURL;
link.download = 'chart.png';
link.click();

Export as SVG Vector Graphics

// Initialize with SVG renderer for vector output
const myChart = echarts.init(
    document.getElementById('main'), 
    null, 
    {renderer: 'svg'}
);

// Get data URL for embedding
const svgDataURL = myChart.getDataURL({type: 'svg'});

// Or retrieve raw markup for file saving
const svgMarkup = myChart.renderToSVGString({useViewBox: true});
console.log(svgMarkup); // Save as .svg file

Export a Dashboard with Multiple Charts

// Assign charts to the same group
chartA.group = 'dashboard';
chartB.group = 'dashboard';
chartC.group = 'dashboard';

// Export entire dashboard as single image
const combinedURL = chartA.getConnectedDataURL({
    type: 'png',
    pixelRatio: 2
});

Exclude Components from Export

const url = myChart.getDataURL({
    type: 'png',
    excludeComponents: ['legend', 'toolbox'] // Hide interactive elements
});

Key Source Files and Implementation Details

File	Role
src/core/echarts.ts	Implements getDataURL(), getSvgDataURL(), renderToCanvas(), renderToSVGString(), and getConnectedDataURL()
src/core/ExtensionAPI.ts	Exposes public methods to chart instances via the availableMethods array
src/renderer/svg/SVGPainter.ts	Provides toDataURL() implementation for SVG renderer output
src/renderer/canvas/CanvasPainter.ts	Supplies getRenderedCanvas() for Canvas-to-PNG/JPEG conversion

These files form the complete export pipeline, supporting both raster and vector output paths depending on the renderer configuration.

Summary

• Use getDataURL() to export single charts as PNG, JPEG, or SVG data URLs
• Use getConnectedDataURL() to merge grouped charts into a single composite image
• Use renderToSVGString() to retrieve raw SVG markup for programmatic manipulation
• Set pixelRatio for high-resolution exports suitable for print media
• Use excludeComponents to hide legends, toolboxes, or other UI elements from the final image
• The underlying implementation differs by renderer: Canvas uses toDataURL() while SVG uses SVGPainter.toDataURL()

Frequently Asked Questions

Can I export ECharts charts to PDF format?

ECharts does not provide a native PDF export method. To create PDFs, first export the chart as an SVG or high-resolution PNG using getDataURL(), then convert the output using external libraries or browser print-to-PDF functionality.

What is the difference between Canvas and SVG export?

Canvas exports produce raster images (PNG/JPEG) via the HTMLCanvasElement.toDataURL() API, resulting in fixed-resolution bitmaps. SVG exports generate vector markup that remains scalable at any resolution, but requires initializing the chart with renderer: 'svg' in the echarts.init() configuration.

How do I set the resolution for exported images?

Pass the pixelRatio option to getDataURL() or getConnectedDataURL(). Values greater than 1 increase the resolution proportionally (e.g., pixelRatio: 2 doubles the width and height), though file size increases accordingly.

Can I export charts without the legend or toolbox?

Yes, include the excludeComponents option in your export configuration. Specify an array of component types to hide during rendering: excludeComponents: ['legend', 'toolbox', 'dataZoom']. The components remain visible in the interactive chart but are omitted from the exported image.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}