chad-lee
Posts: 3
Joined: Wed Apr 20, 2022 11:02 am

Highcharts WorldMap with pins and clickable tooltip

Hi!
I'm working on an angular project with a feature that has a world map for a view.
I just checked out Highcharts yesterday and I'm stull confused on somethings.
I want this this map to:
[*] Have coutries change color when hovered.
[*] Have a point/pin shape on some countries.
[*] Have a tool tip of those countries that display some information, along with clickable text that can take me to another link.

I'm working on Angular 13, and this is my Highchats options:

Code: Select all

chartoptions: Highcharts.Options = {
chart: {
map: worldMap
},
title: {
text: "This is my title"
},
legend: {
enabled: false
},

series: [
{
type: "map",
name: "Country",
color: "#E0E0E0",
borderColor: '#A0A0A0',
states:{
hover: {
color: "#4bcd3e"
}
},
dataLabels: {
enabled: false,
},
data: [
["fo", 0],
["um", 1],
["us", 2],
["jp", 3],
["sc", 4],
["in", 5],
["fr", 6],
["fm", 7],
["cn", 8],
["pt", 9],
["sw", 10],
["sh", 11],
["br", 12],
["ki", 13],
["ph", 14],
["mx", 15],
["es", 16],
["bu", 17],
["mv", 18],
["sp", 19],
["gb", 20],
["gr", 21],
["as", 22],
["dk", 23],
["gl", 24],
["gu", 25],
["mp", 26],
["pr", 27],
["vi", 28],
["ca", 29],
["st", 30],
["cv", 31],
["dm", 32],
["nl", 33],
["jm", 34],
["ws", 35],
["om", 36],
["vc", 37],
["tr", 38],
["bd", 39],
["lc", 40],
["nr", 41],
["no", 42],
["kn", 43],
["bh", 44],
["to", 45],
["fi", 46],
["id", 47],
["mu", 48],
["se", 49],
["tt", 50],
["my", 51],
["pa", 52],
["pw", 53],
["tv", 54],
["mh", 55],
["cl", 56],
["th", 57],
["gd", 58],
["ee", 59],
["ag", 60],
["tw", 61],
["bb", 62],
["it", 63],
["mt", 64],
["vu", 65],
["sg", 66],
["cy", 67],
["lk", 68],
["km", 69],
["fj", 70],
["ru", 71],
["va", 72],
["sm", 73],
["kz", 74],
["az", 75],
["tj", 76],
["ls", 77],
["uz", 78],
["ma", 79],
["co", 80],
["tl", 81],
["tz", 82],
["ar", 83],
["sa", 84],
["pk", 85],
["ye", 86],
["ae", 87],
["ke", 88],
["pe", 89],
["do", 90],
["ht", 91],
["pg", 92],
["ao", 93],
["kh", 94],
["vn", 95],
["mz", 96],
["cr", 97],
["bj", 98],
["ng", 99],
["ir", 100],
["sv", 101],
["sl", 102],
["gw", 103],
["hr", 104],
["bz", 105],
["za", 106],
["cf", 107],
["sd", 108],
["cd", 109],
["kw", 110],
["de", 111],
["be", 112],
["ie", 113],
["kp", 114],
["kr", 115],
["gy", 116],
["hn", 117],
["mm", 118],
["ga", 119],
["gq", 120],
["ni", 121],
["lv", 122],
["ug", 123],
["mw", 124],
["am", 125],
["sx", 126],
["tm", 127],
["zm", 128],
["nc", 129],
["mr", 130],
["dz", 131],
["lt", 132],
["et", 133],
["er", 134],
["gh", 135],
["si", 136],
["gt", 137],
["ba", 138],
["jo", 139],
["sy", 140],
["mc", 141],
["al", 142],
["uy", 143],
["cnm", 144],
["mn", 145],
["rw", 146],
["so", 147],
["bo", 148],
["cm", 149],
["cg", 150],
["eh", 151],
["rs", 152],
["me", 153],
["tg", 154],
["la", 155],
["af", 156],
["ua", 157],
["sk", 158],
["jk", 159],
["bg", 160],
["qa", 161],
["li", 162],
["at", 163],
["sz", 164],
["hu", 165],
["ro", 166],
["ne", 167],
["lu", 168],
["ad", 169],
["ci", 170],
["lr", 171],
["bn", 172],
["iq", 173],
["ge", 174],
["gm", 175],
["ch", 176],
["td", 177],
["kv", 178],
["lb", 179],
["dj", 180],
["bi", 181],
["sr", 182],
["il", 183],
["ml", 184],
["sn", 185],
["gn", 186],
["zw", 187],
["pl", 188],
["mk", 189],
["py", 190],
["by", 191],
["cz", 192],
["bf", 193],
["na", 194],
["ly", 195],
["tn", 196],
["bt", 197],
["md", 198],
["ss", 199],
["bw", 200],
["bs", 201],
["nz", 202],
["cu", 203],
["ec", 204],
["au", 205],
["ve", 206],
["sb", 207],
["mg", 208],
["is", 209],
["eg", 210],
["kg", 211],
["np", 212]
],

},
]
}

I was able to acheive the color hovering, but I have no idea how to go around the pin markers.
I looked for answers on this forum and I didn't find something that fits my problem, so If I missed a thread that answered, I apologize for the duplication, and I'd love to be linked to it.

Cheers!
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Highcharts WorldMap with pins and clickable tooltip

Hello,

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

To be able to set points on the map, you must use the appropriate version of the map with lat and long parameters. Then you can set your own symbol for the point on the map.

As for the tooltip, I don't quite understand what you want to achieve. If you want it to show only for custom points you can use tooltip.formatter to return information only for them.

Demo: https://jsfiddle.net/BlackLabel/21aLf67p/
API: https://api.highcharts.com/highcharts/p ... ker.symbol
https://api.highcharts.com/highcharts/tooltip.formatter

Let me know if that was what you were looking for!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
chad-lee
Posts: 3
Joined: Wed Apr 20, 2022 11:02 am

Re: Highcharts WorldMap with pins and clickable tooltip

Thank you so much for your answer Michal! It's really helpful
What I wanted with the tooltip is:
Normally, when I hover over the tooltip, it dissapears. I want to be able to hover over the tooltip and not have it dissapear. The reason I want that is I want to inlcude a link/button inside of the tooltip, and I want to be able to click it.


Thanks in advance!
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Highcharts WorldMap with pins and clickable tooltip

You're welcome!

You can use tooltip.hideDelay to allow users to hover on the tooltip to prevent hiding it.

Demo: https://jsfiddle.net/BlackLabel/Lutk41ga/
API: https://api.highcharts.com/highcharts/tooltip.hideDelay

Feel free to ask any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
chad-lee
Posts: 3
Joined: Wed Apr 20, 2022 11:02 am

Re: Highcharts WorldMap with pins and clickable tooltip

Thank you Michal. I's great so far!
One last thing I want to do is make the tooltip larger (not just enough space to contain the text).
I've seen these two links:

http://www.java2s.com/example/javascrip ... width.html
http://jsfiddle.net/hfrntt/qfnNz/1/

But I didnt know how to apply them to an angular context.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Highcharts WorldMap with pins and clickable tooltip

That's great to hear!

You can apply CSS styles in the DIV returned by the tooltip.formatter() function.
Demo: https://jsfiddle.net/BlackLabel/2vj4fkz6/

In case of any further questions, feel free to contact us again.
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Maps”