Highcharts Diagram chart

by saurabhkolhe

HTML

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

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

CSS

.highcharts-node {
  width: 100px;
}

JavaScript

var that = this;
Highcharts.chart('container', {
  chart: {
    height: 600,
    inverted: true,
    type: 'organization'
  },

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

  plotOptions: {
    organization: {
    	type: 'organization',
      hangingIndentTranslation: 'none',
    }
  },

  series: [{
    type: that.returnType() ,
    keys: ['from', 'to'],
    data: [
      ['node1', 'node2'],
      ['node1', 'node3'],
      ['node2', 'node4'],
      ['node3', 'node5'],
      ['node3', 'node6'],
      ['node3', 'node7'],
      ['node7', 'node8']
    ],
		dataLabels: {
    	formatter: function(node){
    	        debugger
    	        /* node.backgroundColor = 'blue'; */
              node.style.color = "blue"
    	        return node;
    	      }
    },
    nodes: [{
      id: 'node1',
      layout: "normal",
      color: "green",
                  /* color: "green" */
    }, {
      id: 'node2',
      layout: "hanging",
      color: "green",
      /* color: "green" */
    }, {
      id: 'node3',
      color: "green",
      layout: "hanging",
    }, {
      id: 'node4',
      color: "yellow"
    }, {
      id: 'node5',
      color: "yellow"
    },{
      id: 'node6',
      color: "yellow"
    },{
      id: 'node7',
      color: "green",
      layout: "hanging"
    },{
      id: 'node8',
      color: "yellow"
    }]
  }],

  exporting: {
    allowHTML: true,
    sourceWidth: 800,
    sourceHeight: 600
  }
});

function returnType(){
	return 'organization';
}