html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

  // create data

  var data = [

    {from: "Canada",  to: "France",  weight: 2230000},

    {from: "Canada",  to: "Germany", weight: 1990000},

    {from: "Canada",  to: "Italy",   weight: 1180000},

    {from: "Canada",  to: "Spain",   weight:  990000},

    {from: "USA",     to: "France",  weight:  950000},

    {from: "USA",     to: "Germany", weight: 2020000},

    {from: "USA",     to: "Spain",   weight: 1110000}

  ];

​

  // create a chart and set the data

  var chart = anychart.sankey(data);

​

  // set the width of nodes

  chart.nodeWidth("30%");

​

  // set the chart title

  chart.title("Sankey Diagram: Basic Sample");

​

​

​

  // set the container id

  chart.container("container");

​

  // initiate drawing the chart

  chart.draw();

​

  chart.listen('click', function(e) {

    if (e.domTarget.tag && e.domTarget.tag.element) {

    var el = e.domTarget.tag.element;      

      var type = el.type ? 'flow' : 'node';

      if (type === 'node') {

        var level = el.level;

        var name = el.name;

        console.log(`Node on level ${level} with name ${name}`);

      }

      if (type === 'flow') {

        console.log('Flow was clicked');

      }

    }

​

  });

});