Treemap: Browser Market Share

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 id="container"></div>

CSS

#container {
    width: 600px;
    height: 400px;
    margin: 1em auto;
}

JavaScript

$('#container').highcharts({
    series: [{
        layoutAlgorithm: 'strip',
        levels: [{
            level: 1,
            borderColor: 'white',
            borderWidth: 3,
            dataLabels: {
                enabled: true,
                align: 'left',
                verticalAlign: 'top',
                style: {
                    'fontSize': '15px'
                }
            },
            layoutAlgorithm: 'sliceAndDice'
        }],
        dataLabels: {
            enabled: true,
            style: {
                color: 'black',
                fontWeight: 'bold',
                HcTextStroke: '2px rgba(255,255,255,0.5)'
            }
        },
        type: "treemap",
        data: [{
            id: 'F1',
            name: 'Chrome',
            color: 'rgb(75, 186, 75)'
        }, {
            name: 'C 37',
            parent: 'F1',
            value: 0.5
        }, {
            name: 'C 36',
            parent: 'F1',
            value: 19.2
        }, {
            name: 'C 35',
            parent: 'F1',
            value: 34
        }, {
            name: 'C 34',
            parent: 'F1',
            value: 1.7
        }, {
            name: 'Other',
            parent: 'F1',
            value: 4.4
        }, {
            id: 'F2',
            name: 'Firefox',
            color: 'rgb(206, 92, 38)'
        }, {
            name: 'FF 31',
            parent: 'F2',
            value: 3.1
        }, {
            name: 'FF 30',
            parent: 'F2',
            value: 15.6
        }, {
            name: 'FF 29',
            parent: 'F2',
            value: 1.1
        }, {
            name: 'FF 28',
            parent: 'F2',
            value: 0.6
        }, {
            name: 'Other',
            parent: 'F2',
            value: 4.5
        }, {
            id: 'F3',
            name: 'IE',
            color: 'rgb(28, 188, 236)'
        }, {
            name: 'IE 11',
            parent: 'F3',
            value: 3
        },...