Pie Chart With Legend

<h2>Legend</h2> Legend in charts is completely automated. You just add it and the chart takes care of the rest, including generating items for each slice, as well as functionality to toggle/hover slices. The legend can also be placed anywhere on the chart, or even outside it. [amb href="https://www.amcharts.com/docs/v4/concepts/legend/"]More about legend[/amb] <h2>Hover state &amp; filters</h2> amCharts 4 comes with a garden variety of filters, such as drop shadow. This demos shows how we can add a drop shadow filter automatically to the hovered slice, using <code>"hover"</code> state. [amb href="https://www.amcharts.com/docs/v4/concepts/states/"]More about states[/amb]

by amcharts

HTML

<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>

CSS

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: 500px;
}

JavaScript

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.PieChart);

// Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "litres";
pieSeries.dataFields.category = "country";


chart.data = [{
  "country": "Lithuania",
  "litres": 501.9
},{
  "country": "Germany",
  "litres": 165.8
}, {
  "country": "Australia",
  "litres": 139.9
}, {
  "country": "Austria",
  "litres": 128.3
}, {
  "country": "UK",
  "litres": 99
}, {
  "country": "Belgium",
  "litres": 60
}];

// Add a legend

chart.legend = new am4charts.Legend();
chart.legend.position = 'bottom';
// hide the value in the legend
chart.legend.valueLabels.template.disabled = true;
// this makes all markers squares
chart.legend.useDefaultMarker = true;
chart.legend.markers.template.width = 14;
chart.legend.markers.template.height = 14;

//pieSeries.slices.template.strokeWidth = 2;
//pieSeries.slices.template.stroke = am4core.color("red");

const markers = chart.legend.markers.template.children.getIndex(0);
markers.strokeWidth = 5;
markers.strokeOpacity = 1;
// @ts-ignore
markers.background.adapter.add('strokeOpacity', (strokeColor, target) => {
  return 1;
});
markers.background.adapter.add('strokeWidth', (strokeColor, target) => {
  return 2;
});
markers.background.adapter.add('stroke', (strokeColor, target) => {
  return am4core.color("red");
});