Waterfall Charts

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

https://app.zingsoft.com/demos/embed/855UX3YD
https://app.zingsoft.com/demos/embed/855UX3YD
{
  type: "waterfall",
  series: [
    {
      values: [420,210,-170,-140, "SUM" ]
    }
  ]
}

hwaterfall

https://app.zingsoft.com/demos/embed/OPAEUDCW
https://app.zingsoft.com/demos/embed/OPAEUDCW
{
  type: "hwaterfall",
  series: [
    {
      values: [420,210,-170,-140, "SUM" ]
    }
  ]
}

waterfall3d

https://app.zingsoft.com/demos/embed/CA3JP4LJ
https://app.zingsoft.com/demos/embed/CA3JP4LJ
{
  type: "waterfall3d",
  series: [
    {
      values: [420,210,-170,-140, "SUM" ]
    }
  ]
}

hwaterfall3d

https://app.zingsoft.com/demos/embed/R5DGETT5
https://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
positiveObjectMixedAccepts styling attribute to style bars with positive values.
negativeObjectMixedAccepts styling attributes to style bars with negative values
intermediateObjectMixedAccepts styling attributes to style intermediate "SUM" bars.
finalObjectMixedAccepts styling attributes to style the final "SUM" bar.
lineObjectMixedAccepts styling attributes to style lines between bars.
https://app.zingsoft.com/demos/embed/YQQ58Z4Z
https://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.