html,

    body,

    #container {

      width: 100%;

      height: 100%;

      margin: 0;

      padding: 0;

    }

var regions = ['Florida', 'Texas', 'Arizona', 'Nevada', 'California', 'New York', 'Utah'];

  anychart.onDocumentReady(function () {

    // create data set on our data

    var dataSet = anychart.data.set([

      ['Revenue', 65207, 26666, 41284, 48078, 88626, 96246, 26700],

      ['Services Revenue', 22512, 40973, 25299, 19772, 47969, 69278, 24186],

      ['Fixed Costs', -16361, -17580, -19979, -16066, -16099, -16979, -17404],

      ['Sales and Marketing Costs', -44059, -37883, -23080, -24733, -28260, -30234, -28889],

      ['Variable Costs', -22784, -27992, -25085, -13448, -10444, -24553, -17181]

    ]);

​

    // create waterfall chart

    var chart = anychart.waterfall();

​

    chart.labels().enabled(true).position('auto').background('#f6f6f6');

    // set chart title

    // chart.title('Income Statement by Region');

    regions.forEach(function (region, index) {

      var data = dataSet.mapAs({x: 0, value: index + 1});

​

      chart

        .waterfall()

        .data(data)

        .name(region);

    });

​

    // set labels settings

​

    // get stack labels

    var stackLabels = chart.stackLabels();

​

    // enable stack labels and set Y offset for them

    stackLabels

      .enabled(true)

      .format('{%stack}')

      .offsetY(10);

​

    // setup stack labels background

    stackLabels.background()

      .enabled(true)

      .stroke('#e6e6e6')

      .fill('#f6f6f6');

​

    // set legend settings

    // chart.legend().enabled(true).itemsSourceMode('default');

​

    chart.addTotal({x: 'Variable Costs', name: 'Total'});

​

    // set title tooltip

    chart.tooltip().titleFormat('{%SeriesName}');

​

    // set container id for the chart

    chart.container('container');

    // initiate chart drawing

    chart.draw();

  });