JSFiddle - React, Tailwind, and code Playground

by spgoo

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>

<div id="container"></div>
<button type="button" id="addNode">Add node</button>
<button type="button" id="delNode">Delete node</button>
<button type="button" id="delNodeChildren">Delete node and childrens</button>

CSS

#addNode{
  margin-top:30px;
}

JavaScript

let selectedNode = undefined;
let chart = Highcharts.chart('container', {
    chart: {
        height: "60%",
        inverted: true
	},
	
	credits: {
        enabled: false
    },

    title: {
        text: 'Dynamic Organisation'
    },
    
     series: [{
        type: 'organization',
        name: 'Dynamic Organisation',
        keys: ['from', 'to'],
        data: [
            ['root', '1'],
            ['1', '2'],
            ['2', '3'],
            ['2', '4'],
            ['2', '5'],
            ['2', '6'],
            ['2', '7'],
            ['3', '8'],
            ['3', '9'],
            ['5', '10'],
            ['6', '11']
        ],
        colorByPoint: false,
        color: '#088ad0',
        dataLabels: {
					color: 'white'
        },
        borderColor: 'white',
				nodeWidth: 65
        
      }],
      tooltip: {
      	outside: true
			},
    	exporting: {
        	allowHTML: true,
        	sourceWidth: 800,
        	sourceHeight:600
			},
      	plotOptions:{
        	series:{
          	allowPointSelect: true,
            point:{
                cursor: 'pointer',
                events:{
                  select: function (event) {
                    console.log("selected");

                    if(selectedNode !== undefined && 
                      selectedNode.selected &&
                      selectedNode !== this ){
                        selectedNode.select();
                    }

                    selectedNode = this;
                  },
                  unselect: function (event) {
                    selectedNode = undefined;
                    console.log("unselected");
                  }
                }
              }
            }
          }


});

$('#addNode').on('click', function(){
	
	if(selectedNode === undefined){
		alert("Select a node!");
	}else{
		chart.series[0].addPoint([selectedNode.id, 'newSystem',"dkdk"]);
	}	
});


$('#delNode').on('click', function(){

	if(selectedNode ===...