Tutorials

Waterfall chart: What is it and how do you read it?

by

Highsoft

7 minutes read

Data visualization, Highcharts Core, JavaScript

Waterfall chart: What is it and how do you read it?

Waterfall charts are powerful visualization tools that show how sequential positive and negative values affect a total. These charts help track how a starting value changes through intermediate steps to reach a final result. While they originated in financial analysis, waterfall charts now serve many industries where understanding cumulative changes is important.

This blog post will guide you through the creation of a waterfall chart using Highcharts. Whether you’re a developer working with JavaScript, .NET, React or other common frameworks, we’re confident you’ll find the inspiration you need.

Highcharts also integrates seamlessly with popular languages such as Python, R, PHP and Java, as well as mobile platforms like iOS and Android. Additional support for frameworks like Svelte, Angular, and Vue, makes it a versatile tool for various development environments.

To see more examples and get an even better understanding of the opportunities Highcharts offers, please head over to the demo section of our website or read up on the technical documentation on how to get started. Once you get the hang of it, the API reference will help you customize your charts in no time.

Core components of waterfall charts

A waterfall chart creates a visual flow using a series of connected bars that show how values change over time or across categories. Each bar starts where the previous one ended, creating the distinctive cascading effect that gives these charts their name. Understanding the key elements helps interpret these visualizations effectively.

Starting value bar: The initial point that serves as the baseline for subsequent changes, typically shown in a distinct color
Intermediate bars: Represent increases (positive values) or decreases (negative values) that modify the initial value
Running totals: Optional checkpoints that show subtotals at key points in the sequence
Final result: The endpoint showing the net outcome after all changes

Creating a waterfall chart

Go directly to the Highcharts demo page for “Waterfall” to view its code, play around with different theme colors or edit it on JSFiddle or Codepen.

Let’s build the waterfall chart above that shows a company’s financial progression from initial capital through revenues and costs to final balance. We’ll break this down into clear, manageable steps using Highcharts.

Initial setup and required files

First, we need to include the necessary script files and create our container structure:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Waterfall charts are used to visualize cumulative values,
        where each data point contributes to a total. In this example,
        points showing intermediate sums are used to indicate the
        progression of the total.
    </p>
</figure>

This structure provides the foundation for our chart and includes all necessary Highcharts modules, including the core library, additional features, and accessibility support.

highcharts-more.js is an additional module for Highcharts. This module extends the core functionality of Highcharts by adding support for more advanced chart types like waterfall charts.

Styling the visualization

Next, we’ll add CSS to control the layout and appearance:

.highcharts-figure {
    min-width: 320px;
    max-width: 700px;
    margin: 1em auto;
}
.highcharts-description {
    margin: 0.3rem 10px;
}

Implementing the chart

Now we’ll add the JavaScript code that creates our waterfall chart:

Highcharts.chart('container', {
    chart: {
        type: 'waterfall'
    },
    title: {
        text: 'Highcharts Waterfall'
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        title: {
            text: 'USD'
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        pointFormat: '${point.y:,.2f} USD'
    },
    series: [{
        upColor: Highcharts.getOptions().colors[2],
        color: Highcharts.getOptions().colors[3],
        data: [{
            name: 'Start',
            y: 120000
        }, {
            name: 'Product Revenue',
            y: 569000
        }, {
            name: 'Service Revenue',
            y: 231000
        }, {
            name: 'Positive Balance',
            isIntermediateSum: true,
            color: Highcharts.getOptions().colors[1]
        }, {
            name: 'Fixed Costs',
            y: -342000
        }, {
            name: 'Variable Costs',
            y: -233000
        }, {
            name: 'Balance',
            isSum: true,
            color: Highcharts.getOptions().colors[1]
        }],
        dataLabels: {
            enabled: true,
            format: '{divide y 1000}k'
        },
        pointPadding: 0
    }]
});

Key configuration elements

The waterfall chart configuration contains several crucial components that control its behavior and appearance:

Chart type and basic setup

The chart type is explicitly set to ‘waterfall’, which enables the specialized rendering needed for this visualization. The configuration includes essential elements for axis setup, tooltips, and data formatting.

Data structure

The data array contains objects that define each point in the waterfall. Each point can have several properties:

name: Label for the data point shown on the x-axis
y: Numerical value representing the change
isIntermediateSum: Boolean flag for showing subtotals
isSum: Boolean flag for the final total
color: Optional specific color for individual points

Advanced customization options

Waterfall charts offer numerous customization possibilities to enhance their effectiveness:

Color schemes

Colors play a crucial role in waterfall charts. The example uses different colors for positive and negative values, making changes immediately visible. The upColor and color properties control these defaults, while individual points can override them.

Data labels

The dataLabels configuration controls how values appear on the chart. Our example formats large numbers in thousands with a ‘k’ suffix for better readability. You can customize the format, position, and styling of these labels.

Tooltips

Tooltips provide additional information when users hover over chart elements. The pointFormat property defines how this information appears, including value formatting and units.

Common application areas

Waterfall charts serve various purposes across different industries:

Financial analysis

In finance, waterfall charts help visualize:

Profit and loss statements: Showing how revenues and expenses lead to net profit
Budget analysis: Tracking changes between periods or variances from planned values
Cash flow analysis: Illustrating how different activities affect cash position

Project management

Project managers use waterfall charts to:

Resource allocation: Showing how resources are distributed across project phases
Cost tracking: Monitoring how different activities contribute to total project cost
Schedule analysis: Visualizing how different tasks affect overall timeline

Best practices for effective waterfall charts

To create clear and informative waterfall charts, consider these guidelines:

Data organization

Arrange data points in a logical sequence that tells a clear story. Group related items together and use intermediate sums to break down complex progressions into digestible segments.

Visual clarity

Maintain consistent color coding throughout the chart. Use contrasting colors for positive and negative values, and distinct colors for totals. Ensure labels are readable and properly positioned.

Interactive features

Take advantage of interactive features like tooltips to provide additional context. Consider adding drill-down capabilities for complex data sets where users might want to explore details.

Troubleshooting common issues

When implementing waterfall charts, you might encounter these common challenges:

Label overlap

In cases where data labels overlap, consider these solutions:

Adjust label positioning using the dataLabels.position property
Rotate labels using the dataLabels.rotation property
Format labels differently to reduce their size

Scale issues

When dealing with widely varying values:

Consider logarithmic scales for large value ranges
Break out extreme values into separate charts
Use appropriate number formatting to maintain readability

Conclusion

Waterfall charts offer a powerful way to visualize sequential changes and their cumulative effects. When implemented properly using Highcharts, they provide clear insights into how individual components contribute to a final result. The combination of thoughtful data organization, appropriate visual design, and interactive features creates charts that effectively communicate complex relationships.

Remember to consider your audience when designing waterfall charts. Focus on clarity and comprehension, using appropriate levels of detail and interactivity. With proper implementation and attention to best practices, waterfall charts become valuable tools for understanding and communicating sequential changes in your data.