A tree chart draws a hierarchy as nodes and lines, each parent above its children. Here, a family tree from a grandmother to her great-grandchildren.
A tree chart shows what belongs under what, and how deep the structure goes. Every node gets the same space whatever its value, so it suits relationships rather than amounts: families, org charts, site maps. Folding branches keeps a big tree readable.
Built with amCharts 5, a JavaScript library. The JavaScript includes your theme and renderer (canvas or SVG); the JSON also follows the changes you make with the controls.
npm install @amcharts/amcharts5. See Getting started.
The same chart as a JSON config. Chart Maker reads and writes this format, the library's JSON parser turns it into a chart, and the <am5-chart> element puts it on a page with no code."type" is the class to create and "settings" what you would pass to its new() in code; "properties" fill in its parts, lists such as series and axes or templates such as columns.template; "refs" holds objects used in more than one place ("#series-0" stands for the one named series-0); a string starting with "@" takes a value from another object, such as "@series.get('fill')".
A complete page. Save it as an .html file and open it in a browser.
Paste this into an AI coding assistant to build the chart from scratch. More in amCharts & AI.
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root),
am5themes_Responsive.new(root)
]);
var chart = root.container.children.push(
am5.SerialChartContainer.new(root, {
width: am5.p100, // the container fills the whole chart div
height: am5.p100
})
);
// Zoom with the mouse wheel or a pinch, and drag to pan
// https://www.amcharts.com/docs/v5/concepts/common-elements/containers/#Zoom_functionality
chart.zoomableContainer.setAll({
wheelable: true,
pinchZoom: true
});
var zoomTools = chart.set("zoomTools", am5.ZoomTools.new(root, {})); // zoom in, zoom out and reset buttons
// Create series
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
var series = chart.series.push(am5hierarchy.Tree.new(root, {
singleBranchOnly: false, // opening one branch leaves the others open
// show every generation on load; a collapsed node opens one level at a time
downDepth: 1,
initialDepth: 10,
valueField: "value",
categoryField: "name",
childDataField: "children",
// room on the right, so the last column of a left-to-right tree clears the zoom buttons
paddingRight: 80
}));
// names shrink as far as needed to fit their circle instead of hiding
series.labels.template.set("minScale", 0);
// The tooltip reads the extra "born" field from the data; "#" keeps the year free of a thousands separator
series.nodes.template.set("tooltipText", "{category}, born {born.formatNumber('#')}");
// Set data: a family tree, from a grandmother to her great-grandchildren
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Setting_data
series.data.setAll([{
name: "Rose",
born: 1938,
children: [{
name: "Anna",
born: 1960,
children: [{
name: "Tom",
born: 1984,
children: [
{ name: "Leo", born: 2012 },
{ name: "Ava", born: 2015 }
]
}, {
name: "Mia",
born: 1988
}]
}, {
name: "Mark",
born: 1963,
children: [{
name: "Sam",
born: 1986
}, {
name: "Ella",
born: 1989,
children: [
{ name: "Noah", born: 2018 }
]
}, {
name: "Jack",
born: 1994
}]
}, {
name: "Lucy",
born: 1967,
children: [{
name: "Ivy",
born: 1990,
children: [
{ name: "Finn", born: 2016 },
{ name: "Lily", born: 2019 },
{ name: "Theo", born: 2022 }
]
}, {
name: "Max",
born: 1995
}]
}]
}]);
// start at the top node, so the whole family shows
series.set("selectedDataItem", series.dataItems[0]);
// Make stuff animate on load
series.appear(1000, 100);{
"type": "SerialChartContainer",
"settings": {
"width": {
"type": "Percent",
"value": 100
},
"height": {
"type": "Percent",
"value": 100
},
"zoomTools": {
"type": "ZoomTools"
}
},
"properties": {
"series": [
"#series-0"
],
"zoomableContainer": {
"settings": {
"wheelable": true,
"pinchZoom": true
}
}
},
"refs": [
{
"data-0": [
{
"name": "Rose",
"born": 1938,
"children": [
{
"name": "Anna",
"born": 1960,
"children": [
{
"name": "Tom",
"born": 1984,
"children": [
{
"name": "Leo",
"born": 2012
},
{
"name": "Ava",
"born": 2015
}
],
"__parse": true
},
{
"name": "Mia",
"born": 1988
}
],
"__parse": true
},
{
"name": "Mark",
"born": 1963,
"children": [
{
"name": "Sam",
"born": 1986
},
{
"name": "Ella",
"born": 1989,
"children": [
{
"name": "Noah",
"born": 2018
}
],
"__parse": true
},
{
"name": "Jack",
"born": 1994
}
],
"__parse": true
},
{
"name": "Lucy",
"born": 1967,
"children": [
{
"name": "Ivy",
"born": 1990,
"children": [
{
"name": "Finn",
"born": 2016
},
{
"name": "Lily",
"born": 2019
},
{
"name": "Theo",
"born": 2022
}
],
"__parse": true
},
{
"name": "Max",
"born": 1995
}
],
"__parse": true
}
],
"__parse": true
}
]
},
{
"series-0": {
"type": "Tree",
"settings": {
"singleBranchOnly": false,
"downDepth": 1,
"initialDepth": 10,
"valueField": "value",
"categoryField": "name",
"childDataField": "children",
"paddingRight": 80,
"selectedDataItem": "@self.dataItems.0"
},
"properties": {
"data": "#data-0",
"labels": {
"properties": {
"template": {
"settings": {
"minScale": 0
}
}
}
},
"nodes": {
"properties": {
"template": {
"settings": {
"tooltipText": "{category}, born {born.formatNumber('#')}"
}
}
}
}
}
}
}
]
}
