Treemap with highlight of parent node on hover
This demo shows how we can use events and states to highlight top node on a hover of any child node of a Treemap.
/** * --------------------------------------- * 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.Treemap.new(root, { singleBranchOnly: false, downDepth: 1, upDepth: -1, initialDepth: 2, valueField: "value", categoryField: "name", childDataField: "children", nodePaddingOuter: 2, nodePaddingInner: 2 }));
series.rectangles.template.setAll({ strokeWidth: 2, strokeOpacity: 1, interactive: true, stroke: am5.color(0xffffff)});
series.rectangles.template.states.create("highlight", { stroke: am5.color(0x000000)});
series.rectangles.template.events.on("pointerover", function (ev) { const target = ev.target.dataItem; const parent = target.get("parent"); if (parent) { parent.get("rectangle").states.applyAnimate("highlight"); }});
series.rectangles.template.events.on("pointerout", function (ev) { const target = ev.target.dataItem; const parent = target.get("parent"); if (parent) { parent.get("rectangle").states.applyAnimate("default"); }});
// Generate and set data// https://www.amcharts.com/docs/v5/charts/hierarchy/#Setting_datavar 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 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" ] }, "refs": [ { "data-0": [ { "name": "Root", "children": [ { "name": "First", "children": [ { "name": "A1", "value": 100 }, { "name": "A2", "value": 60 }, { "name": "A3", "value": 30 } ], "__parse": true }, { "name": "Second", "children": [ { "name": "B1", "value": 135 }, { "name": "B2", "value": 98 }, { "name": "B3", "value": 56 } ], "__parse": true }, { "name": "Third", "children": [ { "name": "C1", "value": 335 }, { "name": "C2", "value": 148 }, { "name": "C3", "value": 126 }, { "name": "C4", "value": 26 } ], "__parse": true }, { "name": "Fourth", "children": [ { "name": "D1", "value": 415 }, { "name": "D2", "value": 148 }, { "name": "D3", "value": 89 }, { "name": "D4", "value": 64 }, { "name": "D5", "value": 16 } ], "__parse": true }, { "name": "Fifth", "children": [ { "name": "E1", "value": 687 }, { "name": "E2", "value": 148 } ], "__parse": true } ], "__parse": true } ] }, { "series-0": { "type": "Treemap", "settings": { "singleBranchOnly": false, "downDepth": 1, "upDepth": -1, "initialDepth": 2, "valueField": "value", "categoryField": "name", "childDataField": "children", "nodePaddingOuter": 2, "nodePaddingInner": 2, "selectedDataItem": "@self.dataItems.0" }, "properties": { "data": "#data-0", "rectangles": { "properties": { "template": { "settings": { "strokeWidth": 2, "strokeOpacity": 1, "interactive": true, "stroke": { "type": "Color", "value": "#ffffff" } }, "states": [ { "key": "highlight", "settings": { "stroke": { "type": "Color", "value": "#000000" } } } ] } } } } } } ]}treemap-with-highlight-of-parent-node-on-hover