Skip to content
amCharts 5

Printing

This tutorial looks at configuration options for printing charts with Exporting plugin.

Section titled “Print method”

There are two methods to initiate print of a single element on the page:

  • Hide everything besides chart being printed, then initiate print of the page.
  • Create an <iframe> element with chart snapshot in it, then initiate print of the iframe document.

The iframe method is default.

However, in some setups, security restrictions might prevent creating iframes. In those cases we might want to switch the method by setting printMethod option to "css":

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

Title

Section titled “Title”

If we’d like some title to be added to the printed chart we can do so via title option in printOptions:

let exporting = am5plugins_exporting.Exporting.new(root, {
  menu: am5plugins_exporting.ExportingMenu.new(root, {}),
  printOptions: {
    title: "My awesome chart"
  }
});

Image options

Section titled “Image options”

Export will generate a snapshot for printing in PNG format.

We can change that using imageFormat option:

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

Choosing specific format will also mean that specific image format options will be used to generate snapshot: pngOptions for PNG and jpgOptions for JPEG.

Disabling print

Section titled “Disabling print”

Disabling print is done just like any other format - via its options:

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

Printing via API

Section titled “Printing via API”

To trigger printing of the chart programmatically, simply call exporting plugins print() method:

exporting.print();