Highcharts - SPLessons

Highcharts Tree Maps

Chapter 20

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Highcharts Tree Maps

Highcharts Tree Maps

shape Introduction

Highcharts Tree Map charts are used to create tree map type charts. In this chapter, Tree Maps and its types are explained.

Tree map

shape 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.

<script src=”https://code.highcharts.com/modules/tree.js”></script>

The following snippet code demonstrates the main scheme of Tree maps in Highcharts:

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
}]

Types of Tree Maps

shape Description

Following are a few types of Highcharts Tree Maps that can be represented using Highcharts.

Tree map with color axis

shape 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.

shape Example

Following is the simple code for creating a Tree map with color axis using CDN access for both Highcharts and jQuery.

<!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>

Tree map with levels

shape Description

A Tree map can be represented in different levels depending on the given data value. One can specify many levels to display simultaneously.

shape Example

Following is the code for creating a Tree map with levels using the CDN access for both Highcharts and jQuery.

<!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>

Summary

shape 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.

shape Programming
Tips

  • Add the additional plugins for the Heat and Tree map after the highchart.js.
  • Give the preferred chart type in the chart.type property.
  • 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.