JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div id="chartContainer" style="height: 360px; width: 100%;"></div>

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body...
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

JavaScript

var chartColors = "#dee2e6";
var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  toolTip:{
    content: "Found in {y} of 19 Documents"
  },
  axisY:{
    maximum: 20,
    gridColor: chartColors,
    lineColor: chartColors,
    tickColor: chartColors
  },
  axisX:{
    lineColor: chartColors,
    tickColor: chartColors
  },
  data: [{
    type: "column",
    cursor:"pointer",
    click: onClick,
    indexLabelPlacement: "outside",
    indexLabel: "{y}",
    dataPoints: [
      { "label": "Asset Taxes", "y": 19, "link": "/modal/kDocListByField.cfm?KFieldID=682&ProjectID=10", "indexLabel": "100%" },
      { "label": "Employment", "y": 9, "link": "/modal/kDocListByField.cfm?KFieldID=689&ProjectID=10", "indexLabel": "47%" },
      { "label": "Excluded\nAssets", "y": 19, "link": "/modal/kDocListByField.cfm?KFieldID=683&ProjectID=10", "indexLabel": "100%" },
      { "label": "Litigation", "y": 18, "link": "/modal/kDocListByField.cfm?KFieldID=688&ProjectID=10", "indexLabel": "95%" },
      { "label": "Offsite\nDisposal", "y": 15, "link": "/modal/kDocListByField.cfm?KFieldID=686&ProjectID=10", "indexLabel": "79%" },
      { "label": "Operating\nExpenses", "y": 13, "link": "/modal/kDocListByField.cfm?KFieldID=690&ProjectID=10", "indexLabel": "68%" },
      { "label": "Personal\nInjury", "y": 18, "link": "/modal/kDocListByField.cfm?KFieldID=684&ProjectID=10", "indexLabel": "95%" },
      { "label": "Royalties", "y": 17, "link": "/modal/kDocListByField.cfm?KFieldID=687&ProjectID=10", "indexLabel": "89%" }
    ]
  }]
});
chart.render();
var link;
function onClick(e){
  link = e.dataPoint.link;
  $('#myModal').modal('show');
};

$('#myModal').on('shown.bs.modal', function (e) {
  $('#myModal').find('.modal-body').load(link)
});
$('#myModal').on('hidden.bs.modal', function (e) {
  $('#myModal').find('.modal-body').html('')
});