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:

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

Summary

Have questions about how waterfall charts work? We're happy to help! Email support@zingchart.com or start a chat right here on this page for support.