html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // create data set on our data

  var dataSet = anychart.data.set([

    ['Revenue', 175000, 140000, 250650],

    ['Services Revenue', 235050, 225250, 390580],

    ['Fixed Costs', 177950, 160550, 290890],

    ['Sales and Marketing Costs', 121050, 105500, 220500],

    ['Variable Costs', 65890, 55890, 105000]

  ]);

​

  // map data for the first series, take x from the zero column and value from the first column of data set

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

  // map data for the second series, take x from the zero column and value from the second column of data set

  var data2 = dataSet.mapAs({ x: 0, value: 2 });

  // map data for the third series, take x from the zero column and value from the third column of data set

  var data3 = dataSet.mapAs({ x: 0, value: 3 });

​

  // create waterfall chart

  var chart = anychart.waterfall();

​

  // set chart title

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

  // set data mode

  chart.dataMode('absolute');

​

  chart.pointWidth('85%');

​

  // create waterfall series, Iowa series

  chart

    .waterfall()

    .data(data1)

    .name('Iowa')

    .fill('#3c5e79')

    .risingFill('#3c5e79')

    .fallingFill('#3c5e79')

    .normal()

    .stroke('#3c5e79')

    .risingStroke('#3c5e79')

    .fallingStroke('#3c5e79');

​

  // create waterfall series, Oklahoma series

  chart

    .waterfall()

    .data(data2)

    .name('Oklahoma')

    .fill('#5686ad')

    .risingFill('#5686ad')

    .fallingFill('#5686ad')

    .normal()

    .stroke('#3c5e79')

    .risingStroke('#3c5e79')

    .fallingStroke('#3c5e79');

​

  // create waterfall series, Texas series

  chart

    .waterfall()

    .data(data3)

    .name('Texas')

    .fill('#7bc0f7')

    .risingFill('#7bc0f7')

    .fallingFill('#7bc0f7')

    .normal()

    .stroke('#3c5e79')

    .risingStroke('#3c5e79')

    .fallingStroke('#3c5e79');

​

  // set labels settings

  chart.labels().enabled(true).fontColor('#fff').position('center');

​

  // 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'});

  chart.splitTotal([

    {name: 'Texas', value: 105000, fill: '#3c5e79'},

    {name: 'Oklahoma', value: 55890, fill: '#5686ad'},

    {name: 'Iowa', value: 65890, fill: '#7bc0f7'}

  ]);

​

  // set title tooltip

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

​

  // set container id for the chart

  chart.container('container');

  // initiate chart drawing

  chart.draw();

});