Exporting charts and maps: Quick Intro – amCharts Version 3 Documentation

Unsupported: IE9 and lower are not supported by the export plugin due browser incompatibilities!

Since you made it to your first chart you probably want to go one step further and offer your users to download those. In this tutorial we will guide you through a few easy steps to get the export functionality working.

First, include the necessary files

First of all you need to include the resources. Since the Version 3.14 of all amCharts products, the export plugin is already included within the download package. In case you don't have it, you can download the plugin separately on the github page or redownload the package from our official download page. Once you have the plugin you only need to include following resources in your <head> tag in your HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script src="https://www.amcharts.com/lib/3/plugins/export/export.js" type="text/javascript"></script>
    <link href="https://www.amcharts.com/lib/3/plugins/export/export.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">
      ...
    </script>
  </head>
  <body>
    <div id="chartid"></div>
  </body>
</html>

Enable the plugin

When the resources have been included, the only missing step is to enable the plugin itself. The plugin shows an easy touch menu button on the top right corner of your chart and offers everything it has to offer - that's it.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script src="https://www.amcharts.com/lib/3/plugins/export/export.js" type="text/javascript"></script>
    <link href="https://www.amcharts.com/lib/3/plugins/export/export.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">
      var chart = AmCharts.makeChart( "chartdiv", {
        ...
        "export": {
          "enabled": true
        }
      } );
    </script>
  </head>
  <body>
    <div id="chartid"></div>
  </body>
</html>

See the Pen #12500 by amCharts (@amcharts) on CodePen.11061

Enabling in object-based chart setup

If you're still using object-based chart setup, assign export-related config object to chart object's export property:

var chart = new AmCharts.AmSerialChart();
...
chart["export"] = {
  "enabled": true
};

Tune it to your needs

In case you want to cherry-pick, which options to enable, you can easily modify the menu items be modifying the menu array. The array elements can be strings defining export format (such as "JPG" or "SVG") or an action (i.e. "DRAW"):

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script src="https://www.amcharts.com/lib/3/plugins/export/export.js" type="text/javascript"></script>
    <link href="https://www.amcharts.com/lib/3/plugins/export/export.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">
      var chart = AmCharts.makeChart( "chartdiv", {
        ...
        "export": {
          "enabled": true,
          "menu": [{
            "format": "JPG",
            "label": "Save as JPG",
            "title": "Export chart to JPG",
          }, "PNG"]
        }
      } );
    </script>
  </head>
  <body>
    <div id="chartid"></div>
  </body>
</html>

See the Pen #12500 by amCharts (@amcharts) on CodePen.11061

Conclusion

With just few minor extra steps you can enable the export feature on your charts, which your users can use to save those charts as images or extract it's data to the local file system with no server side-coding whatsoever. If you want to go even further we wrote another tutorial which describes how to export silently with no user interactions, which can be used for email reports or combine multiple chart instances in one PDF to create company reports.