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: true,
      autoOpen: false,
      height: "auto",
      width: "auto",
        open: function(){
            jQuery('.ui-widget-overlay').bind('click',function()       {
                jQuery('#dialog').dialog('close');
            })
        }
    }); 
  $("#dialog").dialog("option", "title", "Test Charts");
  $('#open').click( function(e){
      e.preventDefault();
      $("#dialog").dialog('open');
  })
});