JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.google.com/jsapi"></script>
<div id="dialog">
  <div id="chart_div"></div>
</div>
<a href="#" id="open">Open Charts For SDD</a>

JavaScript

google.load("visualization", "1", {
  packages: ["corechart"]
});
var mydata = [
  ['13-Oct', 1097.95, 1113.45, 1109.95, 1132],
  ['14-Oct', 1095.6, 1101.15, 1113.45, 1117],
  ['15-Oct', 1092.1, 1129.2, 1116, 1132],
  ['16-Oct', 1130, 1170.3, 1130, 1182.4],
  ['19-Oct', 1144.5, 1162.15, 1174, 1182.2]
];

function drawChart() {
  var data = google.visualization.arrayToDataTable(mydata, true);
  var days = 5;
  var view = new google.visualization.DataView(data);
  var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));

  chart.draw(view, {
    height: 400,
    width: 600,
    chartArea: {
      left: '7%',
      width: '70%'
    },
    series: {
      0: {
        type: 'candlesticks'
      },
      1: {
        type: 'line'
      }
    }
  });
}

$(document).ready(function() {
  drawChart();
  $("#dialog").dialog({
    modal: false,
    autoOpen: false,
    height: "auto",
    width: "auto",
    open: function() {
      var self = this;
      $(document).one('click', function(e) {
        if (!$(e.target).closest('.ui-dialog').length) {
          $(self).dialog('close');
        }
      });
    }
  });
  $("#dialog").dialog("option", "title", "Test Charts");
  $('#open').click(function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    $("#dialog").dialog('open');
  });
});