Sunburst chart with a legend including all nodes
This demo shows how we can include all nodes from all levels of a Sunburst chart into its legend.
let legend = container.children.push(am5.Legend.new(root, {}));
function addLegendItems(items) { legend.data.pushAll(items); am5.array.each(items, function(item) { if (item.get("children")) { addLegendItems(item.get("children")); } });}
addLegendItems(series.dataItems[0].get("children"));var legend = container.children.push(am5.Legend.new(root, {}));
function addLegendItems(items) { legend.data.pushAll(items); am5.array.each(items, function(item) { if (item.get("children")) { addLegendItems(item.get("children")); } });}
addLegendItems(series.dataItems[0].get("children"));The above code iterates through the whole hierarchy and pushes all data items from all nodes into legend’s data.
/** * --------------------------------------- * This demo was created using amCharts 5. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v5/ * --------------------------------------- */
// Create root element// https://www.amcharts.com/docs/v5/getting-started/#Root_elementvar root = am5.Root.new("chartdiv");
// Set themes// https://www.amcharts.com/docs/v5/concepts/themes/root.setThemes([am5themes_Animated.new(root)]);
// Create wrapper containervar 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/#Addingvar series = container.children.push( am5hierarchy.Sunburst.new(root, { singleBranchOnly: true, downDepth: 10, initialDepth: 10, topDepth: 1, innerRadius: am5.percent(30), valueField: "value", categoryField: "name", childDataField: "children" }));
series.data.setAll([ { name: "root", children: [ { name: "First", children: [ { name: "A1", value: 100 }, { name: "A2", value: 60 } ] },
{ name: "Second", children: [ { name: "B1", value: 135 }, { name: "B2", value: 98 } ] },
{ name: "Third", children: [ { name: "C1", children: [ { name: "EE1", value: 130 }, { name: "EE2", value: 87 }, { name: "EE3", value: 55 } ] },
{ name: "C2", value: 148 }, { name: "C3", children: [ { name: "CC1", value: 53 }, { name: "CC2", value: 30 } ] },
{ name: "C4", value: 26 } ] },
{ name: "Fourth", children: [ { name: "D1", value: 415 }, { name: "D2", value: 148 }, { name: "D3", value: 89 } ] },
{ name: "Fifth", children: [ { name: "E1", children: [ { name: "EE1", value: 33 }, { name: "EE2", value: 40 }, { name: "EE3", value: 89 } ] },
{ name: "E2", value: 148 } ] } ] }]);
series.selectDataItem(series.dataItems[0]);
var legend = container.children.push(am5.Legend.new(root, {}));
function addLegendItems(items) { legend.data.pushAll(items); am5.array.each(items, function (item) { if (item.get("children")) { addLegendItems(item.get("children")); } });}
addLegendItems(series.dataItems[0].get("children"));
// Make stuff animate on loadseries.appear(1000, 100);<div id="chartdiv"></div>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: 95vh;}{ "type": "SerialChartContainer", "settings": { "layout": { "type": "VerticalLayout" } }, "properties": { "series": [ "#series-0" ] }, "children": [ { "type": "Legend", "properties": { "data": [ "#series-0.dataItems.0.get('children').0", "#series-0.dataItems.0.get('children').1", "#series-0.dataItems.0.get('children').2", "#series-0.dataItems.0.get('children').3", "#series-0.dataItems.0.get('children').4", "#series-0.dataItems.0.get('children').0.get('children').0", "#series-0.dataItems.0.get('children').0.get('children').1", "#series-0.dataItems.0.get('children').1.get('children').0", "#series-0.dataItems.0.get('children').1.get('children').1", "#series-0.dataItems.0.get('children').2.get('children').0", "#series-0.dataItems.0.get('children').2.get('children').1", "#series-0.dataItems.0.get('children').2.get('children').2", "#series-0.dataItems.0.get('children').2.get('children').3", "#series-0.dataItems.0.get('children').2.get('children').0.get('children').0", "#series-0.dataItems.0.get('children').2.get('children').0.get('children').1", "#series-0.dataItems.0.get('children').2.get('children').0.get('children').2", "#series-0.dataItems.0.get('children').2.get('children').2.get('children').0", "#series-0.dataItems.0.get('children').2.get('children').2.get('children').1", "#series-0.dataItems.0.get('children').3.get('children').0", "#series-0.dataItems.0.get('children').3.get('children').1", "#series-0.dataItems.0.get('children').3.get('children').2", "#series-0.dataItems.0.get('children').4.get('children').0", "#series-0.dataItems.0.get('children').4.get('children').1", "#series-0.dataItems.0.get('children').4.get('children').0.get('children').0", "#series-0.dataItems.0.get('children').4.get('children').0.get('children').1", "#series-0.dataItems.0.get('children').4.get('children').0.get('children').2" ] } } ], "refs": [ { "data-0": [ { "name": "root", "children": [ { "name": "First", "children": [ { "name": "A1", "value": 100 }, { "name": "A2", "value": 60 } ], "__parse": true }, { "name": "Second", "children": [ { "name": "B1", "value": 135 }, { "name": "B2", "value": 98 } ], "__parse": true }, { "name": "Third", "children": [ { "name": "C1", "children": [ { "name": "EE1", "value": 130 }, { "name": "EE2", "value": 87 }, { "name": "EE3", "value": 55 } ], "__parse": true }, { "name": "C2", "value": 148 }, { "name": "C3", "children": [ { "name": "CC1", "value": 53 }, { "name": "CC2", "value": 30 } ], "__parse": true }, { "name": "C4", "value": 26 } ], "__parse": true }, { "name": "Fourth", "children": [ { "name": "D1", "value": 415 }, { "name": "D2", "value": 148 }, { "name": "D3", "value": 89 } ], "__parse": true }, { "name": "Fifth", "children": [ { "name": "E1", "children": [ { "name": "EE1", "value": 33 }, { "name": "EE2", "value": 40 }, { "name": "EE3", "value": 89 } ], "__parse": true }, { "name": "E2", "value": 148 } ], "__parse": true } ], "__parse": true } ] }, { "series-0": { "type": "Sunburst", "settings": { "singleBranchOnly": true, "downDepth": 10, "initialDepth": 10, "topDepth": 1, "innerRadius": { "type": "Percent", "value": 30 }, "valueField": "value", "categoryField": "name", "childDataField": "children", "selectedDataItem": "@self.dataItems.0" }, "properties": { "data": "#data-0" } } } ]}sunburst-chart-with-a-legend-including-all-nodes