Treemap study

by kzoon

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>

CSS

#container {
    width: 300px;
    width: 600px;
    margin: 0 auto;
}

JavaScript

$(function () {
    $('#container').highcharts({
        "chart": {
            type: "treemap"
        },


        series: [{
            //showInLegend: true,
            dataLabels: {
                enabled: true,
                align: 'left',
                verticalAlign: 'top',
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold'
                }
            },
            data: [{
                'name': 'Americas',
                    'value': 52976, //y in pie chart
                'color': 'rgba(47,126,216,1)'
            }, {
                'name': 'Australia',
                    'value': 41219,
                    'color': 'rgba(13,35,58,1)'
            }, {
                'name': 'Europe',
                    'value': 62756,
                    'color': 'rgba(139,188,33,1)'
            }, {
                'name': 'Asia',
                    'value': 14577,
                    'color': 'rgba(145,0,0,1)'
            }, {
                'name': 'USA',
                    'value': 23178,
                    'color': 'rgba(26,173,206,1)'
            }, {
                'name': 'France',
                    'value': 12880,
                    'color': 'rgba(73,41,112,1)'
            }, {
                'name': 'Germany',
                    'value': 11801,
                    'color': 'rgba(242,143,67,1)'
            }]
        }]


    });
});