JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://infra-platforms-phase2-18418-anshinde.pfa.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
<div id="app"></div>

CSS

/*Use to turn off visualization selector*/
#container .jr-mAdhoc-visualization-launcher.jr {
  display: none;
}

.selected {
  display: inline;
  font-size: 1.3em;
  color: #3C1A06;
}

#container {
  height: 370px;
  margin-top: 10px;
  margin-left: 10px;
}

/*Start of Crosstab specific styles*/
/*Crosstab side panel*/
#container .jr-mDatatable-cellRowlabel.jr-mDatatable-cellField.jr {
  background-color: #E0D2BC;
  font-weight: bold;
  color: black;
}

/*Crosstab totals section in side panel*/
#container .jr-mDatatable-cell.jr-mDatatable-cellRowlabel.jr.jr-mDatatable-cellTotal {
  background-color: #E0D2BD;
  border: 1px solid #c19a83;
}

/*Crosstab totals in main table - even row*/
#container .jr-mDatatable-rowEven.jr .jr-mDatatable-cell.jr-mDatatable-cellValue.jr-mDatatable-cellTotal.jr {
  background-color: #e8dcd0;
  border: 1px solid #ad795b;
}

/*Crosstab totals in main table - odd row*/
#container .jr-mDatatable-rowOdd.jr .jr-mDatatable-cell.jr-mDatatable-cellValue.jr-mDatatable-cellTotal.jr {
  background-color: #e8dcd0;
  border: 1px solid #ad795b;
}

/*Crosstab value in main table - odd row*/
#container .jr-mDatatable-rowOdd.jr .jr-mDatatable-cell.jr-mDatatable-cellValue.jr {
  background-color: #F0E9E0;
  border: 1px solid #ad795b;
}

/*Crosstab value in main table - even row*/
#container .jr-mDatatable-rowEven.jr .jr-mDatatable-cell.jr-mDatatable-cellValue.jr {
  background-color: #F0E9E0;
  border: 1px solid #ad795b;
}

/*Table styles*/
/*Datatable headers*/
#container .jr-mDatatable-header.jr .jr-mDatatable-row.jr .jr-mDatatable-cell.jr {
  background-color: #8e5f40;
  font-size: 1.24em;
  font-weight: bold;
  color: white;
}

/*Header for cell text*/
#container .jr-mDatatable-header.jr .jr-mDatatable-row.jr .jr-mDatatable-cell-text {
  padding-top: .30em;
}

/*Header for cell numbers*/
#container .jr-mDatatable-header.jr .jr-mDatatable-row.jr .jr-mDatatable-cell-number {
  padding-top: .60em;
}

/*Datatable cells*/
#container...

JavaScript

function RenderVisualize () {
  React.useEffect(function () {
   visualize({
      auth: {
        name: "joeuser",
        password: "joeuser",
        organization: "organization_1"
      }
    }, function(v) {
      var ahv = v.adhocView({
        resource: "/public/viz/Adhoc/Chart6",
        container: "#container",
        error: function(e) {
          console.log(e);
        },
        //Use linkOptions to pass fields and measures 
        linkOptions: {
          events: {
            click: function(ev, data) {
              //view data for available fields and measures
              console.log(data);
              $("#field1").html("<span>Field1: <b>" + data.product_subcategory + "</b></span>") 
              $("#field2").html("<span>Field2: <b>" + data.the_date + "</b></span>") 
              $("#measure").html("<span>Measure: <b>" + data.Measures[0] + "</b></span>")
            }
          }
        }
      });
    })
  }, [])

  return (
  <React.Fragment>
  <div id="field1" className="selected">Select any data point to pass field and measure</div>
<div id="field2" className="selected"></div>
<div id="measure" className="selected"></div>
 <div id='container'>
    </div>
  </React.Fragment>
  )
}

ReactDOM.render(<RenderVisualize />, document.querySelector("#app"))