html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  var data = [

    { x: 'Net Sales', value: 5085000 },

    { x: 'Cost of Sales', value: -1250450 },

    { x: 'Operating Expenses', value: -2350050 },

    { x: 'Other Income', value: 750000 },

    { x: 'Extraordinary Gain', value: -230050 },

    { x: 'Interest Expense', value: -500000 },

    { x: 'Taxes', value: 490000 }

  ];

​

  // create waterfall chart with our data

  var chart = anychart.waterfall(data);

​

  // set chart title

  chart.title('Income Statement for ACME Corp.');

​

  // add arrow

  var totalChangeArrow = chart.addArrow({

    from: 'Net Sales',

    to: 'Net Income'

  });

​

  // set arrow's label format

  totalChangeArrow.label().format('${%Value}{scale:(1000000)(1)|(M)}');

​

  // set connector stroke settings

  chart.connectors().stroke('#e96a26', 1, '5 2');

​

  // add subtotal points

  chart.addTotal({x: 'Cost of Sales', name: 'Gross Income'});

  chart.addTotal({x: 'Operating Expenses', name: 'Operating Income'});

  chart.addTotal({x: 'Interest Expense', name: 'Net Profit Before Taxes'});

  chart.addTotal({x: 'Taxes', name: 'Net Income'});

​

  // set scale minimum

  chart.yScale().minimum(0);

​

  // format y-axis labels

  chart.yAxis().labels().format('${%Value}{scale:(1000000)(1)|( mln)}');

​

  // set x-axis labels settings

  chart.xAxis().labels().rotation(-90);

​

  // set labels settings

  chart

    .labels()

    .enabled(true)

    .format(function () {

      if (this.isTotal) {

        return anychart.format.number(this.absolute, { scale: true });

      }

​

      return anychart.format.number(this.value, { scale: true });

    });

​

  // set container id for the chart

  chart.container('container');

  // initiate chart drawing

  chart.draw();

});