Treemap with partial fills in nodes
This demo shows how we can add partial data-based fills to Treemap nodes using Rectangle element as a bullet, and a couple of adapters.
/** * --------------------------------------- * 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});
series.bullets.push(function (root, series, dataItem) { var picture = am5.Rectangle.new(root, { fill: am5.color(0x000000), centerX: am5.p50, centerY: am5.p100, width: am5.percent(100), height: am5.percent(0) });
picture.adapters.add("y", function () { return am5.p100; });
picture.adapters.add("height", function (height, target) { return target.dataItem.dataContext.fillHeight || am5.p0; });
picture.states.lookup("default").setAll({ opacity: 0.15 });
return am5.Bullet.new(root, { sprite: picture });});
// 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", children: [ { name: "A1", value: 100, fillHeight: am5.percent(65) },
{ name: "A2", value: 60, fillHeight: am5.percent(35) },
{ name: "A3", value: 30, fillHeight: am5.percent(80) } ] },
{ name: "Second", children: [ { name: "B1", value: 135, fillHeight: am5.percent(25) },
{ name: "B2", value: 98, fillHeight: am5.percent(10) },
{ name: "B3", value: 56, fillHeight: am5.percent(60) } ] },
{ name: "Third", children: [ { name: "C1", value: 335, fillHeight: am5.percent(26) },
{ name: "C2", value: 148, fillHeight: am5.percent(62) },
{ name: "C3", value: 126, fillHeight: am5.percent(35) },
{ name: "C4", value: 26, fillHeight: am5.percent(30) } ] },
{ name: "Fourth", children: [ { name: "D1", value: 415, fillHeight: am5.percent(80) },
{ name: "D2", value: 148, fillHeight: am5.percent(50) },
{ name: "D3", value: 89, fillHeight: am5.percent(39) },
{ name: "D4", value: 64, fillHeight: am5.percent(40) },
{ name: "D5", value: 16, fillHeight: am5.percent(49) } ] },
{ name: "Fifth", children: [ { name: "E1", value: 687, fillHeight: am5.percent(52) },
{ name: "E2", value: 148, fillHeight: am5.percent(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" ] }, "refs": [ { "data-0": [ { "name": "Root", "children": [ { "name": "First", "children": [ { "name": "A1", "value": 100, "fillHeight": { "type": "Percent", "value": 65 }, "__parse": true }, { "name": "A2", "value": 60, "fillHeight": { "type": "Percent", "value": 35 }, "__parse": true }, { "name": "A3", "value": 30, "fillHeight": { "type": "Percent", "value": 80 }, "__parse": true } ], "__parse": true }, { "name": "Second", "children": [ { "name": "B1", "value": 135, "fillHeight": { "type": "Percent", "value": 25 }, "__parse": true }, { "name": "B2", "value": 98, "fillHeight": { "type": "Percent", "value": 10 }, "__parse": true }, { "name": "B3", "value": 56, "fillHeight": { "type": "Percent", "value": 60 }, "__parse": true } ], "__parse": true }, { "name": "Third", "children": [ { "name": "C1", "value": 335, "fillHeight": { "type": "Percent", "value": 26 }, "__parse": true }, { "name": "C2", "value": 148, "fillHeight": { "type": "Percent", "value": 62 }, "__parse": true }, { "name": "C3", "value": 126, "fillHeight": { "type": "Percent", "value": 35 }, "__parse": true }, { "name": "C4", "value": 26, "fillHeight": { "type": "Percent", "value": 30 }, "__parse": true } ], "__parse": true }, { "name": "Fourth", "children": [ { "name": "D1", "value": 415, "fillHeight": { "type": "Percent", "value": 80 }, "__parse": true }, { "name": "D2", "value": 148, "fillHeight": { "type": "Percent", "value": 50 }, "__parse": true }, { "name": "D3", "value": 89, "fillHeight": { "type": "Percent", "value": 39 }, "__parse": true }, { "name": "D4", "value": 64, "fillHeight": { "type": "Percent", "value": 40 }, "__parse": true }, { "name": "D5", "value": 16, "fillHeight": { "type": "Percent", "value": 49 }, "__parse": true } ], "__parse": true }, { "name": "Fifth", "children": [ { "name": "E1", "value": 687, "fillHeight": { "type": "Percent", "value": 52 }, "__parse": true }, { "name": "E2", "value": 148, "fillHeight": { "type": "Percent", "value": 10 }, "__parse": true } ], "__parse": true } ], "__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 } } } }, "bullets": [ { "type": "Bullet", "settings": { "sprite": { "type": "Rectangle", "settings": { "fill": { "type": "Color", "value": "#000000" }, "centerX": { "type": "Percent", "value": 50 }, "centerY": { "type": "Percent", "value": 100 }, "width": { "type": "Percent", "value": 100 }, "height": { "type": "Percent", "value": 0 } }, "states": [ { "key": "default", "settings": { "opacity": 0.15 } } ] } } } ] } } } ]}treemap-with-partial-fills-in-nodes