JSFiddle - React, Tailwind, and code Playground

by HarpreetRidhi

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['orgchart']}]}"></script>
<div id="chart_div" "></div>

JavaScript

$(function() {
   $(document).tooltip({
     content: function() {
       return $(this).prop('title');
     }
   });
 });



 google.setOnLoadCallback(drawChart);

 function drawChart() {
   var data = new google.visualization.DataTable();
   data.addColumn('string', 'Name');
   data.addColumn('string', 'Manager');
   data.addColumn({
     'type': 'string',
     'role': 'tooltip',
     'p': {
       'html': true
     }
   });


   data.addRows([
     [{
       v: 'Mike',
       f: 'Mike<div style="color:red; font-style:italic">President</div>'
     }, '', 'The President'],
     [{
       v: 'Jim',
       f: 'Jim<div style="color:red; font-style:italic">Vice President<div>'
     }, 'Mike', '<div style="color:red; font-style:italic">Vice President<div>'],
     ['Alice', 'Mike', ''],
     ['Bob', 'Jim', '<b>Bob</b> Sponge'],
     ['Carol', 'Bob', '']
   ]);

   var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
   var options = {
     tooltip: {
       isHtml: true
     },
     allowHtml: true
   };


   chart.draw(data, options);
 }