JSFiddle - React, Tailwind, and code Playground

HTML

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

<select id="selected_resource" disabled="true" name="report">
  <option value="StackedColumn">StackedColumn</option>
  <option value="Spline">Spline</option>
  <option value="AreaSpline">AreaSpline</option>
  <option value="Table">Table</option>
  <option value="Crosstab">Crosstab</option>
    
    
</select>

<div id="container"></div>

CSS

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

#selected_resource {
  margin-bottom: 10px;
}

#container {
  height: 350px;
  width: 600px;
  border: 1px solid black;
}

/*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 .jr-mDatatable-cell.jr {
  color: black;
 ...

JavaScript

visualize({
  auth: {
    name: "joeuser",
    password: "joeuser",
    organization: "organization_1"
  }
}, function(v) {
  var adv = v.adhocView({
    resource: "/public/viz/Adhoc/Change_Visualization2",
    container: "#container",
  });


  //render initial view
  setInitialType();

  function setInitialType() {
    adv.canvas({
      type: $("#selected_resource").val()
    }).run().fail(handleError);
  }

  $("#selected_resource").change(function() {
    adv.canvas({
      type: $("#selected_resource").val()
    }).run().fail(handleError);
  });

  function handleError(err) {
    console.log(err);
  }

  $('#selected_resource').prop('disabled', false);

  $("#container").resizable && $("#container").resizable({
    resize: function(event, ui) {
      adv.resize();
    }
  });
});