Highcharts Tree Map with Levels Example

Keywords : Treemap with levels example using highcharts, How to make treemap with different levels using highcharts, Create different levels in tree map using highcharts

Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Highcharts - Tree map with levels Chart</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/treemap.js"></script>
    <script type="text/javascript">
        $(function () {          
            var chartseries = [{
                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 chartitle = {
                text: 'Fruit consumption'
            }
            $('#container').highcharts({
                title: chartitle,
                series: chartseries
            });
        });
    </script>
</head>
<body>
    <div id="container"></div>
</body>
</html>

Highcharts Tree Map with Levels Example

Example

Result