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;
}

JavaScript

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

  title: {
    text: null
  },
    plotOptions: {
      series: {
        animation: false,
        dataLabels: {
          enabled: true,
          nodeFormat: "{point.name}mm"
        },
        allowPointSelect: true,
        colorByPoint: false,
        point: {
          events: {
            select: function(event) {
              if (typeof this.isNode !== 'undefined') return;
              this.custom_old_color = this.color;
              this.update({
                color: 'red'
              });
            },
            unselect: function(event) {
              if (typeof this.isNode !== 'undefined') return;
              this.update({
                color: this.custom_old_color
              });
            }
          }
        }

      },
  },
  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'
    }],

  }]

});