JSFiddle - React, Tailwind, and code Playground

by Purva Kshatriya

HTML

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

JavaScript

$(function () {
    $('#container').highcharts({
                colorAxis:{
                    dataClasses: [{
                        from: 0,
                        to: 5,
                        name: 'minor',
                        color: '#0200D0'
        
                    }, {
                        from: 5,
                        to: 15,
                        name: 'major',
                        color: '#C40401'
                    }]
        },
        series: [{
            type: "treemap",
            layoutAlgorithm: 'squarified',
              alternateStartingDirection: true,
            data: [{
                name: 'A',
                value: 6,              
                colorValue:2
            }, {
                name: 'B',
                value: 6,              
                colorValue:6
            }, {
                name: 'C',
                value: 4,              
                colorValue:4
            }, {
                name: 'D',
                value: 3,              
                colorValue:3
            }, {
                name: 'E',
                value: 2,              
                colorValue:2
             
            }, {
                name: 'F',
                value: 2,              
                colorValue:2
            }, {
                name: 'G',
                value: 1,              
                colorValue:1
            }]
        }],

        title: {
            text: 'Highcharts Treemap'
        }
    });
});