Waterfall Charts

Overview

ZingChart supports four waterfall chart types:


Note: See our Waterfall Chart Gallery for inspiration on all the different waterfall chart possibilities.

Waterfall Chart Types

To specify your chart type, you need to use the type attribute. You can then choose a standard waterfall, horizontal waterfall, 3D waterfall, or 3D horizontal waterfall chart.

Note: Learn more about how to create 3D charts with our 3D Charts Tutorial.

Waterfall

Specify a standard vertical waterfall chart with the waterfall value.

{
  type: "waterfall",
}
https://app.zingsoft.com/demos/embed/855UX3YD
https://app.zingsoft.com/demos/embed/855UX3YD

Horizontal Waterfall

Specify a horizontal waterfall chart with the hwaterfall value.

{
  type: "hwaterfall",
}
https://app.zingsoft.com/demos/embed/OPAEUDCW
https://app.zingsoft.com/demos/embed/OPAEUDCW

Data

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. Positive numbers will add to the running total and negative numbers will be subtracted from the current running total.

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.

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

Chart-Specific Properties

Styling for the different elements of a waterfall chart is handled within the options object. 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
{
  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
    }
  }
}
https://app.zingsoft.com/demos/embed/YQQ58Z4Z
https://app.zingsoft.com/demos/embed/YQQ58Z4Z