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()); // eslint-disable-line no-undef

​

  // set chart's title

  chart.title('Website Users Flow');

​

  // set chart's padding

  chart.padding(10, 10, 30, 10);

​

  // set nodes width and padding

  chart.nodeWidth(100);

  chart.nodePadding(30);

​

  // Set flow's normal and hovered fill

  chart.flow({

    normal: {

      fill: '#DFE0DF .3'

    },

    hovered: {

      fill: '#DFE0DF .9'

    }

  });

​

  // Set flow's normal and hovered fill

  chart.node({

    normal: {

      fill: function () {

        return {

          keys: [

            anychart.color.lighten(this.sourceColor, 0.3),

            '.1 ' + anychart.color.lighten(this.sourceColor, 0.3),

            '.1 #FFFFFF'

          ],

          angle: -90

        };

      },

      stroke: '#bbb'

    },

    hovered: {

      fill: function () {

        return {

          keys: [

            anychart.color.darken(this.sourceColor, 0.3),

            '.1 ' + anychart.color.darken(this.sourceColor, 0.3),

            '.1 #FFFFFF'

          ],

          angle: -90

        };

      },

      stroke: '#666'

    }

  });

​

  // set container id for the chart

  chart.container('container');

​

  // initiate chart drawing

  chart.draw();

});