Highcharts Demo

author(s): Sebastian Bochan

by ipoly

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>
<script src="https://code.highcharts.com/modules/annotations.js"></script>

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

CSS

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

#csv {
    display: none;
}

JavaScript

Highcharts.chart('container', {

  title: {
    text: 'Highcharts Sankey Diagram'
  },
  annotations: [{
    labels: [{
      point: 'France',
      text: 'Max'
    }],
    labelOptions: {
      allowOverlap: true,
    },
    draggable: 'xy' // set by default
  }],


  series: [{
    keys: ['from', 'to', 'weight'],
    minLinkWidth: 1,
    data: [
      ['Brazil', 'Portugal', 5],
      ['Brazil', 'France', 1],
      ['Canada', 'Portugal', 1],
      ['Canada', 'France', 100000],
      ['Portugal', 'Angola', 2],
      ['Portugal', 'Senegal', 1],
      ['Portugal', 'Morocco', 1],
      ['Portugal', 'South Africa', 3],
      ['France', 'Angola', 1],
      ['France', 'Senegal', 3],
      ['France', 'Mali', 3],
      ['France', 'Morocco', 3],
      ['France', 'South Africa', 1]
    ],
    type: 'sankey',
    name: 'Sankey demo series'
  }]

});