Waterfall Charts
Overview
ZingChart supports four waterfall chart types:
- Vertical (default)
- Horizontal
- 3D Waterfall
- 3D Horizontal Waterfall
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',
}
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:
| 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: {
backgroundColor: 'green'
},
negative: {
backgroundColor: 'red'
},
intermediate: {
backgroundColor: 'blue'
},
final: {
backgroundColor: 'grey'
},
line: {
lineStyle: 'dashed',
lineSegmentSize: 4,
lineGapSize: 4,
lineWidth: '1px'
}
}
}
