html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    // create sankey chart

    var chart = anychart.sankey();

​

    // set chart's data

    chart.data(getData());

​

    // set chart's node width

    chart.nodeWidth(100);

​

    // set chart's node padding

    chart.nodePadding(30);

​

    // set tooltips position for node

    chart.node().tooltip().anchor('center-bottom');

​

    // Set flow's normal and hovered fill

    chart.flow({

        normal: {

            fill: function () {

                return anychart.color.lighten(this.sourceColor, .5) + ' ' + .3

            },

        },

        hovered: {

            fill: function () {

                return this.sourceColor + ' ' + .9

            },

        }

    });

​

    // set container id for the chart

    chart.container('container');

​

    // initiate chart drawing

    chart.draw();

});

​

function getData() {

    return [

        ['Coal', 'Reserves', 64],

        ['Coal', 'Coal Exports', 31],

        ['Coal', 'Heating', 82],

        ['Coal', 'Electricity', 234],

        ['Electricity', 'Lighting', 34],

        ['Electricity', 'Heating', 200],

        ['Natural Gas', 'Reserves', 30],

        ['Natural Gas', 'Electricity', 100],

        ['Natural Gas', 'Heating', 100],

​

    ]

}