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

  var chart = anychart.waterfall();

​

  // 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;

  });

  // create a series and set the data

  var series = chart.waterfall(data);

​

  // customize the appearance of the waterfall chart columns

  // first, columns indicating total values

  series.normal().fill("#ff6666", 0.3);

  series.normal().hatchFill("forward-diagonal", "#ff6666", 0.5, 10);

  series.normal().stroke("#ff6666");

  series.hovered().fill("#ff6666", 0.1);

  series.hovered().hatchFill("forward-diagonal", "#ff6666", 0.5, 10);

  series.hovered().stroke("#ff6666", 2);

  series.selected().fill("#ff6666", 0.5);

  series.selected().hatchFill("forward-diagonal", "#ff6666", 0.5, 10);

  series.selected().stroke("#ff6666", 4);

​

  // second, falling columns

  series.normal().fallingFill("#00cc99", 0.3);

  series.normal().fallingStroke("#00cc99", 1, "10 5", "round");

  series.hovered().fallingFill("#00cc99", 0.1);

  series.hovered().fallingStroke("#00cc99", 2, "10 5", "round");

  series.selected().fallingFill("#00cc99", 0.5);

  series.selected().fallingStroke("#00cc99", 4, "10 5", "round");

​

  // third, rising columns

  series.normal().risingFill("#0066cc", 0.3);

  series.normal().risingStroke("#0066cc");

  series.hovered().risingFill("#0066cc", 0.1);

  series.hovered().risingStroke("#0066cc", 2);

  series.selected().risingFill("#0066cc", 0.5);

  series.selected().risingStroke("#0066cc", 4);  

​

  // set the container id for the waterfall chart

  chart.container('WaterfallContainer');

  // draw the resulting chart

  chart.draw();

​

});