html, body, #WaterfallContainer {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

​

  // set the data

  var data = [

    { x: 'Total Revenue', value: 182527 },

    { x: 'Cost of Revenue', value: -84732 },

    { x: 'Gross Profit', isTotal: true },

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

    { x: 'Operating Income', isTotal: true },

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

    { x: 'Other Expenses', value: -1725 },

    { x: 'Income Before Taxes', isTotal: true },

    { x: 'Provision for Taxes', value: -7813 },

    { x: 'Net Income', isTotal: true }

  ];

​

  // create a waterfall chart with the data

  var chart = anychart.waterfall(data);

​

  // set the chart title

  chart.title('Income Statement for Alphabet Inc. (GOOGL), 2020');

  // set the y-axis title

  chart.yAxis().title('Amount (in millions)');

  // add the usd symbol to the y-axis labels

  chart.yAxis().labels().format('${%Value}');

​

  // rotate the x-axis labels

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

  // customize the connector stroke

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

  // enable HTML for the labels

  chart.labels().useHtml(true);

  // customize the labels

  chart.labels().format(function() {

    if (this.isTotal)

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

        this.absolute + "</span>";

    return this.diff;

  });

​

  // set the container id for the waterfall chart

  chart.container('WaterfallContainer');

  // draw the resulting chart

  chart.draw();

​

});