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

plot arrows on maps

Fri Feb 19, 2021 4:25 pm

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

Mon Feb 22, 2021 5:16 pm

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: 978
Joined: Fri Aug 07, 2020 7:08 am

Re: plot arrows on maps

Tue Feb 23, 2021 9:44 am

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

Thu Feb 25, 2021 3:43 pm

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: 978
Joined: Fri Aug 07, 2020 7:08 am

Re: plot arrows on maps

Fri Feb 26, 2021 12:22 pm

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

Mon Mar 01, 2021 5:31 pm

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: 978
Joined: Fri Aug 07, 2020 7:08 am

Re: plot arrows on maps

Tue Mar 02, 2021 1:15 pm

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: 978
Joined: Fri Aug 07, 2020 7:08 am

Re: plot arrows on maps

Tue Mar 02, 2021 8:13 pm

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

Wed Mar 03, 2021 9:24 am

thanks a lot Sebastian, this does the trick !

Cheers,
Louis

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

Re: plot arrows on maps

Wed Mar 03, 2021 9:35 am

You're welcome!
In case of any further questions, feel free to contact us again.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Maps”