lilbote
Posts: 4
Joined: Thu Aug 12, 2021 10:28 am

Add multiple arrows and values across borders

Hello,
How can I add arrows between countries and values near each arrow ? I'm looking for something similar with what is seen in the capture.
https://jsfiddle.net/rh4y6b5p/3/
Capture.JPG
Capture.JPG (97.65 KiB) Viewed 961 times
Thank you !
KR,
Marius
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Add multiple arrows and values across borders

Hello lilbote,

Thanks for contacting us with your question.

Similar questions have been asked few times before. Here is a few links, that you might find helpful:

Topic about drawing arrows between countries on Highcharts Map:
viewtopic.php?t=40851
Demo: https://jsfiddle.net/wchmiel/27dn51p9/
API reference: https://api.highcharts.com/class-refere ... VGRenderer

Topic about drawing paths on a map in highcharts:
https://stackoverflow.com/questions/580 ... highcharts
Demo: https://jsfiddle.net/BlackLabel/xvhesL2n/

Let me know if these resources were sufficient to solve your problem. If not, feel free to ask any further questions!
Best regards!
Mateusz Bernacik
Highcharts Developer
lilbote
Posts: 4
Joined: Thu Aug 12, 2021 10:28 am

Re: Add multiple arrows and values across borders

Hello Mateusz,

Thank you for providing those helpful examples.

I managed to add arrows but I couldn't find how to add values near each arrow.
Also it seems that the color of the arrows is Orange despite the fact that I set it Red or Blue.

https://jsfiddle.net/3z712c5a/2/
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Add multiple arrows and values across borders

Hello lilbote,

I'll start with incorrect arrow colors. You couldn't successfully change the arrows colors, because you set global colorAxis settings, which override vector color. To prevent this behaviour, you need to set colorAxis value to false, for each vector.

When it comes to arrows values, in this case I would recommend using SVGrenderer, in order to draw values near each arrows.
Demo: https://jsfiddle.net/BlackLabel/um0so8e3/
API reference: https://api.highcharts.com/class-refere ... derer#text

I was thinking about this problem, and even though approach with SVGrenderer and series.vector is perfectly fine, it seem like responsive hell for some cases, for example, adjusting those arrows positions and lengths when zooming or changing chart dimensions might be really hard to achieve.
Have you tried drawing those arrows with annotations? I think it might be the most appropriate method in this case.
API reference: https://api.highcharts.com/highcharts/annotations

Best regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Maps”