HTML5 & JS Waterfall Chart

Waterfall Charts are same as column charts except that the base of next column starts from the end value of previous column. Waterfall chart helps in visualizing the cumulative effect of positive or negative values that are introduced sequentially.

Cannot be combined with: Doughnut, Pie, Funnel, Pyramid, Bar, Stacked Bar, Stacked Bar 100 charts.

Waterfall Chart Specific Properties

Applies To Attribute Type Default Options/Examples
dataSeries risingColor String From theme “green”,”#1E90FF”..
dataSeries fallingColor String “red” “brown”, “#EA2208”
dataSeries bevelEnabled Boolean false true,false
dataSeries/ dataPoint indexLabelPlacement String “outside” “inside”,”outside”
dataSeries/ dataPoint indexLabelOrientation String “horizontal” “horizontal”, “vertical”
dataSeries fillOpacity Number 1 .2,.4,1 etc
dataPoint isIntermediateSum Boolean false true, false
dataPoint isCumulativeSum Boolean false true, false

Basic Waterfall Chart

Try Editing The Code

Waterfall Chart With Additional Customization

Try Editing The Code

  Integrations:    

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question