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

A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/855UX3YD

          
{
  "type":"waterfall",
  "series":[
    {
      "values": [420,210,-170,-140,"SUM"]
    }
  ]
}
        

hwaterfall

A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/OPAEUDCW

          
{
  "type":"hwaterfall",
  "series":[
    {
      "values": [420,210,-170,-140,"SUM"]
    }
  ]
}
        

waterfall3d

A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/CA3JP4LJ

          
{
  "type":"waterfall3d",
  "series":[
    {
      "values": [420,210,-170,-140,"SUM"]
    }
  ]
}
        

hwaterfall3d

A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/R5DGETT5

          
{
  "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:

AttributeTypeValuesDetails

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.

A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/YQQ58Z4Z

          
{
  "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.