Blog Help & Support Contact About Login

 Show Nav

JavaScript Waterfall Charts

Waterfall Chart Overview

Waterfall charts can be useful to represent the cumulative effect of sequentially introduced positive or negative values.

Data Format

Create a "series" array with a single object inside. This object should contain a "values" array of numbers, with the optional string "SUM" used in place of a value to show the sum of the preceding values up to that point.

{
  "type":"waterfall",
  "series":[
    {
      "values": [val1, val2, val3, "SUM"]
    }
  ]
}

Types

waterfall

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type":"waterfall",
  "series":[
    {
      "values": [420,210,-170,-140,"SUM"]
    }
  ]
}

hwaterfall

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type":"hwaterfall",
  "series":[
    {
      "values": [420,210,-170,-140,"SUM"]
    }
  ]
}

waterfall3d

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type":"waterfall3d",
  "series":[
    {
      "values": [420,210,-170,-140,"SUM"]
    }
  ]
}

hwaterfall3d

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type":"hwaterfall3d",
  "series":[
    {
      "values": [420,210,-170,-140,"SUM"]
    }
  ]
}

Data Configuration

Waterfall charts have syntax that is very similar to a standard bar chart. The “values” attribute within a series object accepts an array of values, with positive numbers being added to the running total, and negative numbers being subtracted from the current running total.

The string “SUM”, when used as a value within your array, will place a bar showing the running total up to that point. Using “SUM” as the final value in the array will show the final total of all previous values, while placing “SUM” anywhere else in the array will show the intermediate total, or the running total of all values up to the point at which “SUM” appears. It is important to make the distinction between “intermediate” and “final” totals for styling purposes.

Options

Styling for the different elements of a waterfall chart is handled within the "options" object, which should be placed in your main graph object (I.E. in the same level as your "type" attribute). The following objects can be used within the options object to style the different elements:

Attribute Type Values Details
positive Object Mixed Accepts styling attribute to style bars with positive values.
negative Object Mixed Accepts styling attributes to style bars with negative values
intermediate Object Mixed Accepts styling attributes to style intermediate "SUM" bars.
final Object Mixed Accepts styling attributes to style the final "SUM" bar.
line Object Mixed Accepts styling attributes to style lines between bars.
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type":"waterfall",
  "options": {
    "positive": {
      "background-color": "green"
    },
    "negative": {
      "background-color": "red"
    },
    "intermediate":{
      "background-color":"blue"    
    },
    "final": {
      "background-color": "grey"
    },
    "line":{
      "line-style":"dashed",
      "line-segment-size":4,
      "line-gap-size":4,
      "line-width":1
    }
  }
}

Summary

Got a question about how waterfall charts work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.