Waterfall Charts

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.

   Labelling

   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.