Exporting

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 am5plugins_exporting 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>

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.

TypeScript
JavaScript

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:

TypeScript
JavaScript

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:

TypeScript
JavaScript

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:

TypeScript
JavaScript

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:

TypeScript
JavaScript

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

var exporting = am5plugins_exporting.Exporting.new(root, {
  menu: am5plugins_exporting.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:

TypeScript
JavaScript

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

var exporting = am5plugins_exporting.Exporting.new(root, {
  menu: am5plugins_exporting.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

Exporting plugin provides an extensive API. Please refer to “Exporting API” tutorial for more information.