JSFiddle - React, Tailwind, and code Playground

by Black Label

HTML

<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/sankey.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/organization.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>


<div id="container"></div>

<div id="popup"></div>

CSS

#container {
  min-width: 300px;
  margin: 1em auto;
 /* border: 1px solid silver;*/
}

#container h4 {
  text-transform: none;
  font-size: 14px;
  font-weight: normal;
}

#container p {
  font-size: 13px;
  line-height: 16px;
}

h4 {
  font-size: 9.5px !important;
}

@media (min-width: 576px) {
  h4 {
    font-size: 12px !important;
  }
}

@media (min-width: 768px) {
  h4 {
    font-size: 12.5px !important;
  }
}

@media (min-width: 992px) {
  h4 {
    font-size: 15px !important;
  }
}

@media (min-width: 1200px) {
  h4 {
    font-size: 18px !important;
  }
}

#popup {
	border: 2px solid red;
	position: absolute;
	top: 50%;
	left: 50%;
	display: none;
	padding: 20px;
	transform: translate(-50%, -50%);
}

JavaScript

Highcharts.chart('container', {
  chart: {
    height: 200,
    inverted: true
  },

  title: {
    useHTML: true,
    text: ''
  },
  tooltip: {
    enabled: false
  },

  series: [{
    type: 'organization',
    name: 'Digital Transformation',
    keys: ['from', 'to'],
    point: {
      events: {
        click: function() {
          const popup = document.getElementById('popup');

          popup.innerHTML = this.info;
          popup.style.display = 'block';

        },
        mouseOut: function() {
          const popup = document.getElementById('popup');
          popup.style.display = 'none';
        }
      }
    },
    data: [
      ['CEO', 'Department1'],
      ['CEO', 'Department2'],
      ['CEO', 'Department3'],
      ['CEO', 'Department4'],
      ['CEO', 'Department5'],
      ['CEO', 'Department6'],
      ['CEO', 'Department7'],
      ['CEO', 'Department8'],
      ['CEO', 'Department9'],
    ],
    levels: [{
      level: 0,
      color: 'silver',
      dataLabels: {
        color: 'white'
      },
      height: 25
    }, {
      level: 1,
      color: 'silver',
      dataLabels: {
        color: 'black'
      },
      height: 25
    }],
    nodes: [{
      id: '',
      title: 'CEO',
      name: null,
      color: "#000000",
      info: "CEO"
    }, {
      className: 'title',
      id: 'Department1',
      title: 'Department1',
      name: '',
      layout: 'hanging',
      color: "#a8eafd",
      info: "Planning and coordination of the overall Division’s work program and operation, <br/>including program management finance/budget management, <br/>human resources management, and general office administration"
    }, {
      id: 'Department2',
      title: 'Department2',
      name: '',
      layout: 'hanging',
      color: "#a8eafd",
      info: "Methodological work on MDG indicators, databases; <br/>coordination of inter-agency groups for MDG global indicators, <br/>responsible for MDG global monitoring. <br/>Coordination of global gender...