Treemaps: Squarified

by Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<!-- Latest stable commit -->
<script src="https://code.highcharts.com/modules/heatmap.src.js"></script>
<script src="https://code.highcharts.com/modules/treemap.src.js"></script><!---->

<div class="description">
     <h3>Description</h3>
    <p>An example of a squarified treemap using the Highcharts JS library. It uses the same data and box size as Fig 4, in the article about <a href="">squarified treemaps</a> written by Bruls, Huizing and van Wijk.</p>
</div>
<div id="container"></div>

CSS

.description {
    padding: 20px;
    margin-bottom: 20px;
    background-color: gray;
    color: white;
}
.description a {
    color: white;
}
#container {
    height: 400px;
    width: 600px;
    margin: 1em auto;
}

JavaScript

$('#container').highcharts({
    series: [{
        layoutAlgorithm: 'squarified',
        dataLabels: {
            enabled: true
        },
        type: "treemap",
        data: [{
            id: 'A',
            value: 6
        }, {
            id: 'B',
            value: 6
        }, {
            id: 'C',
            value: 4
        }, {
            id: 'D',
            value: 3
        }, {
            id: 'E',
            value: 2
        }, {
            id: 'F',
            value: 2
        }, {
            id: 'G',
            value: 1
        }]
    }],
    title: {
        text: 'Highcharts Squarified Treemap'
    }
});