amCharts V4: Variable height 3D pie chart
@import url("https://fonts.googleapis.com/css?family=Archivo+Narrow");
body {
font-family: "Archivo Narrow";
}
#chartdiv {
width: 100%;
height: 98vh;
}
/**
* --------------------------------------------------------
* This demo was created using amCharts V4 preview release.
*
* V4 is the latest installement in amCharts data viz
* library family, to be released in the first half of
* 2018.
*
* For more information and documentation visit:
* https://www.amcharts.com/docs/v4/
* --------------------------------------------------------
*/
amcharts4.ready(function() {
amcharts4.useTheme(amcharts4.themes.animated);
var chart = amcharts4.create("chartdiv", amcharts4.pie3d.PieChart3D);
chart.data = [
{
country: "Lithuania",
litres: 501.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
}
];
chart.innerRadius = amcharts4.percent(40);
chart.depth = 120;
chart.legend = new amcharts4.pie3d.Legend();
chart.legend.position = "right";
var series = chart.series.push(new amcharts4.pie3d.PieSeries3D());
series.dataFields.value = "litres";
series.dataFields.depthValue = "litres";
series.dataFields.category = "country";
series.slices.template.cornerRadius = 5;
series.colors.step = 3;
});
<script src="https://www.amcharts.com/lib/4/amcharts.js?x"></script>
<script src="https://www.amcharts.com/lib/4/pie3d.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>