Exporting to image formats

This tutorial looks at configuration options for chart snapshot export with Exporting plugin.

Image quality

PNG or JPEG formats support quality option.

It's a numeric value between 0 (zero) and 1 (one), where zero means worst quality, and one - the highest possible quality.

For very large images, we might want to reduce quality so that export does not result in huge files.

let exporting = am5plugins_exporting.Exporting.new(root, {
  menu: am5plugins_exporting.ExportingMenu.new(root, {}),
  pngOptions: {
    quality: 0.7
  },
  jpgOptions: {
    quality: 0.7
  }
});
var exporting = am5plugins_exporting.Exporting.new(root, {
  menu: am5plugins_exporting.ExportingMenu.new(root, {}),
  pngOptions: {
    quality: 0.7
  },
  jpgOptions: {
    quality: 0.7
  }
});

Pixel ratio

Most of the computer screen nowadays have a pixel ratio.

That means that actual screen resolution is times higher than the OS resolution.

For example the screen matrix might support 4800 pixels, but the screen is set to show only 2400 pixels - two hardware pixels per one virtual pixels.

This results in super sharp images on screen.

When exporting, the image will have actual resolution - like it would be without pixel ratio applied - 4800 pixels as per example above.

If we'd rather export an image down-sampled to the view pixels (2400), we can set maintainPixelRatio option for image formats to true:

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

Sizing exported image

Image formats (pngOptions and jpgOptions) have four options that can modify size of the exported image:

OptionComment
minWidthExported image will not be smaller than X pixels in width.
maxWidthExported image will not be bigger than X pixels in width.
minHeightExported image will not be smaller than X pixels in height.
maxHeightExported image will not be bigger than X pixels in height.

When exporting an image, plugin will size the image to fit into all of these constraints that are set in options.

The image will still maintain its width/height ratio.

let exporting = am5plugins_exporting.Exporting.new(root, {
  menu: am5plugins_exporting.ExportingMenu.new(root, {}),
  pngOptions: {
    minWidth: 1000,
    maxWidth: 2000
  },
  jpgOptions: {
    minWidth: 1000,
    maxWidth: 2000
  }
});
var exporting = am5plugins_exporting.Exporting.new(root, {
  menu: am5plugins_exporting.ExportingMenu.new(root, {}),
  pngOptions: {
    minWidth: 1000,
    maxWidth: 2000
  },
  jpgOptions: {
    minWidth: 1000,
    maxWidth: 2000
  }
});

The above will ensure that exported image is within 1000 and 2000 pixels in width.

If the source chart is narrower than 1000 pixels, export will re-render it to be exactly 1000 pixels wide.

Similarly, if it is wider than 2000 pixels, export will re-render it to 2000 pixels.