How to Implement Waterfall Chart using CanvasJS ?

Last Updated : 23 Jul, 2024

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.

HTML

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">

    <script src="https://canvasjs.com/assets/script/canvasjs.min.js">
    </script>
</head>
<body>
    <div id="chartID" style="height:400px; max-width:950px; 
            margin:0px auto;">
    </div>
    <script>
        window.onload = function () {
            var chart = new CanvasJS.Chart("chartID", {
                title: {
                    text: "Half yearly Sales and Expense Report 2023"
                },
                data: [
                    {
                        type: "waterfall",
                        risingColor: "orange",
                        fallingColor: "pink",
                        dataPoints: [
                            { label: "Sales in Jan", y: 2000 },
                            { label: "Expense in Jan", y: -800 },
                            { label: "Sales in Feb", y: 1500 },
                            { label: "Expense in Feb", y: -1000 },
                            { label: "Sales in Mar", y: 1700 },
                            { label: "Expense in Mar", y: -900 },
                            {
                                label: "Quaterly total",
                                isIntermediateSum: true, color: "brown"
                            },
                            { label: "Sales in April", y: 1800 },
                            { label: "Expense in April", y: -700 },
                            { label: "Sales in May", y: 2100 },
                            { label: "Expense in May", y: -600 },
                            { label: "Sales in June", y: 1800 },
                            { label: "Expense in June", y: -800 },
                            //  automatically calculates the sum of the dataPoints 
                            {
                                label: "Total", isCumulativeSum: true,
                                color: "green"
                            }
                        ]// end dataPoints
                    }
                ]// end data
            }); //end CanvasJS.Chart
            chart.render();
        }// end window onload
    </script>
</body>
</html>

Output:

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

HTML

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">

    <script src="https://canvasjs.com/assets/script/canvasjs.min.js">
    </script>
</head>
<body>
    <div id="chartID" style="height:400px; max-width:950px; 
            margin:0px auto;">
    </div>
    <script>
        window.onload = function () {
            var chart = new CanvasJS.Chart("chartID", {
                title: {
                    text: "Household Monthly income and expenses"
                },

                axisY: {
                    prefix: "Rs.",
                    title: "In Indian Rupees"
                },
                data: [
                    {
                        indexLabelPlacement: "outside",
                        indexLabelOrientation: "vertical",
                        fillOpacity: 2,
                        // corner chiselled effect 
                        bevelEnabled: true,
                        type: "waterfall",
                        risingColor: "lightblue",
                        fallingColor: "yellow",
                        dataPoints: [
                            { label: "Salary", y: 85000 },
                            {
                                label: "Groceries",
                                y: -10000
                            },
                            { label: "Vegetables", y: -3000 },
                            {
                                label: "Freelance Salary",
                                y: 20000
                            },
                            { label: "fruits", y: -1700 },
                            {
                                label: "Fixed expenses",
                                isIntermediateSum: true,
                                color: "brown"
                            },
                            {
                                label: "Outsource Helpers",
                                y: -5000
                            },
                            {
                                label: "Weekend Overtime",
                                y: 8000
                            },
                            {
                                label: "Total income after outsource",
                                isIntermediateSum: true,
                                color: "gray"
                            },
                            { label: "Maintenance", y: -700 },
                            {
                                label: "Party exepenses",
                                y: -2100
                            },
                            {
                                label: "Expense in May",
                                y: -600
                            },
                            {
                                label: "Art remunerations",
                                y: 1800
                            },
                            {
                                label: "Entertainment expenses",
                                y: -800
                            },
                            //  automatically calculates 
                            // the sum of the dataPoints 
                            {
                                label: "Total Savings",
                                isCumulativeSum: true,
                                color: "green"
                            }
                        ]// end dataPoints
                    }
                ]// end data
            }); //end CanvasJS.Chart
            chart.render();
        }// end window onload
    </script>
</body>
</html>

Output:

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.

How to Implement Stacked Line Charts using ChartJS ?

geetanjali16

Improve

Article Tags :

How to Implement Waterfall Chart using CanvasJS ?

Similar Reads

Thank You!

What kind of Experience do you want to share?