Exporting – amCharts 5 Documentation

This tutorial will walk through options of exporting chart view and data using bundled plugin: Exporting.

Loading

Exporting plugin needs to be loaded in order for it to be used.

You can import those in your TypeScript / ES6 application as JavaScript modules:

import * as am5exporting from "@amcharts/amcharts5/plugins/exporting";

For vanilla JavaScript applications and web pages, you can use "script" version:

<script src="https://cdn.amcharts.com/lib/5/plugins/exporting.js"></script>

MORE INFOFor more information on installing amCharts 5 as well as loading modules refer to our "Getting started" tutorial.

Enabling

Exporting plugin is instantiated just like any other object in amCharts 5: by calling new() method of its class, passing in root element and settings object.

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

var exporting = am5plugins_exporting.Exporting.new(root, {
  menu: am5plugins_exporting.ExportingMenu.new(root, {})
});

To enable export menu, we need to instantiate an ExportingMenu object and assign it to menu setting of the exporting:

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

var exporting = am5plugins_exporting.Exporting.new(root, {
  menu: am5plugins_exporting.ExportingMenu.new(root, {})
});

For more information about setting up and configuring export menu, refer to "Export menu" tutorial.

Formats

Configuring formats

Each export format, as a corresponding object in plugins settings, that can be used to set it's options.

For example, PNG image export can be set via pngOptions:

let exporting = am5plugins_exporting.Exporting.new(root, {
  menu: am5plugins_exporting.ExportingMenu.new(root, {}),
  pngOptions: {
    quality: 0.8,
    maintainPixelRatio: true
  }
});

var exporting = am5plugins_exporting.Exporting.new(root, {
  menu: am5plugins_exporting.ExportingMenu.new(root, {}),
  pngOptions: {
    quality: 0.8,
    maintainPixelRatio: true
  }
});

Each format has own set of options that can be set.

The table below lists formats, their options setting, and link to the complete list of format options:

Format	Type	Setting
PNG	Image	`pngOptions`	Available options
JPEG	Image	`jpgOptions`	Available options
PDF	Image + data	`pdfOptions`	Available options
PDF data	Data	`pdfdataOptions`	Available options
XLSX (Excel)	Data	`xlsxOptions`	Available options
CSV	Data	`csvOptions`	Available options
JSON	Data	`jsonOptions`	Available options
HTML	Data	`htmlOptions`	Available options
Print	Print	`printOptions`	Available options

Disabling formats

Disabling a format is as easy as setting disabled: true in its options:

let exporting = am5plugins_exporting.Exporting.new(root, {
  menu: am5plugins_exporting.ExportingMenu.new(root, {}),
  htmlOptions: {
    disabled: true
  }
});

var exporting = am5plugins_exporting.Exporting.new(root, {
  menu: am5plugins_exporting.ExportingMenu.new(root, {}),
  htmlOptions: {
    disabled: true
  }
});

The above will effectively remove HTML export from the menu.

Exporting images

For information on how to set up and configure exporting of chart snapshots, refer to "Exporting to image formats" tutorial.

Exporting data

To enable data export, we need to provide the data to export via plugin's dataSource setting:

let exporting = am5plugins_exporting.Exporting.new(root, {
  menu: am5exporting.ExportingMenu.new(root, {}),
  dataSource: data
});

var exporting = am5plugins_exporting.Exporting.new(root, {
  menu: am5exporting.ExportingMenu.new(root, {}),
  dataSource: data
});

For information on how to set up and configure data export, refer to "Exporting data" tutorial.

Name of export file

Exporting plugin will export files named chart.*** by default.

We can change that using filePrefix setting:

let exporting = am5plugins_exporting.Exporting.new(root, {
  menu: am5exporting.ExportingMenu.new(root, {}),
  filePrefix: "myChart"
});

var exporting = am5plugins_exporting.Exporting.new(root, {
  menu: am5exporting.ExportingMenu.new(root, {}),
  filePrefix: "myChart"
});

Printing

For information on how to set up and configure chart printing, refer to "Printing" tutorial.

Common pitfalls

Tainted images

Due to browser's security restrictions, exported images can't include "tainted" images.

A "tainted" image is any asset that came from a different host than the web page displaying the chart. For example, if you load an image bullet from a different domain, it would be omitted from the exported image.

The chart would still export, just without the tainted images.

Local files

Local files (files loaded via file:///... URL) are considered tainted, and will not be included in exports.

In order for export to work properly, both the web page and all the images need to be loaded via web server, even if it's http://localhost/....

API

All export operations are accessible not only via export menu, but also via plugin API.

Complete list of methods is available in Exporting reference.

There are few kinds of API methods for initiating download, returning data uri representation, or raw data.

Initiating download/print

This is the same operation that happens when export menu item is clicked: a download or print is triggered.

To initiate such action, we can use download() or print() methods.

function downloadChartImage {
  exporting.download("png");
}

function printChart() {
  exporting.print();
}

function downloadChartImage {
  exporting.download("png");
}

function printChart() {
  exporting.print();
}

Both of those methods accept parameter with format options, should we want to override defaults or custom format options.

exporting.download("png", {
  minWidth: 1000,
  maxWidth: 2000
});

exporting.download("png", {
  minWidth: 1000,
  maxWidth: 2000
});

Getting data uri

Data uri form of data is suitable for use right away. For example you can use it exported image as an src attribute of an <img> tag, or stream it as binary.

For getting export in data uri format we have export*() format-specific methods, for example exportImage().

These functions are asynchronous, so they will return a Promise instead of real data right away. We need to handle it accordingly:

exporting.export("png").then(function(imgData) {
  document.getElementById("myImage").src = imgData;
});

exporting.export("png").then(function(imgData) {
  document.getElementById("myImage").src = imgData;
});

See the Pen
Modifying state animation options by amCharts team (@amcharts)
on CodePen.0

Getting raw data

In some cases - especially with data export - we may need textual/raw data, rather than binary-encoded string.

For that exporting plugin offers get***() methods, e.g. getCSV().

exporting.getCSV().then(function(csvData) {
  document.getElementById("myData").innerHTML = csvData;
});

exporting.getCSV().then(function(csvData) {
  document.getElementById("myData").innerHTML = csvData;
});

See the Pen
Using exporting API by amCharts team (@amcharts)
on CodePen.0

Creating multi-content PDF export