Tree Chart with HTML nodes
This tutorial shows how we can use HTML content instead of built-in circle nodes on a Tree Chart.
/** * --------------------------------------- * 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.Tree.new(root, { singleBranchOnly: false, downDepth: 1, initialDepth: 10, valueField: "value", categoryField: "name", childDataField: "children", paddingTop: 60 }));
series.nodes.template.setAll({ isMeasured: true, centerX: am5.p50, centerY: am5.p100, html: '<div class="node">{category}</a>'});
series.nodes.template.events.on("click", function (ev) { // This event is needed in order to keep toggle functionality});
// Disable built-in node visualsseries.circles.template.set("forceHidden", true);series.outerCircles.template.set("forceHidden", true);series.labels.template.set("forceHidden", true);
// Generate and set data// https://www.amcharts.com/docs/v5/charts/hierarchy/#Setting_datavar maxLevels = 2;var maxNodes = 1;var maxValue = 100;
var data = { name: "Root", children: []};
generateLevel(data, "", 0);
series.data.setAll([data]);series.set("selectedDataItem", series.dataItems[0]);
function generateLevel(data, name, level) { for (var i = 0; i < Math.ceil(maxNodes * Math.random()) + 1; i++) { var nodeName = name + "ABCDEFGHIJKLMNOPQRSTUVWXYZ"[i]; var child; if (level < maxLevels) { child = { name: nodeName + level };
if (level > 0 && Math.random() < 0.5) { child.value = Math.round(Math.random() * maxValue); } else { child.children = []; generateLevel(child, nodeName + i, level + 1); } } else { child = { name: name + i, value: Math.round(Math.random() * maxValue) }; } data.children.push(child); }
level++; return data;}
// 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;}
.node { border: 1px solid #888; padding: 1em; background: #fff;}{ "type": "SerialChartContainer", "settings": { "layout": { "type": "VerticalLayout" } }, "properties": { "series": [ "#series-0" ] }, "refs": [ { "data-0": [ { "name": "Root", "children": [ { "name": "A0", "children": [ { "name": "A0A1", "children": [ { "name": "A0A00", "value": 49 }, { "name": "A0A01", "value": 50 } ], "__parse": true }, { "name": "A0B1", "children": [ { "name": "A0B10", "value": 86 }, { "name": "A0B11", "value": 48 } ], "__parse": true } ], "__parse": true }, { "name": "B0", "children": [ { "name": "B1A1", "value": 96 }, { "name": "B1B1", "value": 22 } ], "__parse": true } ], "__parse": true } ] }, { "series-0": { "type": "Tree", "settings": { "singleBranchOnly": false, "downDepth": 1, "initialDepth": 10, "valueField": "value", "categoryField": "name", "childDataField": "children", "paddingTop": 60, "selectedDataItem": "@self.dataItems.0" }, "properties": { "data": "#data-0", "labels": { "properties": { "template": { "settings": { "forceHidden": true } } } }, "nodes": { "properties": { "template": { "settings": { "isMeasured": true, "centerX": { "type": "Percent", "value": 50 }, "centerY": { "type": "Percent", "value": 100 }, "html": "<div class=\"node\">{category}</a>" } } } }, "circles": { "properties": { "template": { "settings": { "forceHidden": true } } } }, "outerCircles": { "properties": { "template": { "settings": { "forceHidden": true } } } } } } } ]}tree-chart-with-html-nodes