HighCharts Maps - How to render custom marker with text and subtext

[itchamp]

Hi,

I want to render a custom marker with text and subtext as shown in the attached snapshot.

The blue circle shows the current value and the green circle shows the change in the value since last time.

Could you please guide me on how can I achieve it? I will really appreciate it if you can share an example of that. I want to render a custom component to show a marker (that has text and subtext - In other words, I want to render anything that I want).

The solution could be by anyway - it could be a marker OR annotation OR any other way to achieve this behavior.

Thanks in advance!

[jedrzej.r]

Hi!

Thanks for reaching out to us with your question!

The easiest way to achieve such effect would be by using dataLabels.format property along with useHTML, in which you can pass any type of data and customize it with HTML markup and some CSS styling.

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

Another way of doing so would be by utilizing SVGRenderer. For example, you could create a group containg two circles with text in it, and append it to desired point on map. On moving or zooming the map, you would have to translate map coordinates of the point to projected units, and update them. Whilst this approach allows bigger customization, it is also more contrived in terms of implementing.

API:
https://api.highcharts.com/highmaps/ser ... els.format
https://api.highcharts.com/class-refere ... rer#circle
https://api.highcharts.com/class-refere ... ectedUnits

Let me know if you have any further questions!
Best regards!

[itchamp]

Thank you so much! This is what I was looking for. Appreciate your guidance!

[jedrzej.r]

You're welcome! In case of any further questions, feel free to contact us again.
Best regards!