Horizontal Waterfall Chart in Angular with arrow headed bars

[Shweta999]

Hi,

I need to implement a horizontal waterfall chart in Angular. The specific requirement which i am struggling with is to modify
1. only the right border radius if the value is positive and
2. only the left border radius if the value is negative.

This will provide the horizontal bars with direction and will be visually appealling.

Please guide how this may be achieved.

[jakub.j]

Welcome to our forum and thanks for contacting us with your question!

You can do it using highcharts rounded corners plugin. You just need to split your data into 2 series as the plugin does not support setting border radius on a single point but on a whole series, see:

Demo: https://stackblitz.com/edit/highcharts- ... mponent.ts

Let me know if that was what you were looking for!
Best regards
Jakub

[Shweta999]

Thanks for the quick response Jakub.

We don't have highcharts-rounded-corners available in the firm . Is there an alternative method ?

[jakub.j]

Hey, you're welcome!

Actually, in the newest Highcharts v11, there is a way to do that using series.borderRadius object, so you can do it without the plugin, see demo:

Demo: https://stackblitz.com/edit/highcharts- ... mponent.ts

Let me know if you have any further questions!
Kind regards
Jakub

[Shweta999]

Is there no way in highcharts v10. Also do we need to keep the positive and negative series separate always ?

[jakub.j]

Hey!

If you need to implement it in v10, I would go back to using the plugin but you can simply paste the logic from the plugin into your application as an extension, see:

Demo: https://stackblitz.com/edit/highcharts- ... mponent.ts

Unfortunately, you need to have 2 separate series, because as I said, this logic doesn't let you to control radius of a singular point (so that we have different radiuses for different points in one series) but only control the radius of each series. The question is why do you need only one series? You can always name them exactly the same, then link them and color them the same way as I did in the demo, and there shouldn't be much difference when it is 2 series or just 1. If you face any difficulties, please let me know and I will try to help you figure out the problem.

Feel free to ask any further questions!
Kind regards
Jakub

[Shweta999]

Thank you.
The bars have rounded edges.
For highcharts v11 can the bar heads have an angle. In other words can they look like arrows ?

[jakub.j]

Hey!

You can draw arrows using Highcharts.SVGRenderer.symbol. I've drawn an arrow on the end of each column and colored it to match the color of the series.

Demo: https://stackblitz.com/edit/highcharts- ... mponent.ts

Let me know if you have any further questions!
Kind regards
Jakub

[Shweta999]

waterfall sample.png (7.74 KiB) Viewed 99 times

hi Jakub,

There are certain specifics as to how the chart should look.

1. the bars should look as attached.
2. the line should be from the apex of the triangle.
3. the data labels should be inside the bar. If the bar is small then the data label should be
a. to the left if the bar is negative and
b. to the right if the bar is positive.

[jakub.j]

Hey!

I modified the demo so that the arrows are a part of the point so the line starts from the apex. I also formatted the dataLabels so that when the point is smaller than 80 pixels, the value is transcripted to xxx K format. If you want to change the alignment of the dataLabels, you can use dataLabels.align for each series alone what I showed on the demo.

Demo: https://stackblitz.com/edit/highcharts- ... mponent.ts

Best regards
Jakub