<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> <script src="https://cdn.amcharts.com/lib/4/core.js"></script> <script src="https://cdn.amcharts.com/lib/4/charts.js"></script> <script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script> <div id="chartdiv"></div> <a href="https://docs.amcharts.com/3/javascriptcharts/AmPieChart">info</a>" </div> </div>

#chartdiv { width: 100%; height: 350px; }

am4core.ready(() => { am4core.useTheme(am4themes_animated); let chart = am4core.create("chartdiv", am4charts.PieChart3D); chart.hiddenState.properties.opacity = 0; chart.innerRadius = am4core.percent(30); chart.depth = 100; chart.legend = new am4charts.Legend(); chart.data = [ { category: "Foo", value: 40 }, { category: "Bar", value: 30 }, { category: "Baz", value: 20 }, { category: "Qux", value: 10 } ]; let series = chart.series.push(new am4charts.PieSeries3D()); series.dataFields.value = "value"; series.dataFields.depthValue = "value"; series.dataFields.category = "category"; series.slices.template.cornerRadius = 5; series.colors.step = 3; let as = series.slices.template.states.getKey("active"); as.properties.shiftRadius = 0; as.properties.dy = -30; });