JSFiddle - React, Tailwind, and code Playground

by Rob Lacy

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div ng-app ng-controller="TreemapDemo">
    <div id="breadcrumbs">Top Level</div>
    <div id="treemap-container"></div>
</div>

JavaScript

function TreemapDemo($scope) {

    $('#treemap-container').highcharts({
        series: [{
            type: "treemap",
            layoutAlgorithm: 'squarified',
            allowDrillToNode: true,
            dataLabels: {
                enabled: false
            },
            levelIsConstant: false,
            levels: [{
                level: 1,
                dataLabels: {
                    enabled: true
                },
                borderWidth: 3
            }],
            data: [
                {id: 'a', name: 'AAA', color:'#444', value:47.7},
                {id: 'b', name: 'BBB', color:'#888', value:99.9},
                {id: 'b1', name: 'B1', parent:'b', value:12.3},
                {id: 'b2', name: 'B2', parent:'b', value:45.3},
                {id: 'b3', name: 'B3', parent:'b', value:7},
                {id: 'a1', name: 'A1', parent:'a', value:18.3},
                {id: 'a2', name: 'A2', parent:'a', value:34.3}
             ]
        }],
        title: {
            text: ''
        }
    });
}