lsokal
Posts: 7
Joined: Fri Feb 19, 2021 4:13 pm

plot arrows on maps

Dear,

First of all, thanks for the great product and support.
We purchased the highcharts base license and are currently investigating if we would like to get the highmaps extension aswell.

Context
I found out the following "flight routes" chart:

Which is very close to one of our use case for a custom map.

I would like a slight modification however, and did not find much documentation on the "chart.path" property.

More broadly, I do not find much documentation on how to draw your custom svg elements on these maps.

Example I used
https://www.highcharts.com/demo/maps/flight-routes

My example
https://codepen.io/lsokal/pen/VwmzLVB

Request Modifications

I would like to add ARROWHEADS to these lines to show the direction of the fluxes.

Also, the curvature on the lines is probably not needed for our use case but I did not really research how to modify your the custom functrion from the flight-routes example.
lsokal
Posts: 7
Joined: Fri Feb 19, 2021 4:13 pm

Re: plot arrows on maps

I found out how to draw the lines without curvatures:
simply replace the pointsToPath function with: return "M" + from.x + "," + from.y + "L" + to.x + "," + to.y;

However, I am having trouble the documentation on this path property and drawing SVG in general.

Specifically, I still can't find a proper solution to plot arrowheads as to indacate direction of the flows.

Could anyone provide some guidance ?
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: plot arrows on maps

Hi,
Welcome to the forum and thank you for your appreciation for Highcharts.

I have prepared a few helpful links for you, if you need to clarify something, feel free to write.

Here is a similar topic about draw arrow in Highcharts Maps.
viewtopic.php?t=40851

In this article, you will find information on how to use SVG renderer to draw a path.
https://support.highcharts.com/support/ ... -renderer-

API References:
https://api.highcharts.com/class-refere ... derer#path

Example of use:
https://jsfiddle.net/gh/get/library/pur ... ion-arrows

If you have any questions you can reach me any time.
Best regards.
Sebastian Hajdus
Highcharts Developer
lsokal
Posts: 7
Joined: Fri Feb 19, 2021 4:13 pm

Re: plot arrows on maps

Thanks a lot!

In the meantime, I went with a slightly different solution, as per described in the post:

https://stackoverflow.com/questions/580 ... highcharts

It suits my needs well but there's just one thing: the arrowheads are not exported when exporting to PNF / SVG etc.

This is because the event adding thoses occurs after loading I guess.
Is there an easy way to force this load the export function aswell ?

Otherwise, I will investigate your other examples.

Thanks and regards
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: plot arrows on maps

Hi,

I wanted to add these options in exporting.chartOptions but the main object can't load yet.
Another think is to add renderer elements when the chart is completed (line 163).

API References:
https://api.highcharts.com/highmaps/exp ... artOptions

Live demo:
https://jsfiddle.net/BlackLabel/rpmz30k6/

Best regards.
Sebastian Hajdus
Highcharts Developer
lsokal
Posts: 7
Joined: Fri Feb 19, 2021 4:13 pm

Re: plot arrows on maps

Dear Sebastian,

Thanks for your answer !

I tried you first example aswell as the one I found on stackoverflow: both examples are similar and give me a great end result in browser.

However, the export is still problematic as the the arrowheads are missing in png/jpeg etc..

Iit works with your image example but it seems it's not working with css arrowheads + SVG markers.

I'm getting out of ideas.

Thanks and regards,
Louis
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: plot arrows on maps

Hi Louis,

We need to find a way to render these arrows, it should work out in a similar way as I render the path on line 166, I'm still testing your case.

Live demo:
https://jsfiddle.net/BlackLabel/ndp4jbLg/

API References:
https://api.highcharts.com/class-refere ... definition
https://api.highcharts.com/class-refere ... derer#path

Best regards.
Sebastian Hajdus
Highcharts Developer
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: plot arrows on maps

Hi,
I'm back with a working solution, I used styledMode: true when exporting a chart and added import to css files.

Code: Select all

  exporting: {
    allowHTML: true,
    chartOptions: {
      chart: {
        styledMode: true
        }
    }
 }
        

Live demo:
https://jsfiddle.net/BlackLabel/18xyqu4L/

API References:
https://api.highcharts.com/highmaps/chart.styledMode

​If you have further inquiries, you may reach out to me at any time.
Best regards.
Sebastian Hajdus
Highcharts Developer
lsokal
Posts: 7
Joined: Fri Feb 19, 2021 4:13 pm

Re: plot arrows on maps

thanks a lot Sebastian, this does the trick !

Cheers,
Louis
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: plot arrows on maps

You're welcome!
In case of any further questions, feel free to contact us again.
Sebastian Hajdus
Highcharts Developer
Gilson401
Posts: 4
Joined: Mon Jul 11, 2022 8:59 pm

Re: plot arrows on maps

Hi Sebastian.

I'm working with nuxt2.
How can I access series and draw markes like in this fiddle https://jsfiddle.net/uxjfz3eq/89/ ?

I need to use Nuxt2/Vue2.
I will render about eleven series and each serie must draw a marker with the same color at the end.

I've tryed to adapt your example above but no success.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: plot arrows on maps

Hello Gilson401!
Here is the demo for you using Nuxt2/Vue2. There is the same config as you sent in your post. I found that codesandbox has some kind of error if you try to fork it, so please keep this bug in mind for the future.

Demo: https://codesandbox.io/s/codesandbox-nuxt-forked-dxvg5v

Feel free to ask any further questions.
Kind regards!
Hubert Kozik
Highcharts Developer
Gilson401
Posts: 4
Joined: Mon Jul 11, 2022 8:59 pm

Re: plot arrows on maps

Hi hubert.k. Thanks for the answer. Is there a way to the marker apply the same color of the line serie?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: plot arrows on maps

Gilson401,
It can be done by adding IDs to paths and then updating them with color from the series. Please, check the demo below.

Demo in pure JS: https://jsfiddle.net/BlackLabel/nw43950v/
Demo in Nuxt/Vue: https://codesandbox.io/s/codesandbox-nuxt-forked-dxvg5v

Let me know if you have any further questions!
Regards!
Hubert Kozik
Highcharts Developer
Gilson401
Posts: 4
Joined: Mon Jul 11, 2022 8:59 pm

Re: plot arrows on maps

Thankyou Hubert.k

Return to “Highcharts Maps”