Pie Chart
Demo source
JavaScript TypeScript / ES6 ...
<style >
#chartdiv {
width : 100% ;
height : 500px ;
}
</style >
<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 >
<script >
am4core.ready (function ( ) {
am4core.useTheme (am4themes_animated);
var chart = am4core.create ("chartdiv" , am4charts.PieChart );
chart.data = [ {
"country" : "Lithuania" ,
"litres" : 501.9
}, {
"country" : "Czechia" ,
"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
}
];
var pieSeries = chart.series .push (new am4charts.PieSeries ());
pieSeries.dataFields .value = "litres" ;
pieSeries.dataFields .category = "country" ;
pieSeries.slices .template .stroke = am4core.color ("#fff" );
pieSeries.slices .template .strokeOpacity = 1 ;
pieSeries.hiddenState .properties .opacity = 1 ;
pieSeries.hiddenState .properties .endAngle = -90 ;
pieSeries.hiddenState .properties .startAngle = -90 ;
chart.hiddenState .properties .radius = am4core.percent (0 );
});
</script >
<div id ="chartdiv" > </div >
import * as am4core from "@amcharts/amcharts4/core" ;
import * as am4charts from "@amcharts/amcharts4/charts" ;
import am4themes_animated from "@amcharts/amcharts4/themes/animated" ;
am4core.useTheme (am4themes_animated);
let chart = am4core.create ("chartdiv" , am4charts.PieChart );
chart.data = [ {
"country" : "Lithuania" ,
"litres" : 501.9
}, {
"country" : "Czechia" ,
"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
}
];
let pieSeries = chart.series .push (new am4charts.PieSeries ());
pieSeries.dataFields .value = "litres" ;
pieSeries.dataFields .category = "country" ;
pieSeries.slices .template .stroke = am4core.color ("#fff" );
pieSeries.slices .template .strokeOpacity = 1 ;
pieSeries.hiddenState .properties .opacity = 1 ;
pieSeries.hiddenState .properties .endAngle = -90 ;
pieSeries.hiddenState .properties .startAngle = -90 ;
chart.hiddenState .properties .radius = am4core.percent (0 );