DEV Community

Cover image for How to Build a Waterfall Chart with JavaScript

Posted on • Updated on • Originally published at

How to Build a Waterfall Chart with JavaScript

Want to know how to create a Waterfall Chart for a web page or app? Here's a tutorial that will get you fully prepared for that sort of data visualization development with JavaScript — just published!

Waterfall charts illuminate how a starting value turns into a final value over a sequence of intermediate additions (positive values) and subtractions (negative values). These additions and subtractions can be time-based or represent categories such as multiple income sources and expenditures. In finance, a waterfall chart is often called a bridge; you may have also heard it referred to as a cascade, Mario, or flying bricks chart.

For illustration purpose, the 2020 income statement for Alphabet Inc. (GOOGL), Google's parent company, is visualized along the tutorial.

Check it out!

Discussion (0)