JSFiddle - React, Tailwind, and code Playground

by core972

HTML

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

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

CSS

#container {
  min-width: 300px;
  max-width: 800px;
  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;
}

JavaScript

Highcharts.chart('container', {

  chart: {
    height: 600,
    inverted: true
  },

  title: {
    text: 'Highcharts Org Chart'
  },

  series: [{
    type: 'organization',
    name: 'Highsoft',
    keys: ['from', 'to'],
    data: [
      ['A', 'B'],
      ['B', 'C'],

      ['C', 'D1'],
      ['C', 'D2'],
      ['C', 'D3'],
      ['C', 'D4'],
      ['C', 'D5'],
      ['C', 'D6'],
      ['C', 'D7'],
      ['C', 'D8'],
      ['C', 'D9'],

      ['D1', 'E1'],
      ['D1', 'E2'],
      ['D1', 'E3'],

      ['D2', 'E4'],
      ['D2', 'E5'],
      ['D2', 'E6'],

      ['D3', 'E7'],
      ['D3', 'E8'],
      ['D3', 'E9'],
    ],
    levels: [
      {
        level: 0,
        color: 'silver',
        dataLabels: {
          color: 'black'
        },
        height: 25
      }, {
        level: 1,
        color: 'silver',
        dataLabels: {
          color: 'black'
        },
        height: 25
      }, {
        level: 2,
        color: '#980104'
      }, {
        level: 4,
        color: '#359154'
      }
    ],

    colorByPoint: false,
    color: '#007ad0',
    dataLabels: {
      color: 'white'
    },
    borderColor: 'white',
    nodes:[
    	{
      	id:"D1",
        name: "D1",
        layout: "hanging",
      },
    	{
      	id:"D2",
        name: "D2",
        layout: "hanging",
      },
    	{
      	id:"D3",
        name: "D3",
        layout: "hanging",
      },
    ]
  }],
  tooltip: {
    outside: true
  },

});