Waterfall Charts

Can you please help me to create a waterfall chart by extending bar charts in chart.js?
The approach could be changing the height of the y axis for implementing the changes in chart values in the alternate bars.

e.g 10 , 30 is my dataset.

so the waterfall chart will have :
[10, a bar here with a hieght of 20 (30-10) and starting at the end of the first bar, 30]

Author: Fantashit

1 thought on “Waterfall Charts

  1. Waterfall Chart

    @Sabyasachi18 @snd1 using the dummy dataset is a good option if you don’t want to change the library internals.

    If you are okay with changing the code and rebuilding chart.js, you could try modifying the bar controller. The bar controller, calculateBarBase method determines where the base of the bar will be (the side that does not animate). It is defined at https://github.com/chartjs/Chart.js/blob/master/src/controllers/controller.bar.js#L100-L124

    Right now, the loop only considers negative numbers if the current value is negative and vice versa. All if would have to do for a waterfall chart is to sum up all the values before the one being plotted. A similar change would need to be made in calculateBarY.


    Lots of discussion here: #327
    There is a sample file that shows this (text color is pretty bad for some reason) https://github.com/chartjs/Chart.js/blob/master/samples/data_label_combo-bar-line.html

    Bar Color

    You can set the background color of the dataset to an array of colours. The 2nd color would be used for the 2nd bar. Alternatively, you can find the bar you want red and do

    bar.custom = bar.custom || {};
    bar.custom.backgroundColor = 'rgb(255, 0, 0)';
    bar.custom.hoverBackgroundColor = // custom hover background color
    chart.update(); // forces re-render

    The custom element for bars has the following properties
    backgroundColor, borderColor, borderWidth, hoverBackgroundColor, hoverBorderColor, and hoverBorderWidth

Comments are closed.