Map with flow arrows between countries (flow map)

[KarlBaumann]

Hi!

I need to create a interactive map similar to the one below. Arrow directions and types are dependant on input data. On hover, arrows should show more details.

getasset.jpg (106.3 KiB) Viewed 1749 times

What would be the best way to achieve that?
Are there any examples available?

Thank you in advance!

[wojtek]

Hi KarlBaumann,

To create arrows you can use renderer on chart object. It depends on you how you will create them, I prepared you a basic solution. I've just rendered arrows using three svg rectangles and combined them in one group (of course path will be better for that). This example is just to show you how you can create such a functionality. I hope it will help you!

Api reference: https://api.highcharts.com/class-refere ... VGRenderer.
Example: https://jsfiddle.net/wchmiel/27dn51p9/

Best regards.

[wojtek]

Also you can use vector series type to create such a map. There is an issue reported on github about rotationOrigin (with a suggested solution) so be mindful of it https://github.com/highcharts/highcharts/issues/8690.

Api reference: https://api.highcharts.com/highcharts/series.vector
Online demo: https://jsfiddle.net/wchmiel/94med2wL/

Best regards.