Waterfall Chart - JavaScript
Here is an example of a widget script you can use to create a Waterfall Chart using the standard Column Chart widget.
First, create a column chart with multiple measures/values.
In the example below I have a starting price, and then two adjustments (these can be positive or negative).
Add the following code using the 'edit script' menu option in the widget:
widget.on('beforeviewloaded', function(widget,element,options){
var chartOptions = element.options;
chartOptions.chart.type = 'waterfall';
chartOptions.legend.enabled = false;
if (chartOptions.plotOptions.series.dataLabels.enabled == true){
chartOptions.plotOptions.series.dataLabels.verticalAlign = 'top';
}
chartOptions.series.forEach(setSumSeries, chartOptions.series[0].data);
})
function setSumSeries(series, index) {
if (series.name.startsWith("*")) {
this[index].isSum = true;
}
}
The column chart should now appear more like a waterfall chart.
To add summary columns (which total up everything to the left of where you place the summary column) add a new value to the chart and use the formula to enter a 0. (it does not matter what this value is, as it not used).
Then, rename the column so it starts with an asterisk e.g. * Final Price
Repeat for as many summary columns as you need, and drag them to the required position in the Values list.
Apply colour formatting as desired (I added conditional formatting for positive/negative adjustment values).
If you want to make additional changes to the chart, you can use the api reference for the waterfall chart here and set them using the chartOptions.<option> in the same way as in the example.
Updated 03-02-2023
