JSFiddle - React, Tailwind, and code Playground

by jeffgw

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="container" style="height:500px;"></div>

JavaScript

Highcharts.chart('container', {
    "title": {
        "text": 'Program Level Matrix Demo'
    },
    "credits": {
        "enabled": false
    },
    "series": [{
        "type": "treemap",
        "allowDrillToNode": true,
        "layoutAlgorithm": "squarified",
        "alternateStartingDirection": true,
        "levelIsConstant": false,
        "dataLabels": {
            "enabled": true
        },
        "levels": [{
            "level": 1,
            "borderWidth": 4,
            "borderColor": "#FFF",
            "dataLabels": {
                "enabled": true,
                "style": {
                    "fontSize": "15px",
                    "color": "#FFF"
                }
            }
        }, {
            "level": 2,
            "borderWidth": 2,
            "borderColor": "#FFF",
            "dataLabels": {
                "enabled": false,
                "style": {
                    "fontSize": "12px",
                    "color": "#FFF"
                }
            }
        }, {
            "level": 3,
            "borderWidth": 2,
            "borderColor": "#000",
            "dataLabels": {
                "enabled": true,
                "style": {
                    "fontSize": "12px",
                    "color": "#FFF"
                }
            }
        }],
        "data": [{
            "id": "ebh",
            "name": "EBH"
        }, {
            "parent": "ebh",
            "name": "LCSW",
            "value": 0
        }, {
            "parent": "ebh",
            "name": "Psychiatry - PNP",
            "value": 101
        }, {
            "parent": "ebh",
            "name": "Psychology",
            "value": 0
        }, {
            "parent": "ebh",
            "name": "Psychology - LCSW",
            "value": 448
        }, {
            "parent": "ebh",
            "name": "Support Staff",
            "value": 378
        }, {
            "id": "multi-d",
            "name": "Multi-D"
        }, {
         ...