Waterfall chart

[marvin-solano]

Is there a way to modify the bar chart to make it behave like a waterfall chart? If not, is this chart on the roadmap?

[plouc]

You cannot use the bar chart to make a waterfall chart, I'm planning to add one, but I've no idea when I'll be able to do so

[marvin-solano]

Thanks for the clarification, also, thanks for the amazing library!

[Binb1]

Hi, I was wondering if there were any updates regarding the waterfall charts ?

[SathishRaju]

Just wondering, if waterfall charts will be available sometime this year. Thanks for this wonderful library!

Also if we can make combination charts using nivo, it will become the ultimate charting library!

[carloscastelano]

Any update on this?

[ODINAKACHUKWU]

Any update on this please?

[mdesousa]

For anyone interested, I was able to customize the bar chart to make a waterfall:

See the code here: https://gist.github.com/mdesousa/94260b6596be1d12664a6a0fe92d76ed You need to pass data like this:

const data = [
  { category: "Start Balance", amount: 500 },
  { category: "Deposits", amount: 200 },
  { category: "Withdrawals", amount: -100 },
  { category: "Fees", amount: -20 },
];

There is one constraint to this approach: it does not work well when the sign of the balance changes through the chart. For example, if you start with a negative balance and have sufficient deposits to make it positive. As long as the balance keeps the same sign (either negative or positive) through the chart, it works well.

Hope this helps!

[LeninSG21]

Following on @mdesousa reply, I made a workaround for the sign change catch he described in his solution. The result is the following:

When there are sign changes, subtotal is being painted. For instance, on May, it goes from 10 to -3. Thus, the WaterfallDatum for that month is

{
  x: 'May',
  y: -13,
  amount: 10,
  subtotal: -3,
  paintSubtotal: 1,
  color: DECREMENT,
  accumulated: -3
}

That is, when the sign changes, in reality you're looking at two different bars being painted with the same color. Looking at the bar on Dec, we get the Datum

{
  x: 'Dec',
  y: 30,
  amount: 8,
  subtotal: -22,
  paintSubtotal: 1,
  color: INCREMENT,
  accumulated: 8
}

I made a sandbox with this code. You can change the initial value and check how it behaves different. Also, I added a custom tooltip to showcase how the accumulated property can be useful

Open Sandbox

[mudassirijaz786]

For anyone interested, I was able to customize the bar chart to make a waterfall:

See the code here: https://gist.github.com/mdesousa/94260b6596be1d12664a6a0fe92d76ed You need to pass data like this:

const data = [
  { category: "Start Balance", amount: 500 },
  { category: "Deposits", amount: 200 },
  { category: "Withdrawals", amount: -100 },
  { category: "Fees", amount: -20 },
];

There is one constraint to this approach: it does not work well when the sign of the balance changes through the chart. For example, if you start with a negative balance and have sufficient deposits to make it positive. As long as the balance keeps the same sign (either negative or positive) through the chart, it works well.

Hope this helps!

And how we can add legends to it? Like if I want to Add three legends based on Start Balance, Mid Values and End Balance?