aox_28
Posts: 3
Joined: Tue Feb 09, 2021 5:19 pm

How to center dataLabels relative to a specific area and not the entire map

Hello, Good Day.
We are using Angular, and we need to show center dataLabels in a dinamic map is the reason that we can't use x and y position.

We considerate that a one solution is center dataLabels relative to a specific area and not the entire map but we didn't find information about this.
We use position but is the same aling the dataLabels to the entire map.

The next image show the problem, the dataLabel 1 and 5 overlap in the section 5.
section.png
section.png (54.37 KiB) Viewed 2077 times

Add we code in this moment
dataLabel.png
dataLabel.png (40.77 KiB) Viewed 2077 times

Please let us know if any queries.
Request your help here.


Thanking you.
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: How to center dataLabels relative to a specific area and not the entire map

Hello aox_28!

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

I suggest using x and y properties to change the dataLabel position in the load event, over there you can calculate how much you need to move the labels.

API references:
https://api.highcharts.com/highmaps/ser ... taLabels.x
https://api.highcharts.com/highmaps/ser ... taLabels.y

Demo:
https://jsfiddle.net/BlackLabel/3koa0bmp/

I've also found a similar topic, that could help you. Check it out too: https://stackoverflow.com/questions/336 ... gular-path

Feel free to ask any further questions!
Best regards!
Dominik Chudy
Highcharts Developer
aox_28
Posts: 3
Joined: Tue Feb 09, 2021 5:19 pm

Re: How to center dataLabels relative to a specific area and not the entire map

Good morning, thanks for you response.
We applied your solution but not working for us, we use our data of geojson, the topic in stackoverflow is our same problem but due to our data of map is dynamic doesn't recognize "hc-middle-x" and "hc-middle-y" properties.
Our map is irregular and dynamic for that we can't use properties x and y.
If you have another alternative we will be carful.
Best regards!
aox_28
Posts: 3
Joined: Tue Feb 09, 2021 5:19 pm

Re: How to center dataLabels relative to a specific area and not the entire map

aox_28 wrote: Tue Feb 09, 2021 6:07 pm Hello, Good Day.
We are using Angular, and we need to show center dataLabels in a dinamic map is the reason that we can't use x and y position.

We considerate that a one solution is center dataLabels relative to a specific area and not the entire map but we didn't find information about this.
We use position but is the same aling the dataLabels to the entire map.

The next image show the problem, the dataLabel 1 and 5 overlap in the section 5.
section.png


Add we code in this moment
dataLabel.png


Add my repository in git https://github.com/Ageorgina/map
Request your help here.


Thanking you.
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: How to center dataLabels relative to a specific area and not the entire map

Hi again!

Did you create your own map using GEOJson? These properties should work on it too. Could you reproduce the issue in an online editor? Then I'll check why they don't work.

If you're looking for another solution, I'm afraid there's no other way to do it.

Best regards!
Dominik Chudy
Highcharts Developer

Return to “Highcharts Maps”