JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>


<body>
  
  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>

JavaScript

var xvar='';
 
 var xValues = ['A', 'B', 'C', 'D', 'E'];

var yValues = ['10000','20000', '30000', '40000'];

var zValues = [
  [0.00, 0.00, 0.75, 0.75, 0.00],
  [0.00, 0.00, 0.75, 0.75, 0.00],
  [0.75, 0.75, 0.75, 0.75, 0.75],
  [0.00, 0.00, 0.00, 0.75, 0.00]
];
//alert(xValues[3])

var colorscaleValue = [
  [0, '#3D9970'],
  [1, '#001f3f']
];

var data = [{
  x: xValues,
  y: yValues,
  z: zValues,
  type: 'heatmap',
  colorscale: colorscaleValue,
  showscale: false
}];

var layout = {
  title: 'Annotated Heatmap',
  annotations: [],
   dragmode:'',
  xaxis: {
    ticks: '',
    side: 'top',
    fixedrange:true
  },
  yaxis: {
    ticks: '',
    tickprefix: '> ',
    width: 700,
    height: 700,
    range:[0,20000],
    showticksuffix:'last'
  }
};
var mydiv=document.getElementById('myDiv');
Plotly.newPlot(mydiv, data, layout);

mydiv.on('plotly_click', function(data){
console.log(data)
});