3D Charts in SharePoint

How to create 3D Pie Chart in SharePoint

Create a Page and add Script Editor web part to it and paste the below code.

Code:

<style>
#chartdiv {
  width: 100%;
  height: 500px;
}
</style>

<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script> 
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.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" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>


<script type="text/javascript">
$(document).ready(function () {
GetListitemsitems();
});

function GetListitemsitems() {

        $.ajax({
           url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/GetByTitle('ProductSales')/items",
            type: "GET",
            headers: { "Accept": "application/json;odata=verbose" }, // return data format
            success: function (data) {
               console.log(data.d.results);             
                var testdata=[];             
              $.each(data.d.results, function (key, value) {
                 testdata.push({"country":value.CarName,"value":Number(value.TotalSales)});

         
               });
 
   var chart = AmCharts.makeChart( "chartdiv", {
  "type": "pie",
  "theme": "light",
  "dataProvider": testdata,
  "valueField": "value",
  "titleField": "country",
  "outlineAlpha": 0.4,
  "depth3D": 15,
  "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
  "angle": 30,
  "export": {
    "enabled": true
  }
} );
               

            },

            error: function (error) {
                alert(JSON.stringify(error));
            }
        });

    }


</script>


<div id="chartdiv"></div>