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

> Easily export ECharts charts to PNG, JPEG, or SVG formats using the built-in getDataURL method. Learn how to save your visualizations for sharing and further use.

- Repository: [The Apache Software Foundation/echarts](https://github.com/apache/echarts)
- Tags: how-to-guide
- Published: 2026-03-04

---

**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`](https://github.com/apache/echarts/blob/main/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`](https://github.com/apache/echarts/blob/main/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`](https://github.com/apache/echarts/blob/main/src/core/echarts.ts) (lines 874-910), the `getDataURL` method automatically detects the configured renderer and branches accordingly:

```typescript
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**:

```typescript
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`](https://github.com/apache/echarts/blob/main/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

```javascript
// 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

```javascript
// 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

```javascript
// 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

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

```

## Key Source Files and Implementation Details

| File | Role |
|------|------|
| [`src/core/echarts.ts`](https://github.com/apache/echarts/blob/main/src/core/echarts.ts) | Implements `getDataURL()`, `getSvgDataURL()`, `renderToCanvas()`, `renderToSVGString()`, and `getConnectedDataURL()` |
| [`src/core/ExtensionAPI.ts`](https://github.com/apache/echarts/blob/main/src/core/ExtensionAPI.ts) | Exposes public methods to chart instances via the `availableMethods` array |
| [`src/renderer/svg/SVGPainter.ts`](https://github.com/apache/echarts/blob/main/src/renderer/svg/SVGPainter.ts) | Provides `toDataURL()` implementation for SVG renderer output |
| [`src/renderer/canvas/CanvasPainter.ts`](https://github.com/apache/echarts/blob/main/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.