JSFiddle - React, Tailwind, and code Playground

HTML

<script type='text/javascript' src="http://code.jquery.com/jquery-2.1.0.js"></script>
    <script type='text/javascript' src="http://localhost:8080/jasperserver-pro/client/visualize.js"></script>
    
<select id="selected_resource" disabled="true" name="report">
<option value="/public/Samples/Ad_Hoc_Views/Custom_Ad_Hoc_View2">chart</option>
<option value="/public/viz/Hyperlinks/Table">table</option>
<option value="/public/viz/Hyperlinks/Crosstab">crosstab</option>
  
  




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

CSS

#container .jr-mAdhoc-visualization-title-text.jr.jr-jAdhocVisualizationTitleText {
  font-size: 22px;
  color: #FA6900;
}

#container rect.highcharts-background {
  fill: #A7DBDB;
}

#container rect {
  fill: #65C9DD;
}

#container g.highcharts-series-group rect {
  fill: #F2E800;
}

#container g.highcharts-legend-item rect {
  fill: #F2E800;
}

/*Datatable header style*/
#container .jr-mDatatable-cellRowlabel.jr-mDatatable-cellField.jr,
#container .jr-mDatatable-cellColumnlabel.jr-mDatatable-cellField.jr,
#container .jr-mDatatable-header.jr .jr-mDatatable-row.jr {
  background-color: #8B59A7;
  color: #FFF8DC;
}

/*Datatable header font color*/
#container .jr-mDatatable-header.jr .jr-mDatatable-row.jr .jr-mDatatable-cell.jr {
  color: #FFF8DC;
}

/*Datatable group background color*/
#container .jr-mDatatableCrosstab-header-rowlabelsContainer.jr .jr-mDatatable-cellRowlabel.jr,
#container .jr-mDatatable-row.jr-mDatatable-rowGroup.jr .jr-mDatatable-cell.jr {
  background-color: #B388CB;
  color: #FFF8DC;
}

/*Datatable odd row background color*/
#container .jr-mDatatable-rowOdd.jr {
  background-color: #D4B9E2;
}

/*Datatable even row background color*/
#container .jr-mDatatable-rowEven.jr {
  background-color: #DECCE8;
}

/*Datatable text style*/
#container .jr-mDatatable-cell-text.jr {
  line-height: 30px;
  font-style: italic;
}

JavaScript

/*

    "/public/Samples/Ad_Hoc_Views/11__Top_5_Products_by_City",
    /public/Samples/Ad_Hoc_Views/01__Geographic_Results_by_Segment
*/

visualize({
  auth: {
    name: "superuser",
    password: "superuser"
  }
}, function(v) {
  function renderView(uri) {
    var adv = v.adhocView({
      resource: uri,
      container: "#container",
      success: function() {

        console.log(arguments);
      },
      error: function() {
        console.log(arguments);
      }
    });
  }

  //render initial view
  renderView($("#selected_resource").val());

  $("#selected_resource").change(function() {
    //clean container
    $("#container").html("");
    //render selected view
    renderView($("#selected_resource").val());
  });

  //enable report chooser
  $(':disabled').prop('disabled', false);

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

});