Skip to main content

​
Overview

The Exporting plugin enables you to export chart visualizations and data in multiple formats. It supports image exports (PNG, JPG), PDF generation, data exports (CSV, JSON, XLSX, HTML), and printing functionality.

​
Installation

Import the Exporting plugin and related classes from the plugins module: 
import * as am5 from "@amcharts/amcharts5";
import { Exporting } from "@amcharts/amcharts5/plugins/exporting";

​
Basic Usage

​
Adding Exporting to a Chart

Create an Exporting instance and attach it to your root element: 
let root = am5.Root.new("chartdiv");

// Create exporting instance
let exporting = Exporting.new(root, {
  menu: ExportingMenu.new(root, {})
});

​
Programmatic Export

You can trigger exports programmatically without showing the menu: 
// Export as PNG
exporting.export("png").then((dataUri) => {
  console.log("Exported PNG:", dataUri);
});

// Download PNG file
exporting.download("png");

// Print chart
exporting.print();

​
Export Formats

​
Image Formats

Export charts as raster images: 
// PNG export with custom options
exporting.export("png", {
  quality: 1,
  minWidth: 800,
  maintainPixelRatio: false
});

// JPG export
exporting.export("jpg", {
  quality: 0.8
});

​
Image Export Options

​
quality
number
Image quality from 0 to 1 (default: 1 for PNG, 0.8 for JPG)
​
maintainPixelRatio
boolean
default:false
Export with hardware resolution (false) or screen appearance (true)
​
minWidth
number
Minimum width of exported image in pixels
​
maxWidth
number
Maximum width of exported image in pixels
​
minHeight
number
Minimum height of exported image in pixels
​
maxHeight
number
Maximum height of exported image in pixels

​
PDF Export

Generate PDF documents with chart images: 
exporting.export("pdf", {
  imageFormat: "png",
  pageSize: "A4",
  pageOrientation: "landscape",
  fontSize: 14,
  addURL: true
});

​
PDF Options

​
imageFormat
'png' | 'jpg'
default:"png"
Image format for embedded chart image
​
pageSize
string
default:"A4"
Page size (A0-A10, B0-B10, C0-C10, LETTER, LEGAL, etc.)
​
pageOrientation
'portrait' | 'landscape'
default:"portrait"
Page orientation
​
pageMargins
number | number[]
Page margins as a number or array [left, top, right, bottom]
​
fontSize
number
default:14
Font size for text elements
​
align
'left' | 'center' | 'middle'
default:"left"
Chart image alignment in PDF
​
addURL
boolean
default:true
Include source page URL in the PDF

​
Data Export

Export chart data in various formats: 
// Configure data source
exporting.set("dataSource", chart.series.getIndex(0).data);

// Export as CSV
exporting.export("csv", {
  separator: ",",
  addColumnNames: true
});

// Export as JSON
exporting.export("json", {
  indent: 2
});

// Export as XLSX
exporting.export("xlsx");

​
Data Export Options

​
dataSource
any[]
Array of data objects to export
​
dataFields
object
Map of field names to column headers: { fieldName: "Column Name" }
​
dataFieldsOrder
string[]
Array specifying the order of fields in export
​
numericFields
string[]
Fields containing numeric values for proper formatting
​
dateFields
string[]
Fields containing date values
​
dateFormat
string | Intl.DateTimeFormatOptions
Date format for date fields
​
numberFormat
string | Intl.NumberFormatOptions
Number format for numeric fields

​
Configuration

​
General Settings

let exporting = Exporting.new(root, {
  filePrefix: "my-chart",
  title: "Sales Report",
  backgroundColor: am5.color(0xffffff),
  backgroundOpacity: 1
});
​
filePrefix
string
default:"chart"
Prefix for downloaded file names
​
title
string
Chart title for print, PDF, and Excel exports
​
backgroundColor
Color
Background color for exported images (auto-detected if not set)
​
backgroundOpacity
number
default:1
Background opacity (0 = transparent, 1 = opaque)

​
Export Menu

Customize the export menu appearance and behavior: 
import { ExportingMenu } from "@amcharts/amcharts5/plugins/exporting";

let exporting = Exporting.new(root, {
  menu: ExportingMenu.new(root, {
    align: "right",
    valign: "top",
    items: [
      {
        type: "format",
        format: "png",
        label: "Export as PNG"
      },
      {
        type: "format",
        format: "pdf",
        label: "Export as PDF"
      },
      {
        type: "separator"
      },
      {
        type: "format",
        format: "csv",
        label: "Download CSV"
      }
    ]
  })
});

​
Including Multiple Charts

Export multiple charts in a single image: 
exporting.set("extraImages", [
  secondChart.root,
  {
    source: thirdChart.root,
    position: "bottom",
    marginTop: 20
  }
]);

​
Events

Listen to export lifecycle events: 
exporting.events.on("exportstarted", (ev) => {
  console.log("Export started:", ev.format);
});

exporting.events.on("exportfinished", (ev) => {
  console.log("Export finished:", ev.format);
});

exporting.events.on("dataprocessed", (ev) => {
  console.log("Data processed:", ev.data);
});

exporting.events.on("pdfdocready", (ev) => {
  // Modify PDF document before export
  ev.doc.content.push({
    text: "Additional content",
    margin: [0, 20, 0, 0]
  });
});

​
Available Events

​
exportstarted
Triggered when export operation begins
​
exportfinished
Triggered when export operation completes
​
downloadstarted
Triggered when file download begins
​
printstarted
Triggered when print operation starts
​
dataprocessed
Triggered after data is processed for export
​
pdfdocready
Triggered when PDF document is prepared (can be modified)
​
workbookready
Triggered when XLSX workbook is prepared (can be modified)

​
Advanced Usage

​
Custom Print Options

exporting.print({
  delay: 500,
  printMethod: "iframe",
  imageFormat: "png",
  quality: 1
});

​
PDF with Data Table

Export PDF with both chart image and data table: 
exporting.export("pdf", {
  includeData: true,
  addColumnNames: true
});

​
Canvas Export

Get a canvas element for custom processing: 
exporting.getCanvas({
  quality: 1,
  minWidth: 1920
}).then((canvas) => {
  // Use canvas element
  document.body.appendChild(canvas);
});

​
Browser Compatibility

The Exporting plugin works in all modern browsers. Note that:
  • PDF export requires the pdfmake library (loaded automatically)
  • XLSX export requires the xlsx library (loaded automatically)
  • Some browsers may prompt for download permission

​
Performance Tips

For large datasets, consider filtering or limiting data before export to improve performance.
Image exports capture the chart as it appears on screen. Ensure all chart elements are fully rendered before exporting.

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us