Sankey test

by kzoon

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

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

CSS

#container {
  height: 500px;
}

JavaScript

Highcharts.chart('container', {

  title: {
    text: 'Sankey Test'
  },

  series: [{
    type: 'sankey',
    colors: ["#7cb5ec", "#434348", "#90ed7d", "#f7a35c", "#8085e9", "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1"],
    nodes: [{
      id: 'S0',
      name: 'Spain',
      level: 0,
      color: "#7cb5ec"
    }, {
      id: 'S1',
      name: 'Spain',
      level: 1,
      color: "#7cb5ec"
    }, {
      id: 'F0',
      name: 'France',
      level: 0,
      color: "#434348"
    }, {
      id: 'F1',
      name: 'France',
      level: 1,
      color: "#434348"
    }, {
      id: 'G0',
      name: 'Germany',
      level: 0,
      color: "#90ed7d"
    }, {
      id: 'G1',
      name: 'Germany',
      level: 1,
      color: "#90ed7d"
    }, {
      id: 'U0',
      name: 'United Kingdom',
      level: 0,
      color: "#f7a35c"
    }, {
      id: 'U1',
      name: 'United Kingdom',
      level: 1,
      color: "#f7a35c"
    }, {
      id: 'I0',
      name: 'Italy',
      level: 0,
      color: "#8085e9"
    }, {
      id: 'I1',
      name: 'Italy',
      level: 1,
      color: "#8085e9"
    }, {
      id: 'N0',
      name: 'Netherlands',
      level: 0,
      color: "#f15c80"
    }, {
      id: 'N1',
      name: 'Netherlands',
      level: 1,
      color: "#f15c80"
    }],
    keys: ['from', 'to', 'weight'],
    data: [
      ['S0', 'S1', 0],
      ['F0', 'F1', 0],
      ['G0', 'G1', 0],
      ['U0', 'U1', 0],
      ['N0', 'N1', 0],
      ['N0', 'I1', 0],

      ['S0', 'F1', 5],
      ['S0', 'U1', 1],
      ['S0', 'N1', 8],
      ['F0', 'G1', 2],
      ['F0', 'I1', 2],
      ['F0', 'U1', 5],
      ['G0', 'S1', 1],
      ['G0', 'U1', 1],
      ['G0', 'N1', 1],
      ['U0', 'G1', 3],
      ['N0', 'S1', 6]

    ]

  }]

});