html, body, #WaterfallContainer {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

​

  // set the data

  var data = [

    { x: "Revenue", value: 5077.482 },

    { x: "Cost of revenue", value: -1797.510 },

    { x: "Gross profit", isTotal: true },

    { x: "Operating expenses", value: -3772.711 },

    { x: "Income (loss) from operations", isTotal: true },

    { x: "Interest expense", value: -51.186 },

    { x: "Interest income", value: 35.683 },

    { x: "Other income (expense), net", value: 97.129 },

    { x: "Income (loss) before income taxes", isTotal: true },

    { x: "(Provision) benefit for income taxes", value: 189.704 },

    { x: "Net income (loss)", isTotal: true }

  ];

​

  // create a waterfall chart

  var chart = anychart.waterfall();

​

  // add the zero line

  var line = chart.lineMarker().value(0);

  // rotate the chart

  chart.isVertical(true);

  // set the reverse order of the bars

  chart.xScale().inverted(true);

  // customize the labels

  chart.labels()

    .useHtml(true)

    .format(function() {

      if (this.isTotal)

        return "<span style='color: #dd2c00; font-weight: 100; font-size: 11'>" +

          this.absolute.toFixed(0) + "M" + "</span>";

        return "<span style='color: gray; font-weight: 100; font-size: 11'>" +

          this.diff.toFixed(0) + "M" + "</span>";

    });

  // set the chart title

  chart.title("Income Statement for Twitter Inc. (2021)");

  // customize the format of the y-axis labels

  chart.yAxis().labels().format("{%Value}{scale:(1000)(1)|(B)}");

  // set the y-axis title

  chart.yAxis().title("USD");

  // create a series and set the data

  var series = chart.waterfall(data);

​

  // configure the tooltip title

  chart.tooltip().titleFormat("{%x}" + " (M USD)");

  // customize the connector stroke

  chart.connectorStroke("#ff6666", 2, "2 2", "round");

  // configure the visual settings of the series:

  // normal state

  series.normal()

    .fill("#8C8C8C", 0.7)

    .hatchFill("forward-diagonal", "#BEBEBE", 1, 10)

    .stroke("#8C8C8C")

    .fallingFill("#FC4E6F", 0.8)

    .fallingStroke("#FC4E6F", 1, )

    .risingFill("#44C882", 0.8)

    .risingStroke("44C882");

  // hovered state

  series.hovered()

    .fill("#8C8C8C", 0.1)

    .hatchFill("forward-diagonal", "#117A65", 1, 10)

    .stroke("#8C8C8C", 2)

    .fallingFill("#FC4E6F", 0.1)

    .fallingStroke("#FC4E6F", 2, "10 5", )

    .risingFill("44C882", 0.1)

    .risingStroke("44C882", 2);

  // selected state

  series.selected()

    .fill("#8C8C8C", 0.5)

    .hatchFill("forward-diagonal", "#8C8C8C", 1, 10)

    .stroke("#8C8C8C", 4)

    .fallingFill("#922B21", 0.5)

    .fallingStroke("#B03A2E", 4, )

    .risingFill("#117864", 0.5)

    .risingStroke("#148F77", 1);

  // add an arrow

  var totalChangeArrow = chart.addArrow({

    from: "Revenue",

    to: "Net income (loss)"

  });

​

  // set arrow's label format

  totalChangeArrow.label().format("{%Value}{numDecimals:0}" + "M");

​

  // set the container id for the waterfall chart

  chart.container("WaterfallContainer");

  // draw the resulting chart

  chart.draw();

​

});