Waterfall Chart (widget script)

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.

patrice PATC October 07, 2020 14:25

Hi Steve,

Very nice !, this help to understand how to access to HighCharts and changing charts.

Regards,

Patrice

Mega Wati November 04, 2020 08:50

Thank you, Steve.

Would be great if can use conditional color formatting for summary columns.

For now, it doesn't work because the value is always 0.

Steve Lewis November 04, 2020 14:45

Hi Mega Wati

If you can also calculate the total in the data for the summary columns with a real value, then you can use that instead of a 0.

e.g. for Quoted Price in the example

SUM( [Product List Price] ) + SUM( [Price Adjustment] )

Then, the standard conditional formatting of color should work.

Mega Wati November 05, 2020 03:58

Thank you for your suggestion Steve, really helpful for me.

Waterfall Chart (widget script)

Comments

Didn't find what you were looking for?