Highcharts Demo

author(s): Torstein Hønsi

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/exporting.js"></script>

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

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
    border: 1px solid silver;
}

#csv {
	display: none;
}
.additionalClass{
  fill: black !important;
}

JavaScript

var str = 'Abc';
Highcharts.chart('container', {

    title: {
        text: null
    },
  plotOptions: {
    series: {
      animation: false,
      dataLabels: {
        enabled: true,
        nodeFormat: "{point.name}mm"
      },
      colorByPoint: false,
      events: {
                click: function (event) {                         
                	let old_HL =  document.querySelector('#container .highcharts-link.highcharts-point.additionalClass');
                  if (old_HL) old_HL.classList.remove('additionalClass');
                    event.target.classList.add('additionalClass');
                }
       }
      
    },
  },
    series: [{
        keys: ['from', 'to', 'weight'],
        data: [
          ['Contact', 'Contact1', 1], 
          ['Contact', 'Qualified1', 1], 
          ['Contact', 'Selected1', 1], 
          ['Qualified', 'Qualified1', 1], 
          ['Qualified', 'Selected1', 1], 
          ['Qualified', 'Proposal1', 1], 
          ['Qualified', 'Closed Lost', 1], 
          ['Selected', 'Selected1', 1], 
          ['Selected', 'Proposal1', 1], 
          ['Selected', 'Closed Won', 1], 
          ['Selected', 'Pushed Out', 1],
          ['Proposal', 'Selected1', 1], 
          ['Proposal', 'Proposal1', 1], 
          ['Proposal', 'Closed Won', 1], 
          ['Proposal', 'Closed Lost', 1], 
          ['New Deals', 'Contact1', 1], 
          ['New Deals', 'Qualified1', 1], 
          ['New Deals', 'Selected1', 1], 
          ['Pulled in Deals', 'Selected1', 1], 
          ['Pulled in Deals', 'Proposal1', 1]
        ],
        type: 'sankey',
        name: 'Sankey demo series',
        nodes: [{
            id: 'Contact1',
            name: 'Total energy required'
        }],
        
    }]

});