// Create root element // https://www.amcharts.com/docs/v5/getting-started/#Root_element var root = am5.Root.new("$CHART$"); // Set themes // https://www.amcharts.com/docs/v5/concepts/themes/ root.setThemes([ am5themes_Animated.new(root) ]); // Create wrapper container var container = root.container.children.push(am5.Container.new(root, { width: am5.percent(100), height: am5.percent(100), layout: root.verticalLayout })); // Create series // https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding var series = container.children.push(am5hierarchy.Partition.new(root, { singleBranchOnly: false, orientation: "vertical", downDepth: 1, initialDepth: 10, 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: "First", children: [ { name: "A1", value: 100 }, { name: "A2", value: 60 }, { name: "A3", value: 30 } ] }, { name: "Second", children: [ { name: "B1", value: 135 }, { name: "B2", value: 98 }, { name: "B3", value: 56 } ] }, { name: "Third", children: [ { name: "C1", value: 335 }, { name: "C2", value: 148 }, { name: "C3", value: 126 }, { name: "C4", value: 26 } ] }, { name: "Fourth", children: [ { name: "D1", value: 415 }, { name: "D2", value: 148 }, { name: "D3", value: 89 }, { name: "D4", value: 64 }, { name: "D5", value: 16 } ] }, { name: "Fifth", children: [ { name: "E1", value: 687 }, { name: "E2", value: 148 } ] }] }; series.data.setAll([data]); series.set("selectedDataItem", series.dataItems[0]); // Make stuff animate on load series.appear(1000, 100);