JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://infra-platforms-phase2-18418-anshinde.pfa.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
Change visualization type by API: <select id="viz_type_list_2" name="viz_type_list_2"></select>

<!--Provide container to render your visualization-->
<div id="container" style="height: 400px;position: relative"></div>

CSS

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

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

/*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;
  font-size: 1.14em;
  border: none;
}

/*Datatable...

JavaScript

var adv;
visualize({
  auth: {
    name: "joeuser",
    password: "joeuser",
    organization: "organization_1"
  }
}, function(v) {
  function renderView(chartType) {
    adv = v.adhocView({
      resource: "/public/viz/Adhoc/Change_Visualization1",
      container: "#container",
      canvas: {
          type: "Table"
      },
      success: function() {
        console.log("Arguments", JSON.stringify(arguments));
      },
      error: function(e) {
        console.log(e);
      }
    });
  }

  //render initial view
  renderView();
	
  $("#viz_type_list_2").html(createOptionsForVizTypes());

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

  //show error
  function handleError(err) {
    console.log(err.message);
  }
});

function createOptionsForVizTypes() {
	var types = ["Table", "Crosstab", "Bar", "Column", "Line", "Area", "Spline", "AreaSpline", "StackedBar", "StackedColumn", "StackedArea", "StackedPercentBar", "StackedPercentColumn", "StackedPercentArea", "Pie", "DualLevelPie", "TimeSeriesLine", "TimeSeriesArea", "TimeSeriesSpline", "TimeSeriesAreaSpline", "ColumnLine", "ColumnSpline", "StackedColumnLine", "StackedColumnSpline", "MultiAxisLine", "MultiAxisSpline", "MultiAxisColumn", "Scatter", "Bubble", "SpiderColumn", "SpiderLine", "SpiderArea", "HeatMap", "TimeSeriesHeatMap", "SemiPie", "DualMeasureTreeMap", "TreeMap", "OneParentTreeMap"];
  var result = "";
	types.forEach(function(type) {
  		result += "<option value='" + type + "'>" + type + "</option>";
  });
  return result;
}