A Treemap with images on hover
This demo shows how we can add custom images to be displayed in a Treemap nodes on hover.
/** * --------------------------------------- * 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: 0, nodePaddingInner: 0 }));
series.rectangles.template.setAll({ strokeWidth: 2});
// create container for the imagevar imageContainer = container.children.push( am5.Container.new(root, { maskContent: true, position: "absolute", isMeasured: true, background: am5.Rectangle.new(root, {}), layer: 30 }));
// create imagevar image = imageContainer.children.push(am5.Picture.new(root, {}));
// when hovered adjust size and set src for the image (it's in data)series.nodes.template.events.on("pointerover", function (event) { var node = event.target; imageContainer.setAll({ x: node.x() + 1, y: node.y() + 1, width: node.width() - 2, height: node.height() - 2 });
var dataItem = node.dataItem; if (dataItem) { var dataContext = dataItem.dataContext; var maxSize = Math.max(node.width(), node.height());
image.setAll({ src: dataContext.src, width: maxSize });
// if you want the image to be scaled without keeping proportions, set both width and height /* image.setAll({ src:dataContext.src, width:node.width(), height:node.height() }); */
imageContainer.appear(); }});
series.nodes.template.events.on("pointerout", function (event) { imageContainer.hide(0);});
// Generate and set data// https://www.amcharts.com/docs/v5/charts/hierarchy/#Setting_datavar maxLevels = 2;var maxNodes = 10;var maxValue = 100;
var data = { name: "Root", children: [ { name: "First", src: "https://docs.amcharts.com/assets/dog.jpg", value: 100 },
{ name: "Second", src: "https://docs.amcharts.com/assets/dog.jpg", value: 50 },
{ name: "Third", src: "https://docs.amcharts.com/assets/dog.jpg", value: 40 },
{ name: "Fourth", src: "https://docs.amcharts.com/assets/dog.jpg", value: 10 },
{ name: "Fifth", src: "https://docs.amcharts.com/assets/dog.jpg", value: 10 } ]};
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" ] }, "children": [ { "type": "Container", "settings": { "maskContent": true, "position": "absolute", "isMeasured": true, "background": { "type": "Rectangle" }, "layer": 30 }, "children": [ { "type": "Picture" } ] } ], "refs": [ { "data-0": [ { "name": "Root", "children": [ { "name": "First", "src": "https://docs.amcharts.com/assets/dog.jpg", "value": 100 }, { "name": "Second", "src": "https://docs.amcharts.com/assets/dog.jpg", "value": 50 }, { "name": "Third", "src": "https://docs.amcharts.com/assets/dog.jpg", "value": 40 }, { "name": "Fourth", "src": "https://docs.amcharts.com/assets/dog.jpg", "value": 10 }, { "name": "Fifth", "src": "https://docs.amcharts.com/assets/dog.jpg", "value": 10 } ], "__parse": true } ] }, { "series-0": { "type": "Treemap", "settings": { "singleBranchOnly": false, "downDepth": 1, "upDepth": -1, "initialDepth": 2, "valueField": "value", "categoryField": "name", "childDataField": "children", "nodePaddingOuter": 0, "nodePaddingInner": 0, "selectedDataItem": "@self.dataItems.0" }, "properties": { "data": "#data-0", "rectangles": { "properties": { "template": { "settings": { "strokeWidth": 2 } } } } } } } ]}treemap-with-images-on-hover