YouTip

In this chapter, we will introduce the Highcharts treemap. We have already learned about the Highcharts configuration syntax in previous chapters. Next, let's look at other Highcharts configurations. * * * ## Treemap ### series Configuration Set the type property of the series to treemap. series.type describes the data series type. The default value is "line". var chart = { type: 'treemap'}; ### Example Filename: highcharts_tree_map.htm $(document).ready(function() { var title = { text: 'Highcharts Treemap' }; var colorAxis = { minColor: '#FFFFFF', maxColor: Highcharts.getOptions().colors }; var 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 }] }]; var json = {}; json.title = title; json.colorAxis = colorAxis; json.series = series; $('#container').highcharts(json);}); The output of the above example is: * * * ## Treemap with Different Levels The following example uses different colors to identify different levels of the treemap. ### Example Filename: highcharts_tree_levels.htm (For the full source code, please click the example to view) $(document).ready(function() { var title = { text: 'Fruit consumption' }; var 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' }] }]; var json = {}; json.title = title; json.series = series; $('#container').highcharts(json);}); The output of the above example is: * * * ## Large Data Treemap The following example shows a treemap with a large amount of data. You can view the specific example data by clicking "Try it". Filename: highcharts_tree_largemap.htm $(document).ready(function() { //Partial JS code omitted var data = {……}; var points = [],region_p,region_val,region_i,country_p,country_i,cause_p,cause_i,cause_name = [];cause_name['Communicable & other Group I'] = 'Communicable diseases';cause_name['Noncommunicable diseases'] = 'Non-communicable diseases';cause_name['Injuries'] = 'Injuries';region_i = 0;for (var region in data) {region_val = 0;region_p = {id: "id_" + region_i,name: region,color: Highcharts.getOptions().colors};country_i = 0;for (var country in data) {country_p = {id: region_p.id + "_" + country_i,name: country,parent: region_p.id };points.push(country_p);cause_i = 0;for (var cause in data) {cause_p = {id: country_p.id + "_" + cause_i,name: cause_name,parent: country_p.id,value: Math.round(+data)};region_val += cause_p.value;points.push(cause_p);cause_i++;}country_i++;}region_p.value = Math.round(region_val / country_i);points.push(region_p);region_i++;} var chart = { renderTo: 'container' }; var title = { text: 'Global Mortality Rate 2012, per 100 000 population' }; var subtitle: { text: 'Click points to drill down. Source: WHO.' }; var series = [{ type: "treemap", layoutAlgorithm: 'squarified', allowDrillToNode: true, dataLabels: { enabled: false }, levelIsConstant: false, levels: [{ level: 1, dataLabels: { enabled: true }, borderWidth: 3 }], data: points }]; var json = {}; json.title = title; json.series = series; $('#container').highcharts(json);}); The output of the above example is: