Benvaulter
Posts: 5
Joined: Thu May 06, 2021 2:35 pm

How to create a waterfall with a "breakdown" logic?

Hi there,

I am trying to recreate a waterfall chart in highcharts that resemles the following:
Image

It is sort of a breakdown logic, where you start with the overall value, the break that component down into segments and then breakdown one of the segments even further. In this example, the first grey bar is broken down into the two following ones. And then the thrid bar is broken down into another 3 segments.

Is this achievable with the waterfall chart in highcharts?

Thanks!
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: How to create a waterfall with a "breakdown" logic?

Hello, welcome to the official highcharts forum, and thanks for contacting us with your question!
In highcharts, there are a few chart types, that enable the usage of "breakdown logic" as you called it.
Check the following demos, and let me know if that works for you!

https://www.highcharts.com/demo/column-drilldown
https://www.highcharts.com/demo/sunburst

There is a possibility of drilldown feature to be implemented to the waterfall series type, but unfortunately, I don't really understand what it would be like since you didn't share any demo/example.

API Reference: https://api.highcharts.com/highcharts/s ... .drilldown

In case of any further questions feel free to contact us again! Kind regards,
Paweł Lysy
Highcharts Developer
Benvaulter
Posts: 5
Joined: Thu May 06, 2021 2:35 pm

Re: How to create a waterfall with a "breakdown" logic?

Hi and thanks for the quick response. Unfortunately, I was not able to embedd the image correctly. Link to the image: https://ibb.co/18zgHM6

Hopefully that helps to get a better understanding of what I am trying to achieve?

Thanks in advance!
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: How to create a waterfall with a "breakdown" logic?

hi!
I don't really understand what you mean, by this image. This image, that you shared, doesn't tell me anything about the way, that you want the chart to behave. Could you take a look at the demo below, if that works for you? If not, try to describe your issue better. Kind regards,

https://jsfiddle.net/gh/get/library/pur ... /waterfall
Paweł Lysy
Highcharts Developer
Benvaulter
Posts: 5
Joined: Thu May 06, 2021 2:35 pm

Re: How to create a waterfall with a "breakdown" logic?

Hi again and thanks for the ongoing support. Sorry if the image was confusing - also forgot to include the labels. Here is the url to the new image: https://ibb.co/C6ZmSPf

This is a financial chart, breaking down the risk components.

The first bar (-35,59%) is composed of the second bar (-14,46%) and the third bar (-23,12%). So in this first section, the first bar in essence is the sum of the two components. With the example of the waterfall chart you cannot start with the "sum" as I understand it.

Furthermore, the third bar (pruple with label CVaR) is then further decomposed into three additional segments: Aktien, FX, sonstige.

I recreated the chart with the fiddle: https://jsfiddle.net/5xp3Lqtg/ - and now the question is - can I reverse the order?

Hope it becomes clearer now!

Thanks!
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: How to create a waterfall with a "breakdown" logic?

hi! If you want to reverse the order, you can just reverse the xAxis with

Code: Select all

 xAxis: {
        type: 'category',
	reversed: true			
    },
here is modified demo: https://jsfiddle.net/BlackLabel/a1ucLmeb/
Let me know if that works for you!
Kind regards,
Paweł Lysy
Highcharts Developer

Return to “Highcharts Usage”