Waterfall Charts

Overview

ZingChart supports four waterfall chart types:

• Vertical (default)
• Horizontal
• 3D Waterfall
• 3D Horizontal Waterfall

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.

Waterfall

Specify a standard vertical waterfall chart with the waterfall value.

{
  type: "waterfall",
}

Horizontal Waterfall

Specify a horizontal waterfall chart with the hwaterfall value.

{
  type: "hwaterfall",
}

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:

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