Introduction
Highcharts Tree Map charts are used to create tree map type charts. In this chapter, Tree Maps and its types are explained.
Description
Highcharts Tree Maps represent the given data in a Tree structure. A Tree map contains two nodes i.e., a parent node and a child node. By default, the tree already contains a root node.
One should add additional plugin to the header section of html page to create a Highcharts Tree Maps. Users need to include the following plugin after
heatmap.js.
[c]<script src=”https://code.highcharts.com/modules/tree.js”></script>[/c]
The following snippet code demonstrates the main scheme of Tree maps in Highcharts:
[c]
data: [{
name: ‘I have children’,
id: ‘id-1’
},{
name: ‘I am a child’,
parent: ‘id-1’,
value: 2
},{
name: ‘I am a smaller child’,
parent: ‘id-1’,
value: 1
}]
[/c]
Description
Following are a few types of Highcharts Tree Maps that can be represented using Highcharts.
- Tree map with color axis
- Tree map with levels
Description
Each node in a Highcharts Tree Maps is colored according to the values given. All the other nodes in the graph are related to colors. Set tree map in the
series.type property to create a Tree map. Example
Following is the simple code for creating a Tree map with color axis using CDN access for both Highcharts and jQuery.
[c]
<!DOCTYPE html>
<html>
<head>
<title>Treemap with color axis</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
$('#container').highcharts({
colorAxis: {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: [{
name: 'A',
value: 6,
colorValue: 1
}, {
name: 'B',
value: 6,
colorValue: 2
}, {
name: 'C',
value: 4,
colorValue: 3
}, {
name: 'D',
value: 3,
colorValue: 4
}, {
name: 'E',
value: 2,
colorValue: 5
}, {
name: 'F',
value: 2,
colorValue: 6
}, {
name: 'G',
value: 1,
colorValue: 7
}]
}],
title: {
text: 'Treemap with color axis'
}
});
});
</script>
</body>
</html>
[/c]
Description
A Tree map can be represented in different levels depending on the given data value. One can specify many levels to display simultaneously.
Example
Following is the code for creating a Tree map with levels using the CDN access for both Highcharts and jQuery.
[c]
<!DOCTYPE html>
<html>
<head>
<title>Treemap with color axis</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
$('#container').highcharts({
series: [{
type: "treemap",
layoutAlgorithm: 'stripes',
alternateStartingDirection: true,
levels: [{
level: 1,
layoutAlgorithm: 'sliceAndDice',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '15px',
fontWeight: 'bold'
}
}
}],
data: [{
id: 'A',
name: 'Apples',
color: "#EC2500"
}, {
id: 'B',
name: 'Bananas',
color: "#ECE100"
}, {
id: 'O',
name: 'Oranges',
color: '#EC9800'
}, {
name: 'Anne',
parent: 'A',
value: 5
}, {
name: 'Rick',
parent: 'A',
value: 3
}, {
name: 'Peter',
parent: 'A',
value: 4
}, {
name: 'Anne',
parent: 'B',
value: 4
}, {
name: 'Rick',
parent: 'B',
value: 10
}, {
name: 'Peter',
parent: 'B',
value: 1
}, {
name: 'Anne',
parent: 'O',
value: 1
}, {
name: 'Rick',
parent: 'O',
value: 3
}, {
name: 'Peter',
parent: 'O',
value: 3
}, {
name: 'Susanne',
parent: 'Kiwi',
value: 2,
color: '#9EDE00'
}]
}],
title: {
text: 'Fruit consumption'
}
});
});
</script>
</body>
</html>
[/c]
Key Points
- The tree maps display the given data in tree structure.
- The size of a tree map depends on the size of elements of the page.
Programming
Tips
- Add the additional plugins for the Heat and Tree map after the
highchart.js. - Give the preferred chart type in the
chart.typeproperty. - Ensure that all the chart options or settings are correct before running the application.
- Using CDN access for both jQuery and Highcharts is an easy way for the end-user to create Highcharts.