JSFiddle - React, Tailwind, and code Playground

HTML

<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/exporting.js"></script>


<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {

		    chart: {
		        type: 'heatmap',
		        marginTop: 40,
		        marginBottom: 80,
		        plotBorderWidth: 1,
		        withdth:500
		    },
		    plotOptions: {
	            series: {
	                events: {
	                    click: function (event) {
	                        console.log('event!');
	                    }
	                }
	            }
	        },
		    credits: {
		        enabled: false
		    },

		    title: {
		        text: ''
		        	
		    },

		    xAxis: {
		    categories: ['Bulk', 'FG', 'PRI', 'SEC'],
		    title: {
	        	text: 'Order Type'
             }    
		    },

		    yAxis: {
		        categories: [ 'Closed','Approved','Initiated'],
		   	 title: {
                 text: 'Classification'
		   	 }
		       
			        
		    },

		  colorAxis: {
      
		        
		    },

		    legend: {
		        align: 'right',
		        layout: 'vertical',
		        margin: 0,
		        verticalAlign: 'top',
		        y: 25,
		        symbolHeight: 280,
		        enabled:false,
		    },

		    tooltip: {
		        formatter: function () {
		            return '<b>'+this.point.value +' ' + this.series.xAxis.categories[this.point.x] + '</b> order <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
		        }
		    },
		   
		    series: [{
		        name: '',
		        borderWidth: 1,
		        data: [[0, 0,2], [0, 1,2], [0, 2,2], [1,0, 2], [1,1, 2], [1, 2, 2], [2, 0, 2], [2, 1, 2], [2, 2, 2], [3, 0, 2], [3, 1, 2], [3, 2, 2]],
		        dataLabels: {
		            enabled: true,
		            color: '#000000'
		        }
		    }]

		});