/** * --------------------------------------- * This demo was created using amCharts 4. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v4/ * --------------------------------------- */ // Create chart instance var chart = am4core.create("chartdiv", am4charts.PieChart); // Add data 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 }, { "country": "Belgium", "litres": 60 }, { "country": "The Netherlands", "litres": 50 }]; chart.legend = new am4charts.Legend(); chart.legend.labels.template.text = "[bold {color}]{name} : {value} [/]"; // Add and configure Series var pieSeries = chart.series.push(new am4charts.PieSeries()); pieSeries.dataFields.value = "litres"; pieSeries.dataFields.category = "country";

 body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } #chartdiv { width: 100%; height: 400px; }

 <script src="https://cdn.amcharts.com/lib/4/core.js"></script> <script src="https://cdn.amcharts.com/lib/4/charts.js"></script> <div id="chartdiv"></div>