Highcharts Treemap
HTML
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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 {
width: 300px;
width: 600px;
margin: 0 auto;
}
JavaScript
$(function() {
var chart = new Highcharts.Chart({
"chart": {
type: "pie",
renderTo: "container"
},
series: [{
"type": "treemap",
"layoutAlgorithm": "squarified",
"allowDrillToNode": true,
"animationLimit": 1000,
"dataLabels": {
"enabled": false
},
"levelIsConstant": false,
"levels": [{
"level": 1,
"dataLabels": {
"enabled": true
},
"borderWidth": 3
}],
"data": [{
"color": "#932",
"id": "id_0",
"name": "Marcus Richards"
}, {
"color": "#FF1100",
"id": "id_0_0",
"name": "Overdue",
"ownerId": "00541000000jw8CAAQ",
"parent": "id_0",
"value": 2
}, {
"color": "#FFD310",
"id": "id_0_1",
"name": "Due Today",
"ownerId": "00541000000jw8CAAQ",
"parent": "id_0",
"value": 0
}, {
"color": "#12AD2A",
"id": "id_0_2",
"name": "Open",
"ownerId": "00541000000jw8CAAQ",
"parent": "id_0",
"value": 1
}, {
"color": "#23",
"id": "id_1",
"name": "John Smith"
}, {
"color": "#FF1100",
"id": "id_1_0",
"name": "Overdue",
"ownerId": "00541000001s0ouAAA",
"parent": "id_1",
"value": 19
}, {
"color": "#FFD310",
"id": "id_1_1",
"name": "Due Today",
"ownerId": "00541000001s0ouAAA",
"parent": "id_1",
"value": 0
}, {
"color": "#12AD2A",
"id": "id_1_2",
"name": "Open",
"ownerId": "00541000001s0ouAAA",
"parent": "id_1",
"value": 12
}, {
"color": "#391",
"id": "id_2",
"name": "Integration User"
}, {
"color": "#FF1100",
"id": "id_2_0",
"name": "Overdue",
"ownerId": "00541000000jw89AAA",
"parent": "id_2",
"value": 0
...