In Organization Highcharts I want to show arrow at end of lines connected to nodes

[samadhan17]

Hi Please help while showing triangle arrows to organization highcarts connecting lines to nodes. Please find attached image for reference.
I am using highchart version @7.2.1.

OrgChart.JPG (22.79 KiB) Viewed 2644 times

[dominik.c]

Hello samadhan17!

We appreciate you reaching out to us!

As far as I understand you want to draw arrows at the end of the lines in the organization chart, right? Unfortunately, it's not possible to do that by API.

If you want to make the arrows static you can check our general drawing demo, in which we use SVG Renderer to draw the arrows: https://www.highcharts.com/demo/renderer

If you want to make it dynamic I'm afraid that you'll have to write your own wrap. This means that you have to change the method responsible for creating the links paths. I've found a very similar wrap to the one you need to write, but it refers to a network graph. Here is the demo: https://jsfiddle.net/BlackLabel/np0defym/

Docs about writing wraps: https://www.highcharts.com/docs/extendi ... highcharts

Best regards!

[digitaltag]

Hi, did you ever get the arrows working in the organisation charts?

[dominik.c]

Hello digitaltag!

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

They are created with SVG Renderer as you can read in my previous post. In the demo below you can see how it works (lines 5-241 are responsible for drawing arrows and labels).

Demo:
https://jsfiddle.net/gh/get/library/pur ... o/renderer

API references:
https://api.highcharts.com/class-refere ... VGRenderer

Best regards!

[abinmathew]

Code: Select all

I am trying to build a customer and their related parties using organization chart,where it is a single one hop diagram,i.e one customer can have more than 100 related parties,so i need to show that using organization charts,but the problem which i am facing is that ,since the node count is so large,we cannot show completely fit in the screen,so what i am planning is that at a time we should show 10 nodes  and it should show next 10 on click of button is what i am intended to do,is their any way  to achieve this scenario using highcharts ?


Using the Organization chart with  inverted: false,,so please let me know what is the possibility for the above scenario ?

[abinmathew]

I am trying to build a customer and their related parties using organization chart,where it is a single one hop diagram,i.e one customer can have more than 100 related parties,so i need to show that using organization charts,but the problem which i am facing is that ,since the node count is so large,we cannot show completely fit in the screen,so what i am planning is that at a time we should show 10 nodes and it should show next 10 on click of button is what i am intended to do,is their any way to achieve this scenario using highcharts ?


Using the Organization chart with inverted: false,,so please let me know what is the possibility for the above scenario ?

[dominik.c]

Hello abinmathew!

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

The first option is to enable scrollablePlotArea on the chart. Instead of using the button, you can use a scroll to scroll the chart to the right and left to see more nodes. Does it suit you?

API references:
https://api.highcharts.com/highcharts/c ... lePlotArea

Demo:
https://jsfiddle.net/BlackLabel/cweshg4u/

Best regards!

[abinmathew]

Thanks for the reply !!!

I was looking for the button click implementation rather than scroll as that suits more to our business ,if we have a solution for that ,it would be great.

[dominik.c]

Hi again!

In this case, I suggest getting familiar with this topic: viewtopic.php?t=37574

Over there it is nice explained how you can add buttons to scroll the chart like that: http://jsfiddle.net/1dtt1Lph/26/

Best regards!