Single-Level Packed Circles
This demo shows a packed circle chart as a visual representation of single-level data, where each circle corresponds to a distinct category, and the size of each circle reflects the quantitative value associated with that category. This chart allows for a clear and compact presentation of data distribution, making it easy to compare the relative magnitudes of individual data points within a single level.
Key implementation details
This chart still uses hierarchy-based data with “Root” level and the second level containing the rest of the nodes.
The root level is hidden by using topDepth: 1 setting.
This chart is added to a Zoomable Container, so you can pan, zoom-in and zoom-out this chart using mouse wheel, pinch-zoom or zoom tools on the bottom-right.
Related tutorials
Demo source
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 550px;
}
</style>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/hierarchy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<!-- Chart code -->
<script>
am5.ready(function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
var zoomableContainer = root.container.children.push(
am5.ZoomableContainer.new(root, {
width: am5.p100,
height: am5.p100,
wheelable: true,
pinchZoom: true
})
);
var zoomTools = zoomableContainer.children.push(am5.ZoomTools.new(root, {
target: zoomableContainer
}));
// Create series
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
var series = zoomableContainer.contents.children.push(am5hierarchy.Pack.new(root, {
maskContent:false, //!important with zoomable containers
topDepth: 1,
valueField: "value",
categoryField: "name",
childDataField: "children"
}));
// Generate and set data
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Setting_data
var data = {
name: "Root",
children: [
{ name: "1", value: 1268 },
{ name: "2", value: 553 },
{ name: "3", value: 1300 },
{ name: "4", value: 831 },
{ name: "5", value: 1009 },
{ name: "6", value: 542 },
{ name: "7", value: 1226 },
{ name: "8", value: 721 },
{ name: "9", value: 2790 },
{ name: "10", value: 1377 },
{ name: "11", value: 1055 },
{ name: "12", value: 614 },
{ name: "13", value: 1242 },
{ name: "14", value: 602 },
{ name: "15", value: 698 },
{ name: "16", value: 463 },
{ name: "17", value: 1067 },
{ name: "18", value: 1227 },
{ name: "19", value: 5713 },
{ name: "20", value: 1377 },
{ name: "21", value: 595 },
{ name: "22", value: 1103 },
{ name: "23", value: 1333 },
{ name: "24", value: 625 },
{ name: "25", value: 562 },
{ name: "26", value: 731 },
{ name: "27", value: 725 },
{ name: "28", value: 1142 },
{ name: "29", value: 1002 },
{ name: "30", value: 1231 },
{ name: "31", value: 1290 },
{ name: "32", value: 811 },
{ name: "33", value: 1086 },
{ name: "34", value: 404 },
{ name: "35", value: 545 },
{ name: "36", value: 1011 },
{ name: "37", value: 562 },
{ name: "38", value: 1082 },
{ name: "39", value: 504 },
{ name: "40", value: 916 },
{ name: "41", value: 903 },
{ name: "42", value: 507 },
{ name: "43", value: 808 },
{ name: "44", value: 520 },
{ name: "45", value: 615 },
{ name: "46", value: 922 },
{ name: "47", value: 797 },
{ name: "48", value: 502 },
{ name: "49", value: 912 },
{ name: "50", value: 1309 },
{ name: "51", value: 767 },
{ name: "52", value: 1388 },
{ name: "53", value: 1288 },
{ name: "54", value: 1370 },
{ name: "55", value: 1078 },
{ name: "56", value: 604 },
{ name: "57", value: 797 },
{ name: "58", value: 1151 },
{ name: "59", value: 8190 },
{ name: "60", value: 541 },
{ name: "61", value: 1284 },
{ name: "62", value: 1338 },
{ name: "63", value: 1097 },
{ name: "64", value: 867 },
{ name: "65", value: 1017 },
{ name: "66", value: 727 },
{ name: "67", value: 1220 },
{ name: "68", value: 1274 },
{ name: "69", value: 1039 },
{ name: "70", value: 1181 },
{ name: "71", value: 1089 },
{ name: "72", value: 1055 },
{ name: "73", value: 1061 },
{ name: "74", value: 1233 },
{ name: "75", value: 504 },
{ name: "76", value: 870 },
{ name: "77", value: 936 },
{ name: "78", value: 1090 },
{ name: "79", value: 785 },
{ name: "80", value: 1173 },
{ name: "81", value: 625 },
{ name: "82", value: 945 },
{ name: "83", value: 1169 },
{ name: "84", value: 507 },
{ name: "85", value: 868 },
{ name: "86", value: 1235 },
{ name: "87", value: 949 },
{ name: "88", value: 489 },
{ name: "89", value: 814 },
{ name: "90", value: 450 },
{ name: "91", value: 650 },
{ name: "92", value: 947 },
{ name: "93", value: 1258 },
{ name: "94", value: 1194 },
{ name: "95", value: 668 },
{ name: "96", value: 499 },
{ name: "97", value: 1370 },
{ name: "98", value: 1118 },
{ name: "99", value: 1170 },
{ name: "100", value: 433 },
{ name: "101", value: 1128 },
{ name: "102", value: 1145 },
{ name: "103", value: 529 },
{ name: "104", value: 1124 },
{ name: "105", value: 1023 },
{ name: "106", value: 563 },
{ name: "107", value: 885 },
{ name: "108", value: 427 },
{ name: "109", value: 778 },
{ name: "110", value: 442 },
{ name: "111", value: 426 },
{ name: "112", value: 740 },
{ name: "113", value: 821 },
{ name: "114", value: 411 },
{ name: "115", value: 1051 },
{ name: "116", value: 1181 },
{ name: "117", value: 838 },
{ name: "118", value: 1316 },
{ name: "119", value: 1037 },
{ name: "120", value: 938 },
{ name: "121", value: 557 },
{ name: "122", value: 976 },
{ name: "123", value: 682 },
{ name: "124", value: 589 },
{ name: "125", value: 847 },
{ name: "126", value: 848 },
{ name: "127", value: 1345 },
{ name: "128", value: 995 },
{ name: "129", value: 1336 },
{ name: "130", value: 495 },
{ name: "131", value: 1036 },
{ name: "132", value: 1074 },
{ name: "133", value: 9812 },
{ name: "134", value: 1234 },
{ name: "135", value: 1209 },
{ name: "136", value: 1174 },
{ name: "137", value: 983 },
{ name: "138", value: 526 },
{ name: "139", value: 922 },
{ name: "140", value: 835 },
{ name: "141", value: 862 },
{ name: "142", value: 1190 },
{ name: "143", value: 1040 },
{ name: "144", value: 430 },
{ name: "145", value: 1369 },
{ name: "146", value: 754 },
{ name: "147", value: 1102 },
{ name: "148", value: 1006 },
{ name: "149", value: 1293 },
{ name: "150", value: 839 },
{ name: "151", value: 744 },
{ name: "152", value: 845 },
{ name: "153", value: 1014 },
{ name: "154", value: 1166 },
{ name: "155", value: 591 },
{ name: "156", value: 1206 },
{ name: "157", value: 1129 },
{ name: "158", value: 1124 },
{ name: "159", value: 1280 },
{ name: "160", value: 1062 },
{ name: "161", value: 644 },
{ name: "162", value: 1051 },
{ name: "163", value: 5094 },
{ name: "164", value: 419 },
{ name: "165", value: 1280 },
{ name: "166", value: 1206 },
{ name: "167", value: 918 },
{ name: "168", value: 927 },
{ name: "169", value: 1235 },
{ name: "170", value: 1069 },
{ name: "171", value: 1274 },
{ name: "172", value: 624 },
{ name: "173", value: 1146 },
{ name: "174", value: 1233 },
{ name: "175", value: 428 },
{ name: "176", value: 1326 },
{ name: "177", value: 948 },
{ name: "178", value: 806 },
{ name: "179", value: 819 },
{ name: "180", value: 419 },
{ name: "181", value: 814 },
{ name: "182", value: 1203 },
{ name: "183", value: 646 },
{ name: "184", value: 774 },
{ name: "185", value: 1056 },
{ name: "186", value: 669 },
{ name: "187", value: 1293 },
{ name: "188", value: 1365 },
{ name: "189", value: 1296 },
{ name: "190", value: 1205 },
{ name: "191", value: 858 },
{ name: "192", value: 802 },
{ name: "193", value: 415 },
{ name: "194", value: 958 },
{ name: "195", value: 1058 },
{ name: "196", value: 848 },
{ name: "197", value: 1062 },
{ name: "198", value: 418 },
{ name: "199", value: 1248 },
{ name: "200", value: 763 },
{ name: "201", value: 556 },
{ name: "202", value: 1025 },
{ name: "203", value: 1173 },
{ name: "204", value: 621 },
{ name: "205", value: 827 },
{ name: "206", value: 1185 },
{ name: "207", value: 921 },
{ name: "208", value: 709 },
{ name: "209", value: 1233 },
{ name: "210", value: 1117 },
{ name: "211", value: 566 },
{ name: "212", value: 1196 },
{ name: "213", value: 925 },
{ name: "214", value: 1189 },
{ name: "215", value: 1233 },
{ name: "216", value: 1181 },
{ name: "217", value: 683 },
{ name: "218", value: 1022 },
{ name: "219", value: 1380 },
{ name: "220", value: 1007 },
{ name: "221", value: 873 },
{ name: "222", value: 1090 },
{ name: "223", value: 496 },
{ name: "224", value: 1093 },
{ name: "225", value: 889 },
{ name: "226", value: 617 },
{ name: "227", value: 1063 },
{ name: "228", value: 647 },
{ name: "229", value: 512 },
{ name: "230", value: 1381 },
{ name: "231", value: 523 },
{ name: "232", value: 805 },
{ name: "233", value: 499 },
{ name: "234", value: 1252 },
{ name: "235", value: 1083 },
{ name: "236", value: 654 },
{ name: "237", value: 1315 },
{ name: "238", value: 854 },
{ name: "239", value: 1175 },
{ name: "240", value: 893 },
{ name: "241", value: 1353 },
{ name: "242", value: 1159 },
{ name: "243", value: 441 },
{ name: "244", value: 1093 },
{ name: "245", value: 986 },
{ name: "246", value: 1300 },
{ name: "247", value: 1359 },
{ name: "248", value: 580 },
{ name: "249", value: 447 },
{ name: "250", value: 645 },
{ name: "251", value: 1256 },
{ name: "252", value: 941 },
{ name: "253", value: 920 },
{ name: "254", value: 11046 },
{ name: "255", value: 991 },
{ name: "256", value: 467 },
{ name: "257", value: 970 },
{ name: "258", value: 1253 },
{ name: "259", value: 1312 },
{ name: "260", value: 1383 },
{ name: "261", value: 1253 },
{ name: "262", value: 482 },
{ name: "263", value: 1002 },
{ name: "264", value: 1264 },
{ name: "265", value: 490 },
{ name: "266", value: 9413 },
{ name: "267", value: 728 },
{ name: "268", value: 414 },
{ name: "269", value: 1251 },
{ name: "270", value: 1305 },
{ name: "271", value: 442 },
{ name: "272", value: 1261 },
{ name: "273", value: 686 },
{ name: "274", value: 501 },
{ name: "275", value: 1365 },
{ name: "276", value: 1037 },
{ name: "277", value: 532 },
{ name: "278", value: 763 },
{ name: "279", value: 707 },
{ name: "280", value: 485 },
{ name: "281", value: 1320 },
{ name: "282", value: 1047 },
{ name: "283", value: 947 },
{ name: "284", value: 1371 },
{ name: "285", value: 534 },
{ name: "286", value: 704 },
{ name: "287", value: 1143 },
{ name: "288", value: 415 },
{ name: "289", value: 940 },
{ name: "290", value: 1160 },
{ name: "291", value: 407 },
{ name: "292", value: 558 },
{ name: "293", value: 1104 },
{ name: "294", value: 701 },
{ name: "295", value: 839 },
{ name: "296", value: 956 },
{ name: "297", value: 790 },
{ name: "298", value: 1048 },
{ name: "299", value: 1013 },
{ name: "300", value: 865 },
{ name: "301", value: 950 },
{ name: "302", value: 652 },
{ name: "303", value: 1392 },
{ name: "304", value: 454 },
{ name: "305", value: 692 },
{ name: "306", value: 806 },
{ name: "307", value: 461 },
{ name: "308", value: 757 },
{ name: "309", value: 484 },
{ name: "310", value: 1056 },
{ name: "311", value: 1343 },
{ name: "312", value: 416 },
{ name: "313", value: 979 },
{ name: "314", value: 564 },
{ name: "315", value: 1176 },
{ name: "316", value: 454 },
{ name: "317", value: 587 },
{ name: "318", value: 536 },
{ name: "319", value: 1225 },
{ name: "320", value: 834 },
{ name: "321", value: 983 },
{ name: "322", value: 1020 },
{ name: "323", value: 994 },
{ name: "324", value: 836 },
{ name: "325", value: 836 },
{ name: "326", value: 1242 },
{ name: "327", value: 1343 },
{ name: "328", value: 1019 },
{ name: "329", value: 733 },
{ name: "330", value: 1266 },
{ name: "331", value: 907 },
{ name: "332", value: 1154 },
{ name: "333", value: 1350 },
{ name: "334", value: 1108 },
{ name: "335", value: 1181 },
{ name: "336", value: 1036 },
{ name: "337", value: 598 },
{ name: "338", value: 974 },
{ name: "339", value: 1242 },
{ name: "340", value: 542 },
{ name: "341", value: 1304 },
{ name: "342", value: 1108 },
{ name: "343", value: 1318 },
{ name: "344", value: 664 },
{ name: "345", value: 707 },
{ name: "346", value: 656 },
{ name: "347", value: 1394 },
{ name: "348", value: 533 },
{ name: "349", value: 917 },
{ name: "350", value: 693 },
{ name: "351", value: 708 },
{ name: "352", value: 1375 },
{ name: "353", value: 589 },
{ name: "354", value: 617 },
{ name: "355", value: 1337 },
{ name: "356", value: 1267 },
{ name: "357", value: 1049 },
{ name: "358", value: 1025 },
{ name: "359", value: 428 },
{ name: "360", value: 1186 },
{ name: "361", value: 1170 },
{ name: "362", value: 1153 },
{ name: "363", value: 654 },
{ name: "364", value: 541 },
{ name: "365", value: 594 },
{ name: "366", value: 526 },
{ name: "367", value: 1313 },
{ name: "368", value: 1061 },
{ name: "369", value: 889 },
{ name: "370", value: 547 },
{ name: "371", value: 852 },
{ name: "372", value: 473 },
{ name: "373", value: 932 },
{ name: "374", value: 896 },
{ name: "375", value: 1220 },
{ name: "376", value: 932 },
{ name: "377", value: 408 },
{ name: "378", value: 655 },
{ name: "379", value: 559 },
{ name: "380", value: 468 },
{ name: "381", value: 1160 },
{ name: "382", value: 540 },
{ name: "383", value: 1250 },
{ name: "384", value: 1063 },
{ name: "385", value: 454 },
{ name: "386", value: 684 },
{ name: "387", value: 1350 },
{ name: "388", value: 1185 },
{ name: "389", value: 1125 },
{ name: "390", value: 1334 },
{ name: "391", value: 1319 },
{ name: "392", value: 461 },
{ name: "393", value: 932 },
{ name: "394", value: 1312 },
{ name: "395", value: 596 },
{ name: "396", value: 1086 },
{ name: "397", value: 826 },
{ name: "398", value: 1291 },
{ name: "399", value: 1021 },
{ name: "400", value: 743 },
{ name: "401", value: 1394 },
{ name: "402", value: 1191 },
{ name: "403", value: 883 },
{ name: "404", value: 1128 },
{ name: "405", value: 527 },
{ name: "406", value: 1384 },
{ name: "407", value: 415 },
{ name: "408", value: 672 },
{ name: "409", value: 552 },
{ name: "410", value: 692 },
{ name: "411", value: 409 },
{ name: "412", value: 1263 },
{ name: "413", value: 451 },
{ name: "414", value: 1090 },
{ name: "415", value: 1133 },
{ name: "416", value: 1139 },
{ name: "417", value: 842 },
{ name: "418", value: 996 },
{ name: "419", value: 1326 },
{ name: "420", value: 1095 },
{ name: "421", value: 753 },
{ name: "422", value: 1323 },
{ name: "423", value: 1255 },
{ name: "424", value: 1241 },
{ name: "425", value: 979 },
{ name: "426", value: 769 },
{ name: "427", value: 1054 },
{ name: "428", value: 943 },
{ name: "429", value: 1301 },
{ name: "430", value: 573 },
{ name: "431", value: 755 },
{ name: "432", value: 676 },
{ name: "433", value: 1363 },
{ name: "434", value: 981 },
{ name: "435", value: 714 },
{ name: "436", value: 546 },
{ name: "437", value: 849 },
{ name: "438", value: 767 },
{ name: "439", value: 730 },
{ name: "440", value: 852 },
{ name: "441", value: 454 },
{ name: "442", value: 1207 },
{ name: "443", value: 495 },
{ name: "444", value: 490 },
{ name: "445", value: 671 },
{ name: "446", value: 687 },
{ name: "447", value: 1233 },
{ name: "448", value: 1055 },
{ name: "449", value: 1264 },
{ name: "450", value: 1325 },
{ name: "451", value: 478 },
{ name: "452", value: 1126 },
{ name: "453", value: 1181 },
{ name: "454", value: 837 },
{ name: "455", value: 942 },
{ name: "456", value: 1258 },
{ name: "457", value: 666 },
{ name: "458", value: 1146 },
{ name: "459", value: 967 },
{ name: "460", value: 1172 },
{ name: "461", value: 1366 },
{ name: "462", value: 1240 },
{ name: "463", value: 853 },
{ name: "464", value: 1035 },
{ name: "465", value: 508 },
{ name: "466", value: 705 },
{ name: "467", value: 1120 },
{ name: "468", value: 480 },
{ name: "469", value: 1259 },
{ name: "470", value: 755 },
{ name: "471", value: 1127 },
{ name: "472", value: 970 },
{ name: "473", value: 892 },
{ name: "474", value: 404 },
{ name: "475", value: 1016 },
{ name: "476", value: 732 },
{ name: "477", value: 1045 },
{ name: "478", value: 419 },
{ name: "479", value: 1040 },
{ name: "480", value: 1285 },
{ name: "481", value: 859 },
{ name: "482", value: 811 },
{ name: "483", value: 1068 },
{ name: "484", value: 1088 },
{ name: "485", value: 912 },
{ name: "486", value: 1283 },
{ name: "487", value: 1155 },
{ name: "488", value: 1212 },
{ name: "489", value: 807 },
{ name: "490", value: 623 },
{ name: "491", value: 959 },
{ name: "492", value: 1247 },
{ name: "493", value: 835 },
{ name: "494", value: 445 },
{ name: "495", value: 1348 },
{ name: "496", value: 584 },
{ name: "497", value: 1031 },
{ name: "498", value: 938 },
{ name: "499", value: 750 },
{ name: "500", value: 494 }
]
};
series.data.setAll([data]);
// Make stuff animate on load
series.appear(1000, 100);
}); // end am5.ready()
</script>
<!-- HTML -->
<div id="chartdiv"></div>