AmCharts 4 Garrafa

Pictorial fraction chart is a great way to visualize fractions of a whole using an image depicting that whole as a visual aid. For example, you can visually demonstrate the ingredients of a product using the product's image as a container.

by Rogério Saraceni

HTML

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv-garrafa-1"></div>

<!-- https://www.amcharts.com/docs/v4/chart-types/sliced-chart/ -->

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv-garrafa-1 {
  width: 70px;
  height: 200px;
  background: #ddd;
}

JavaScript

am4core.useTheme(am4themes_animated);

var iconPath = "m592.2-42.161c-6.7308 0-12.846 0.67892-17.268 1.7812-3.3164 0.82675-5.6779 1.903-6.6555 3.0938-0.32589 0.39692-0.5214 0.79764-0.5214 1.2188 0.0549 0.86731-0.26251 1.8219-0.36805 2.5625 0 1.0999 0.67956 2.1623 1.8402 3.125-1.9466 5.4597-3.7621 10.054-2.515 15.125 0.35054 1.4254 2.3507 1.9574 2.7297 3.375 1.1876 4.4423-1.4411 11.621-2.0856 13.656-0.72116 2.2778-1.3692 4.5818-1.9322 6.9062-0.56303 2.3244-1.0515 4.6601-1.4722 6.9687-0.42064 2.3086-0.81013 4.6135-1.1041 6.8438-0.29402 2.2303-0.49162 4.4106-0.67475 6.5-0.18312 2.0894-0.34142 4.0827-0.4294 5.9688-0.088 1.8861-0.11408 3.661-0.12268 5.2812 0 12.488 3.917 18.531 1.8402 27.5-3.6478 15.754-23.134 24.348-23.664 43.754-0.53057 19.406-0.45 36.244-0.44514 53.035 0.005 16.791-0.0659 33.534-0.14969 50.066-0.0837 16.531-0.18038 32.851-0.22709 48.795-0.0234 7.9718-0.38946 15.75-0.0248 23.613 0.35552 7.6659 0 0 2.155 22.926 0 12.701 21.745 23 51.094 23 29.35 0 51.033-10.299 51.033-23 2.0576-24.441 1.7144-16.274 2.0576-24.441 0.34229-8.1457-0.00011-16.305-0.00013-24.457-0.00005-16.316-0.00003-32.627 0.00004-48.947 0.00006-16.32 0.00016-32.643 0.00023-48.962 0.00008-16.319 0.00014-32.635-0.63995-51.834-0.6401-19.198-20.131-27.903-23.774-43.546-2.0914-8.9808 1.8709-15.012 1.8709-27.5-0.0694-1.5799-0.1973-3.318-0.33738-5.1875-0.14007-1.8695-0.33068-3.8777-0.55207-5.9688-0.22141-2.0911-0.45335-4.2867-0.76677-6.5312s-0.65732-4.5451-1.0735-6.875c-0.41614-2.3299-0.91193-4.684-1.4415-7.0312-0.52959-2.3473-1.0945-4.6722-1.7482-6.9688-0.57916-2.0346-3.1127-9.2117-1.9016-13.625 0.3805-1.3866 2.3249-1.9155 2.6683-3.3125 1.2486-5.0782-0.54116-9.684-2.4843-15.156 1.1527-0.95752 1.8402-1.9989 1.8402-3.0938-0.16841-0.93712-0.31823-1.7462-0.39873-2.5625 0-3.3689-10.891-6.0938-24.353-6.0938z"


var chart = am4core.create("chartdiv-garrafa-1", am4charts.SlicedChart);
chart.hiddenState.properties.opacity = 0; // this makes initial fade in effect
chart.paddingLeft =...