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();

​

  // setup chart labels

  chart.labels()

    .enabled(true)

    // position 'auto' automatically places labels outside the bar

    // if its bounds are larger than the bar.

    .position('auto')

    .padding(4)

    .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');

​

  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();

});