Uncaught TypeError: Cannot read property 'capture' of undefined

[dmitrystril]

Hi,

I'm trying to export a chart and got: Uncaught TypeError: Cannot read property 'capture' of undefined

I have a project bootstrapped with Create React App. Here's what I have in package.json: "react": "^16.4.1", "react-dom": "^16.4.1", "@amcharts/amcharts3-react": "^3.0.0", "amcharts3": "^3.21.13",

Here's how I perform export: `import 'amcharts3' import AmCharts from '@amcharts/amcharts3-react'

let chart = React.createElement(AmCharts.React, { style: { width: "100%", height: "500px" }, options: { "type": "pie", "theme": "light", "dataProvider": [{ "country": "Lithuania", "litres": 501.9 }, { "country": "Czech Republic", "litres": 301.9 }], "valueField": "litres", "titleField": "country", "export": { "enabled": true, "menu": [] } } })

chart["export"].capture({}, function() { this.toPNG({}, function(base64) { console.log(base64) }) }) `

I didn't add any amcharts-related scripts to index.html. I've tried but it didn't help. Here's the codepen with plain js where export is working: https://codepen.io/team/amcharts/pen/e487525e17e43a9d2de41d71f525b721 But I can't adopt it to my react app.

[RobbiesCode]

Hi,

You won't need amcharts3 as a dependency. amcharts3-react alone is sufficient.

Please include the amCharts 3 script tags in your index.html (including the Export Plugin files):

  <script src="https://www.amcharts.com/lib/3/amcharts.js">
  </script>
  <script src="https://www.amcharts.com/lib/3/serial.js">
  </script>
  <script src="https://www.amcharts.com/lib/3/themes/light.js">
  </script>

  <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js">
  </script>
  <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />

In your component index.js file, make sure to import import AmCharts from "@amcharts/amcharts3-react";

Then, add a function that calls the capture method of the Export Plugin:

function exportToPNG() {
  var chart = AmCharts.charts[0];

  chart["export"].capture({}, function() {
    this.toPNG({}, function(base64) {
      console.log(base64);
    });
  });
}

I have created a Codesandbox demo to demonstrate this: https://codesandbox.io/s/x3zrz3nk8o.

Let me know if this helps!