amchart in jupyter

amchart_in_jupyter.ipynb

%%javascript

require.config({
  paths: {
     d3: '//cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min',
     am5: '//www.amcharts.com/lib/5/index',
     am5percent: '//www.amcharts.com/lib/5/percent',
     am5plugins_exporting: '//www.amcharts.com/lib/5/plugins/exporting',
     'am5themes_Animated': '//www.amcharts.com/lib/5/themes/Animated',
  },
  shim: {
     am5: {
          init: function () {
              return am5;
          }
      },
      am5percent: {
          deps: ['am5'],
          exports: 'am5percent',
          init: function () {
              return am5percent;
          }
      },
      am5plugins_exporting: {
          deps: ['am5'],
          exports: 'am5plugins_exporting',
          init: function () {
              return am5plugins_exporting;
          }
      },
      'am5themes_Animated': {
          deps: ['am5'],
          init: function () {
              return am5themes_Animated;
          }
      }
  }
});

element.append('<div id="chartdiv" style="height: 500px;"></div>');

require(['am5', 'am5percent', 'am5themes_Animated', 'am5plugins_exporting'], 
        function (am5, am5percent, am5themes_Animated, am5plugins_exporting) {
    var root = am5.Root.new("chartdiv"); 

    root.setThemes([
      am5themes_Animated.new(root)
    ]);

    var chart = root.container.children.push(
        am5percent.PieChart.new(root, {})
    );
    
    var series = chart.series.push(
        am5percent.PieSeries.new(root, {
            name: "Series",
            categoryField: "country",
            valueField: "litres"
        })
    );

    // Define data
    series.data.setAll([{
        "country": "Lithuania",
        "litres": 9501.9
    }, {
        "country": "Czech Republic",
        "litres": 301.9
    }, {
        "country": "Ireland",
        "litres": 201.1
    }, {
        "country": "Germany",
        "litres": 165.8
    }, {
        "country": "Australia",
        "litres": 139.9
    }, {
        "country": "Austria",
        "litres": 128.3
    }, {
        "country": "UK",
        "litres": 99
    }, {
        "country": "Belgium",
        "litres": 60
    }, {
        "country": "The Netherlands",
        "litres": 50
    }]);
    
    var exportings = am5plugins_exporting.Exporting.new(root, {
    menu: am5plugins_exporting.ExportingMenu.new(root, {}),
        pngOptions: {
            maintainPixelRatio: true
        },
    });
    exportings.export()
}, function (err) {
    console.log(err);
});

@hkmoon does the above script export automatically? please verify this. I was getting with my code same but its does not export automatically. thanks.

@ArsalanAli915 You can use download() or print() since this is based on web.
https://www.amcharts.com/docs/v5/concepts/exporting/exporting-api/#initiating-download-print

It cannot access to local file system in the web. However, you can pass a raw format binary data to the python context and save it locally.

exporting.export("png").then(function(imgData) {
  document.getElementById("myImage").src = imgData;
});