html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create data

    var data = [

      {from: "Canada",  to: "France",  weight: 2230000, custom_field: "info 1"},

      {from: "Canada",  to: "Germany", weight: 1990000, custom_field: "info 2"},

      {from: "Canada",  to: "Italy",   weight: 1180000, custom_field: "info 3"},

      {from: "Canada",  to: "Spain",   weight:  990000, custom_field: "info 4"},

      {from: "USA",     to: "China",   weight: 1250000, custom_field: "info 5"},

      {from: "USA",     to: "France",  weight:  950000, custom_field: "info 6"},

      {from: "USA",     to: "Germany", weight: 2020000, custom_field: "info 7"},

      {from: "USA",     to: "Spain",   weight: 1110000, custom_field: "info 8"},

      {from: "France",  to: "China",   weight: 1100000, custom_field: "info 9"},

      {from: "France",  to: "Japan",   weight: 1050000, custom_field: "info 10"},

      {from: "France",  to: "India",   weight: 1030000, custom_field: "info 11"},

      {from: "Germany", to: "China",   weight: 2150000, custom_field: "info 12"},

      {from: "Germany", to: "Japan",   weight:  660000, custom_field: "info 13"},

      {from: "Germany", to: "India",   weight: 1200000, custom_field: "info 14"},

      {from: "Italy",   to: "China",   weight: 1180000, custom_field: "info 15"},

      {from: "Spain",   to: "China",   weight: 1120000, custom_field: "info 16"},

      {from: "Spain",   to: "Japan",   weight:  980000, custom_field: "info 17"}

    ];

​

    // create a chart and set the data

    var chart = anychart.sankey(data);

​

    // set the width of nodes

    chart.nodeWidth("50%");

​

    // configure labels of nodes

    chart.node().labels().useHtml(true);

    chart.node().labels().format(function() {

      return "<span style='font-weight:bold'>" + this.name +

             "</span><br>" + Math.round(this.value/100000)/10 + " mln";

    });

​

    // configure labels of flows

    chart.flow().labels().format(function() {

      return Math.round(this.value/100000)/10 + " mln";

    });

​

    // configure tooltip titles of nodes

    chart.node().tooltip().titleFormat(function() {

      return this.name + " (" + Math.round(this.value/100000)/10 +

             " mln)";

    });

​

    // configure tooltips of nodes

    chart.node().tooltip().format(function() {

​

      var incomeText = "";

      var outcomeText = "";

​

      for (i = 0; i < this.income.length; i++) {

        incomeText += Math.round(this.income[i].value/100000)/10 +

                      " mln <- " + this.income[i].name + "\n";

      }

​

      for (i = 0; i < this.outcome.length; i++) {

        outcomeText += Math.round(this.outcome[i].value/100000)/10 +

                       " mln -> " + this.outcome[i].name + "\n";

      }

​

      if (this.outcome.length > 0) {

        incomeText = incomeText + "\n";

      }

      return incomeText + outcomeText;

    });

​

    // configure tooltips of flows

    chart.flow().tooltip().format(function() {

      return Math.round(this.value/100000)/10 + " mln" + 

      "\n\n" + this.getData("custom_field");

    });

​

    // set the chart title

    chart.title("Sankey Diagram: Labels and Tooltips (Formatting Functions)");

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

});