JSFiddle - React, Tailwind, and code Playground

by Alagar Kamuthurai

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/treemap.js"></script>
<div id="container" style="width: 650px; height: 650px;"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        series: [{
            colorByPoint: true,
            layoutAlgorithm: "stripes",
            alternateStartingDirection: true,
            allowPointSelect: true,
            point: {
                events: {
                    click: function () {
                            alert(this.name + ": " + this.value);
                        }
                    }
            },
            dataLabels: {

            },        borderWidth: 3,
            borderColor:'white',
            type: "treemap",
            levels: [{
                level: 1,
                dataLabels: {
                    enabled: true,
                    align: 'right',
                    rotation: 30,
                    crop: false,
                    overflow: 'none',
                    inside: false,
                    style: {
                        fontSize: '15px',
                        fontWeight: 'bold'
                    }
                }
            }, {
                level: 2,
                dataLabels: {
                    style: {
                    }
                },
                layoutAlgorithm: "stripes",
            }],
            data: [{
                // Add parents without values
                id: 'CategoryA',
                name: 'Category A'
            }, {
                id: 'CategoryB',
                name: 'Category B',
            }, {
                // And the children with values
                name: 'Subcat A1',
                value: 4,
                parent: 'CategoryA'
            }, {
                // And the children with values
                name: 'Subcat A2',
                value: 6,
                parent: 'CategoryA'
            }, {
                // And the children with values
                name: 'Subcat B1',
                value: 6,
                parent: 'CategoryB'
            }, {
                // And the children with values
            ...