JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="org-chart"></div>

JavaScript

google.charts.load('current', {
	packages : ["orgchart"]
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
	var data = new google.visualization.DataTable();
	data.addColumn('string', 'Name');
	data.addColumn('string', 'Manager');
	data.addColumn('string', 'ToolTip');

	// Pull user information from Drupal (	Drupal.settings.orgchart.userlist)
	var userlist = "[{v:'CN=My Name,OU=IT,OU=Fesslers,DC=hpsi,DC=local', f:'My Name'}, 'CN=Supervisor Name,OU=Sr. Management,OU=Fesslers,DC=hpsi,DC=local', ''], [{v:'', f:'Another Name'}, '', ''], [{v:'CN=Yet Another,OU=IT,OU=Fesslers,DC=hpsi,DC=local', f:'Yet Another'}, 'CN=My Name,OU=IT,OU=Fesslers,DC=hpsi,DC=local', '']";
	userlist=eval("["+userlist+"]");

	// For each orgchart box, provide the name, manager, and tooltip to show.
	console.log(userlist);
	data.addRows(userlist);

	// Create the chart.
	var chart = new google.visualization.OrgChart(document.getElementById('org-chart'));
	// Draw the chart, setting the allowHtml option to true for the tooltips.
	chart.draw(data, {
		allowHtml : true
	});
}