How to Implement Waterfall Chart using CanvasJS ?

In this article, we will learn to implement Waterfall charts using JavaScript Canvas JS plugin.

Waterfall Charts are very much similar to the same as column charts except that the base of the next column starts from the end value of the previous column. The Waterfall chart helps in visualizing the cumulative or total effect of positive (rising) or negative (falling) values in a sequence. 

Uses:

• It helps in calculating the running total value for a sequence of added or subtracted values.
• It helps in understanding the effect on net income by the rising (added values) and falling (subtracted values) both having different color codes.
• Heavily used to show profit or loss over a period of time.

Syntax:

new CanvasJS.Chart($("#ID"), {
 data: [{         
     type: "waterfall",     
     dataPoints: [
       {...},       
     ]
  }]        
});

Approach:

• In the HTML design, use the <div> tag for showing the waterfall chart.
• Include the above CDN link in your code to use the plugin features.
• In the script part of the code, instantiate the CanvasJS object by setting the data and other options properties of the library.
• Render the chart using the render() method of the Canvas JS plugin.
• Set other attributes or properties type, indexLabelPlacement,  indexLabelOrientation, fillOpacity, bevelEnabled, risingColor, and fallingColor as needed for the styling of the chart.
• Make charts depending on the data available for code implementation. 

CDN link:

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

Example 1: The following code demonstrates the simple waterfall chart using the Canvas JS plugin. It shows the sales and expenses of 2023 with an orange column showing the sales and a pink column showing the expense along with showing the total value after a series of added and deducted values by using the isCumulativeSum option setting.

Output:

How to implement Waterfall chart using Canvas JS plugin?

Example 2: The following code also shows a similar example of household monthly expenses along with many other custom settings.

Output:

How to implement Waterfall chart using Canvas JS plugin?

Conclusion: Use Waterfall Charts to visually illustrate how a starting value of something becomes a final value through a series of intermediate additions and subtractions which are time-based. They can be mostly used to monitor account balance after a series of deposits, bank transfers, cash out, and many such activities in the finance sector.