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!