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 id="popupContent"></div>
	<button id="popupClose">Close</button>
</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

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

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

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

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

          Highcharts.chart(popupContent, {
						chart: {
							width: 200
						},
            series: [{
              type: 'organization',
              data: [
                ['CEO', 'Department1'],
                ['CEO', 'Department2'],
                ['CEO', 'Department3']
              ]
            }]
          });

          this.series.chart.update({
            tooltip: {
              enabled: false
            }
          });
        }
      }
    },
    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...