Treemap Demo

author(s): Jon Arild Nygård

by Arvind Pal

HTML

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

CSS

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

JavaScript

//'#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce',
 //   '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'
Highcharts.chart('container', {
credits:{
enabled:false
},
    series: [{
        type: "treemap",
        data: [{
            name: 'Infa Axon',
            value: 19773,
            color:'#2f7ed8'
        }, {
            name: 'Collibra DGC',
            value: 19475,
            color:"#0d233a"
        }, {
            name: 'Discourse  ',
            value: 13270
        }, {
            name: 'Hivebrite  ',
            value: 10703
        }, {
            name: 'ServiceNow  ',
            value: 5876
        }, {
            name: 'Jira  ',
            value: 5842
        }, {
            name: 'Confluence  ',
            value: 5130
        }, {
            name: 'Infa IDQ  ',
            value: 4586
        }, {
            name: 'Trillium  ',
            value: 4073
        }, {
            name: 'MetricStream  ',
            value: 2395
        }]
    }],
    title: {
        text: ' '
    }
});